An open source boilerplate built using Next.js 15.3, TypeScript, and Tailwind CSS
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
- next-intl for internationalization
- 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
- Error tracking with Sentry
- Analytics with Google Analytics
- 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
│
├── messages # i18n messages
├── 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
│ ├── i18n # Internationalization setup
│ ├── 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
│ └── .middleware # Middleware for Next.js
├── .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
├── package.json # Project dependencies and scripts
├── postcss.config.js # PostCSS config
├── README.md # README file
├── tailwind.config.js # Tailwind CSS config
└── tsconfig.json # TypeScript configThe 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 |
We use Sentry for error tracking and performance monitoring. To set up:
- Create a Sentry account
- Add your DSN to
.env:
NEXT_PUBLIC_SENTRY_DSN=your-sentry-dsnWe use Google Analytics for tracking user behavior. To set up:
- Create a Google Analytics account
- Add your Measurement ID to
.env:
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX