Next.js 15 Boilerplate

A production-ready starter template with everything you need to build and deploy high-performance Next.js applications.

🖥️ Demo

✨ Features

This boilerplate is designed to give you a production-ready foundation with everything configured for optimal development experience and performance:

• 🚀 Performance Optimized - 100% Lighthouse score out of the box
• 🔍 SEO Ready - Comprehensive meta tags and structured data
• 🎨 Modern UI - Clean design with light/dark mode support
• 🛠️ Developer Experience - Comprehensive tooling preconfigured
• 📱 Responsive - Mobile-first approach for all screen sizes
• ♿ Accessible - WCAG compliance with a11y best practices
• 🔒 Type Safe - Full TypeScript support throughout the codebase

📚 Tech Stack

• Next.js 15 - React framework for production
• TypeScript - Type safety and improved developer experience
• Tailwind CSS - Utility-first CSS framework
• ESLint - Code quality and consistency
• Prettier - Code formatting
• Husky - Git hooks for pre-commit validation
• next-themes - Theme management (light/dark mode)
• React Query - Data fetching and state management

🚀 Getting Started

Create a new project using this boilerplate

git clone https://github.com/AnwarHossainSR/nextjs-15-template.git

Development

# Install dependencies
npm install
# or
yarn install

# Start development server
npm run dev
# or
yarn dev

Your application will be available at http://localhost:3000.

📋 Scripts

Command	Description
yarn dev	Start development server
yarn build	Build production application
yarn start	Start production server
yarn lint	Run ESLint to check code quality
yarn analyze	Generate bundle analyzer report
yarn format	Format code with Prettier

🧰 Project Structure

src/
├── app/              # App router pages
├── components/       # Reusable UI components
├── hooks/            # Custom React hooks
├── lib/              # Utility functions and libraries
├── providers/        # Context providers
├── styles/           # Global styles
├── types/            # TypeScript type definitions
└── utils/            # Helper functions

💅 Styling

This boilerplate uses Tailwind CSS for styling with a custom theme configuration that supports light and dark modes. Styled Components are generated at build time and served with the document generated by Next.js Server Side Rendering for optimal performance.

The project includes Google Fonts (Inter and Poppins) preloaded at build time for improved performance and consistent typography.

🧩 Development Features

Absolute Imports

Absolute imports are configured with the @/ prefix starting from the src folder:

// Instead of this
import { Button } from '../../../components/ui/Button';

// You can write this
import { Button } from '@/components/ui/Button';

Import Sorting

Imports are automatically grouped and sorted in the following order:

1. External dependencies
2. Absolute imports (@/*)
3. Relative imports

This is implemented using eslint-plugin-simple-import-sort.

Code Quality

ESLint extends:

• eslint-config-airbnb
• eslint-config-next
• eslint-plugin-jsx-a11y for accessibility recommendations

Git Hooks

On every commit, staged files are validated with ESLint using Husky and lint-staged:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx,ts,tsx}": "eslint --cache --fix --cache-location ./node_modules/.cache/.eslintcache"
}

🔍 SEO

• Comprehensive meta tags in the layout file
• OpenGraph and Twitter card metadata
• /public/robots.txt configured to allow indexing
• Sitemap generation support

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

Made with ❤️ by Anwar Hossain