Next.js Boilerplate

Modern Next.js 15.3 boilerplate with TypeScript & Tailwind CSS

Live Demo: https://nextjs15-boilerplate.vercel.app/en

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
• 🗺️ next-intl for internationalization
• 🧩 UI Components built with shadcn/ui
• 🔄 Data Fetching, Caching and Mutation with TanStack Query
• ⌨️ Form handling with React Hook Form
• 🔴 Validation library with Zod
• 🌸 Smart masking and validation with @omergulcicek/forms
• 🧹 Linter with ESLint
• 💖 Code Formatter with Prettier
• 🎉 Storybook for UI development
• 🚨 Error tracking with Sentry
• 📊 Analytics with Google Analytics
• ⏳ Loading UI using Skeleton Components
• 🌓 Dark theme with next-themes
• 💡 Absolute Imports with @ prefix
• ✨ Beautiful and consistent icons from Lucide
• 🐶 Husky for Git Hooks
• 🤖 Sitemap.xml and robots.txt
• ⚙️ Metadata files optimized for SEO
• 🍪 Storage helpers for Local, Session, Cookies
• 💯 Maximize lighthouse score

Project structure

│
├── .husky                          # Husky git hook scripts
├── messages                        # i18n messages
├── public                          # Public assets folder
├── src
│   ├── app                         # Next JS App (App Router)
│   ├── assets                      # Static assets (images, fonts, etc.)
│   ├── components                  # React components
│   │   ├── icons                   # svg icons
│   │   ├── features                # Components with hooks and calculations
│   │   ├── shared                  # Header, footer, aside components
│   │   ├── skeletons               # Loading components
│   │   ├── ui                      # Atomic components
│   │   └── widgets                 # Advanced UI 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 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

Monitoring & Analytics

🚧 Don't forget to replace all FIXME tags with proper code before finalizing the changes.

Error Tracking

We use Sentry for error tracking and performance monitoring. To set up:

1. Create a Sentry account
2. Add your DSN to .env:

NEXT_PUBLIC_SENTRY_DSN=your-sentry-dsn

Analytics

We use Google Analytics for tracking user behavior. To set up:

1. Create a Google Analytics account
2. Add your ID to .env:

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

Contributors

• @omergulcicek