Next.js Boilerplate

An open source boilerplate built using Next.js 15.3, TypeScript, and Tailwind CSS

Features

With this template, you get all the awesomeness you need:

• Advanced Folder Structures
• Next.js with App Router support
• Type checking TypeScript
• Styled using Tailwind CSS
• State management with Zustand
• Authentication with NextAuth.js
• UI Components built with shadcn/ui
• Data Fetching, Caching and Mutation with TanStack Query
• Linter with ESLint
• Code Formatter with Prettier
• Form handling with React Hook Form
• Validation library with Zod
• Storybook for UI development
• Beautiful and consistent icons from Lucide
• Loading UI using Skeleton Components
• Dark theme with next-themes
• Absolute Imports with @ prefix
• Husky for Git Hooks
• Sitemap.xml and robots.txt with next-sitemap
• Metadata files optimized for SEO
• Storage helpers for Local, Session, Cookies
• 💯 Maximize lighthouse score

Project structure

│
├── public                          # Public assets folder
├── src
│   ├── app                         # Next JS App (App Router)
│   ├── components                  # React components
│   │   ├── shared                  # Header, footer, aside components
│   │   ├── skeletons               # Loading components
│   │   ├── ui                      # Atomic components
│   │   └── widgets                 # Advanced components
│   ├── data                        # Static or mock data
│   ├── helpers                     # Helper functions
│   ├── hooks                       # React hooks
│   ├── lib                         # Utilities and constants
│   ├── providers                   # All providers
│   ├── schemas                     # Zod schemas
│   ├── services                    # API services
│   ├── stores                      # Zustand stores
│   └── types                       # Type definitions
├── .gitignore                      # Git ignore file
├── .prettierrc                     # Prettier configuration
├── components.json                 # shadcn/ui configuration
├── next.config.mjs                  # Next.js configuration
├── postcss.config.js                # PostCSS configuration
├── README.md                       # README file
├── tailwind.config.js               # Tailwind CSS configuration
└── tsconfig.json                    # TypeScript configuration

File Naming Conventions

The project follows consistent file naming conventions:

File Type	Example	Style
Component	LoginForm.tsx	PascalCase
Hook	useLogin.ts	camelCase
Helper, Schema	form-schema.ts	kebab-case
Folder	login-form/	kebab-case