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)
│   ├── assets                      # Static assets (images, fonts, etc.)
│   ├── components                  # React components
│   │   ├── forms                   # Form components
│   │   ├── icons                   # svg icons
│   │   ├── shared                  # Header, footer, aside components
│   │   ├── skeletons               # Loading components
│   │   ├── ui                      # Atomic components
│   │   └── widgets                 # Advanced components
│   ├── constants                   # Project-wide constants
│   ├── data                        # Static or mock data
│   ├── helpers                     # Reusable utility functions (e.g., API, formatting, storage)
│   ├── hooks                       # Reusable custom React hooks
│   ├── lib                         # Common utility functions
│   ├── providers                   # Global context providers (theme, data fetching, notifications, i18n)
│   ├── schemas                     # Validation schemas
│   ├── services                    # API request functions
│   ├── stores                      # Global state
│   └── types                       # TypeScript type definitions
├── .env                            # Environment variables
├── .gitignore                      # Git ignore rules
├── .prettierrc                     # Prettier config
├── components.json                 # shadcn/ui config
├── eslint.config.mjs                # ESLint config
├── next.config.mjs                  # Next.js config
├── postcss.config.js                # PostCSS config
├── README.md                       # README file
├── tailwind.config.js               # Tailwind CSS config
└── tsconfig.json                    # TypeScript config

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
Constants	ALPHA_REGEX	SNAKE_CASE