nextjs-boilerplate's Introduction

Next.js Boilerplate

An open source boilerplate built using Next.js 14, 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
│   │   ├── features                # Containing logic operations
│   │   ├── 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
│   ├── providers                   # All providers
│   ├── services                    # API services
│   ├── stores                      # Zustand stores
│   ├── types                       # Type definitions
│   └── utils                       # Utilities folder
├── .eslintrc.json                  # ESLint configuration
├── .prettierrc                     # Prettier configuration
├── components.json                 # shadcn/ui configuration
├── next-sitemap.config.js          # next-sitemap 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

Recommend Projects