nextjs-boilerplate

KO | EN

gitlite — search

#javascript #php #java #dotfiles #python #golang #hacktoberfest #groovy #alfred-workflow #r #rails #html

nextjs-boilerplate

★ 40 Open GitHub ↗

Scalable folder structure boilerplate and starter-kit for Nextjs 16 with App Router support. Using TypeScript, TailwindCSS, NextAuth, Eslint, Prettier, Husky, Commitlint and Lint Staged

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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.

## 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.

nextjs-boilerplate

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README