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

A Next.js boilerplate that helps you get 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, Typescript, TailwindCSS, ESLint, 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

Features

• Next.js: Full-fledged framework for React apps
• Typescript: Type checking and better code quality
• TailwindCSS: Utility-first CSS framework
• ESLint: Pluggable linting utility for JavaScript
• Prettier: Opinionated code formatter
• Husky: Git hooks made easy
• Lint-staged: Run linters on git staged files
• Commitlint: Lint commit messages
• NextAuth: Powerful authentication for Next.js
• SEO-friendly: Meta tags, Open Graph, sitemap.xml and robots.txt
• Absolute imports: Import directories and files using the @ alias
• 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.

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.

Basically your .env file should look like this:

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.

Eslint configuration

• The project uses common Eslint configuration for Typescript projects. The configuration is based on the following packages:
  • eslint-config-airbnb-typescript: Airbnb's ESLint config with TypeScript support.
  • typescript-eslint: 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 file for details.