A production-ready foundation for building modern web applications with Next.js, React, and TypeScript.
- Next.js 16 with App Router and Turbopack for fast development
- React 19 with experimental React Compiler support
- TypeScript with strict configuration
- Tailwind CSS v4 for styling with dark/light theme support
- Biome for linting and formatting (fast alternative to ESLint + Prettier)
- Husky + lint-staged for pre-commit code quality checks
- Renovate for automated dependency updates
- Security headers pre-configured (CSP, HSTS, X-Frame-Options, etc.)
- Node.js 22 or later
- pnpm (recommended), npm, or yarn
# Clone the repository
git clone https://github.com/sujalxplores/next-js-boilerplate.git
cd next-js-boilerplate
# Install dependencies
pnpm install
# Start the development server
pnpm devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
pnpm dev |
Start development server with Turbopack |
pnpm build |
Create production build |
pnpm start |
Start production server |
pnpm lint |
Check code with Biome |
pnpm lint:fix |
Fix linting issues with Biome |
next-js-boilerplate/
├── app/
│ ├── components/ # React components
│ │ └── ThemeToggle.tsx
│ ├── favicon.ico
│ ├── globals.css # Global styles and Tailwind
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── public/ # Static assets
├── .husky/ # Git hooks
├── biome.json # Biome config
├── next.config.ts # Next.js config
├── postcss.config.mjs # PostCSS config
└── tsconfig.json # TypeScript config
| Category | Technology | Version |
|---|---|---|
| Framework | Next.js | 16.0.9 |
| UI | React | 19.2.3 |
| Language | TypeScript | 5.9.3 |
| Styling | Tailwind CSS | 4.1.18 |
| Theming | next-themes | 0.4.6 |
| Linting | Biome | 2.3.10 |
| Git Hooks | Husky | 9.1.7 |
Strict mode is enabled with additional checks:
{
"compilerOptions": {
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true
}
}Configured for consistent code style. Runs automatically on pre-commit via Husky.
Pre-configured in next.config.ts:
- Content-Security-Policy
- X-Frame-Options
- X-Content-Type-Options
- Referrer-Policy
- Permissions-Policy
Dark and light mode support using next-themes. The ThemeToggle component is included for switching themes.
<ThemeProvider attribute="class" defaultTheme="system">
<App />
</ThemeProvider>pnpm build
vercelSee CONTRIBUTING.md for guidelines.
# Fork and clone
git clone https://github.com/your-username/next-js-boilerplate.git
# Create a branch
git checkout -b feature/your-feature
# Make changes and commit (Husky will run pre-commit hooks)
git commit -m "feat: add new feature"
# Push and open a PR
git push origin feature/your-featureMIT - see LICENSE for details.