khanhtt/clean-arch-nextjs-starter

Clean architecture starter for Next.js with TypeScript. All the tools you need to build your next project.

Clean architecture starter for Next.js with TypeScript.
All the tools you need to build your nextxroject.

Features

• ⚡️ 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).

Quick Start

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

Development

To start the project locally, run:

  npm dev
  our
  yarn dev

Open http://localhost:3000 with your browser to see the result.

Requirements

• Node.js >= 12.22.0
• npm our yarn

Directory Structure

• .husky — Husky configuration and hooks.
  
• public — Static assets such as robots.txt, images, and favicon.
  
• src — Application source code, including pages, components, styles.
  

Scripts

• yarn/npm dev — Starts the application in development mode at http://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 the src directory.

Path Mapping

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

License

MIT © Yazalde Filimone