A modern Next.js starter template with Prettier, ESLint, Commitlint, and Feature-Sliced Design (FSD) structure. This template is designed to kickstart your Next.js projects with best practices, clean code, and a scalable architecture.
- Next.js: The React framework for production.
- Prettier: Code formatting for consistent style.
- ESLint: JavaScript/TypeScript linting for code quality.
- Commitlint: Enforces conventional commit messages.
- Feature-Sliced Design (FSD): Scalable and modular project structure.
- Husky: Git hooks for pre-commit and pre-push workflows.
- TypeScript Support: Built-in TypeScript configuration.
- Node.js (v18 or higher recommended)
- npm or yarn
- Clone the repository:
git clone https://github.com/Hossein-i/nextjs-starter-template.git
- Navigate to the project directory:
cd nextjs-starter-template - Install dependencies:
npm install # or yarn install
Start the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 in your browser to view the application.
The project follows the Feature-Sliced Design (FSD) architecture for better scalability and maintainability:
src/
├── app/ # Next.js app router (pages, layouts, etc.)
├── entities/ # Business entities that the project works with, like user or product.
| ├── api/ # Entity-related API request functions.
| ├── model/ # The data model: schemas, interfaces, stores, and business logic.
│ └── ui/ # The visual representation of this entity in the interface.
├── features/ # Reused implementations of entire product features, i.e. actions that bring business value to the user.
| ├── api/ # Backend interactions: request functions, data types, mappers, etc.
| ├── config/ # Configuration files and feature flags.
| ├── lib/ # Library code that other modules on this slice need.
| ├── model/ # The data model: schemas, interfaces, stores, and business logic.
│ └── ui/ # Everything related to UI display: UI components, date formatters, styles, etc.
├── shared/ # Reusable functionality, especially when it's detached from the specifics of the project/business, though not necessarily.
| ├── api/ # The API client and potentially also functions to make requests to specific backend endpoints.
| ├── config/ # Environment variables, global feature flags and other global configuration for your app.
| ├── i18n/ # Setup code for translations, global translation strings.
| ├── lib/ # A collection of internal libraries.
| ├── styles/ # Global styles and themes
│ └── ui/ # The application's UI kit.
├── views/ # Full pages or large parts of a page in nested routing.
└── widgets/ # Large self-contained chunks of functionality or UI, usually delivering an entire use case.
Prettier is configured to ensure consistent code formatting. Run the following command to format your code:
npm run format
# or
yarn formatESLint is set up to enforce coding standards. Run the following command to lint your code:
npm run lint
# or
yarn lintCommitlint ensures that your commit messages follow the Conventional Commits standard. Example commit message:
npm run commit
# or
yarn commitHusky is used to enforce pre-commit and pre-push hooks:
- Pre-commit: Runs ESLint and Prettier.
- Commit-msg: Runs Commitlint.
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature/YourFeatureName). - Commit your changes (
git commit -m 'feat: Add some feature'). - Push to the branch (
git push origin feature/YourFeatureName). - Open a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.