nextjs-boilerplate — Next.js 启动器模板

SHA-256: 219a2fee33f1ef750ffffada9e356c0f6e58190ef8ece179b1fee24cc51d1767

2026-10-03T00:39:17.303Z

# Next.js Boilerplate and Starter-Kit. Minimal yet scalable setup for Next.js projects

A Next.js 16 boilerplate that helps you jump right into building your app without having to set up everything from scratch every time you start a new project. It comes with a minimal yet scalable setup that includes Next.js 16 with Turbopack, React 19, TypeScript, TailwindCSS, ESLint 9, Prettier, Husky, Lint-staged, Commitlint, and SEO-friendly features.

## Live Demo

Check out the live demo of this boilerplate in action:

[https://nextjs-boilerplate-oe.vercel.app](https://nextjs-boilerplate-oe.vercel.app)

## Features

- [x] [Next.js 16](https://nextjs.org): Full-fledged framework for React apps with Turbopack
- [x] [Typescript](https://typescriptlang.org): Type checking and better code quality
- [x] [TailwindCSS](https://tailwindcss.com/): Utility-first CSS framework
- [x] [ESLint 9](https://eslint.org): Modern pluggable linting utility for JavaScript
- [x] [Prettier](https://prettier.io): Opinionated code formatter
- [x] [Husky](https://typicode.github.io/husky): Git hooks made easy
- [x] [Lint-staged](https://github.com/lint-staged/lint-staged): Run linters on git staged files
- [x] [Commitlint](https://commitlint.js.org/): Lint commit messages
- [x] [NextAuth](https://authjs.dev/): Powerful authentication for Next.js
- [x] SEO-friendly: Meta tags, Open Graph, sitemap.xml and robots.txt
- [x] Absolute imports: Import directories and files using the @ alias
- [x] Route grouping: Group routes for auth and public pages

## Use this boilerplate

You can either clone this repository using command line or clicking on the "Use this template" button to create a new repository with the same directory structure.

```sh
git clone --depth=1 https://github.com/nhanluongoe/nextjs-boilerplate.git project-name
cd project-name
npm install
npm run dev
```

Make sure you config your NextAuth before running the project. For this boilerplate, it uses Github as the authentication provider so you need to create a Github OAuth app and set the `GITHUB_ID` and `GITHUB_SECRET` environment variables in your `.env` file. You can find more information about how to do this in the [NextAuth documentation](https://authjs.dev/guides/configuring-github).

Basically your .env file should look like this:

```env
AUTH_SECRET="yourAuthSecret" 
AUTH_GITHUB_ID=yourGithubClientId
AUTH_GITHUB_SECRET=yourGithubClientSecret 
```

## Project Structure

- All common things (project-wide, global) are placed in the `src` directory. This includes components, types, styles, and utility functions. This is where we put things that are shared across the project.
- In the project wide components, we have `ui` directory that contains atomic design components like `Button`, `Tag`. Outside of the `ui` directory, there are components composed of atomic components like `Header`, `Footer`.
- In the `app` directory we have domains/features. This includes components, types, hooks, api (route handler) ... that are only used in that domain/feature. Basically these directories include things similar to the global things but are only used in the domain/feature.
- The project uses Next.js App Router to handle routing. The router is divided into two groups: `auth` and `unauth`. The `auth` group contains routes that require authentication, while the `unauth` group contains public routes.

```
|-- public                              # Static files
|-- src                                 # Next.js source directory
|   |-- app                             # Next.js App Router
|   |   |-- (auth)                      # (Group) Private routes
|   |   |   |-- layout.tsx              # Authenticated layout
|   |   |   |-- profile                 # (Module) Profile page
|   |   |   |   `-- page.tsx
|   |   |-- (unauth)                    # (Group) Public routes
|   |   |   |-- layout.tsx              # Unauthenticated layout
|   |   |   |-- page.tsx                # Unauthenticated index page
|   |   |   `-- products                # (Module) Product page
|   |   |       |-- components          # Components for the product page
|   |   |       |   `-- ProductCard.tsx
|   |   |       |-- layout.tsx
|   |   |       `-- page.tsx
|   |   |-- layout.tsx                  # App layout
|   |   |-- robots.ts                   # Robots.txt
|   |   `-- sitemap.ts                  # Sitemap.xml
|   |-- components                      # Global components
|   |   |-- Footer.tsx
|   |   |-- Header.tsx
|   |   `-- ui                          # Atomic design components
|   |       |-- Button.tsx
|   |       `-- Tag.tsx
|   |-- api                             # Global API route handlers
|   |   `-- auth
|   |-- styles
|   |   `-- global.css                  # Global styles
|   |-- types                           # Global types
|   |   `-- global.ts
|   |-- libs                            # 3rd-party libraries
|   |   `-- auth.ts
|   `-- utils                           # Global utility functions
|       `-- helpers.ts
|-- tailwind.config.ts                  # TailwindCSS configuration
|-- .eslintrc.json                      # ESLint configuration
|-- .prettierrc                         # Prettier configuration
|-- LICENSE
|-- README.md
|-- commitlint.config.ts                # Commitlint configuration
|-- lint-staged.config.js               # Lint-staged configuration
|-- next-env.d.ts
|-- next.config.mjs
|-- package-lock.json
|-- package.json
|-- postcss.config.mjs                  # PostCSS configuration
`-- tsconfig.json                       # Typescript configuration
```

## Commit message convention

- The project uses Husky and Lint-staged to run ESLint and Prettier on staged files before committing.
- Commit messages must follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/).

## Eslint configuration

- The project uses modern ESLint 9 configuration compatible with Next.js 16. The configuration is based on the following packages:
  - [eslint-config-next](https://www.npmjs.com/package/eslint-config-next): Next.js ESLint configuration.
  - [typescript-eslint v8](https://typescript-eslint.io/): Enables ESLint to lint TypeScript code.

## Contributing

If you have a question or have found a bug, or have any suggestions for improvement, feel free to create an issue or a pull request. Everyone is welcome.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.