Clean architecture starter for Next.js with TypeScript.
All the tools you need to build your nextxroject.
- ⚡️ Next.js 12
- ⚛️ React 18
- ⛑ TypeScript
- ✨ Styled Components - CssInJs for component styling
- 📏 ESLint — To find and fix problems in your code
- 💖 Prettier — Code Formatter for consistent style
- 🐶 Husky — For running scripts before committing
- 🚓 Commitlint — To make sure your commit messages follow the convention
- 🚫 lint-staged — Run ESLint and Prettier against staged Git files
- ⚙️ EditorConfig - Consistent coding styles across editors and IDEs
- 🗂 Path Mapping — Import components or images using the
~/
prefix - ‽ Either Error Handler - For error handling. (Either is designed to hold either a left or a right value but never both).
The best way to start with this template is using Create Next App.
# yarn
yarn create next-app -e https://github.com/yazaldefilimonepinto/clean-arch-nextjs-starter
# npm
npx create-next-app -e https://github.com/yazaldefilimonepinto/clean-arch-nextjs-starter
To start the project locally, run:
npm dev
our
yarn dev
Open http://localhost:3000
with your browser to see the result.
- Node.js >= 12.22.0
- npm our yarn
.husky
— Husky configuration and hooks.public
— Static assets such as robots.txt, images, and favicon.src
— Application source code, including pages, components, styles.
yarn/npm dev
— Starts the application in development mode athttp://localhost:3000
.yarn/npm build
— Creates an optimized production build of your application.yarn/npm start
— Starts the application in production mode.yarn/npm lint
— Runs ESLint for all files in thesrc
directory.
TypeScript are pre-configured with custom path mappings. To import components or files, use the ~/
prefix.
import { Button } from '~/presentation/components/Button';
// To import images or other files from the public folder
import avatar from '~/public/avatar.png';
NOTE:
As many use styled-component
I added the settings for it, but you can remove it at: src/pages/_document.tsx
and remove global styles in: src/shared/styles/globals.ts