A modern, enterprise-grade Next.js boilerplate built with TypeScript, Tailwind CSS v4, and the latest web technologies. Ship production-ready applications faster.
- Next.js 16 - Latest App Router with React 19
- TypeScript - Full type safety throughout
- Tailwind CSS v4 - Modern utility-first styling with CSS-based configuration
- Dark Mode - Built-in theme switching with next-themes
- Framer Motion - Smooth animations and transitions
- Radix UI - Accessible, unstyled UI primitives
- Aceternity UI - Beautiful animated components (Container Text Flip, Glowing Effects)
- SEO Optimized - Dynamic OG images, sitemap, robots.txt, and metadata
- Docker Ready - Development and production Docker configurations
- Code Quality - ESLint, Prettier, Husky, and Commitlint pre-configured
- PWA Ready - Web manifest and icons included
| Category | Technology |
|---|---|
| Framework | Next.js 16 |
| Language | TypeScript 5 |
| Styling | Tailwind CSS v4 |
| UI Components | Radix UI, Aceternity UI |
| Animations | Framer Motion |
| Icons | Lucide React |
| Theme | next-themes |
| Package Manager | pnpm |
| Linting | ESLint 9 |
| Formatting | Prettier |
| Git Hooks | Husky + Commitlint |
| Containerization | Docker |
- Node.js >= 20.0.0
- pnpm >= 9.0.0
# Clone the repository
git clone https://github.com/betaversionio/nextjs-boilerplate.git
cd nextjs-boilerplate
# Install dependencies
pnpm install
# Start development server
pnpm devOpen http://localhost:3000 to view the application.
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
pnpm lint:fix |
Fix ESLint errors |
pnpm format |
Format code with Prettier |
pnpm format:check |
Check code formatting |
pnpm type-check |
Run TypeScript type checking |
pnpm docker:dev |
Start with Docker (development) |
pnpm docker:up |
Start with Docker (production) |
pnpm docker:down |
Stop Docker containers |
src/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ ├── error.tsx # Error boundary
│ ├── loading.tsx # Loading UI
│ ├── not-found.tsx # 404 page
│ ├── manifest.ts # PWA manifest
│ ├── robots.ts # Robots.txt
│ ├── sitemap.ts # Sitemap
│ ├── opengraph-image.tsx # Dynamic OG image
│ └── globals.css # Global styles
├── components/
│ ├── aceternity/ # Aceternity UI components
│ ├── layout/ # Layout components (Navigation, Footer, Theme)
│ ├── sections/ # Page sections (Hero, Features, CTA)
│ └── ui/ # Base UI components
├── config/ # App configuration
│ ├── site.ts # Site metadata
│ └── navigation.ts # Navigation links
├── constants/ # Static data
├── lib/ # Utility functions
└── styles/ # Additional styles
Create a .env.local file based on .env.example:
cp .env.example .env.local| Variable | Description | Default |
|---|---|---|
NEXT_PUBLIC_BASE_URL |
Base URL for the application | https://betaversion.io |
Theme colors are defined in src/app/globals.css using CSS custom properties. The template supports both light and dark modes out of the box.
This template uses Tailwind CSS v4 with CSS-based configuration. Theme customizations are in globals.css using the @theme directive.
# Build the image
pnpm docker:build
# Run with docker-compose
pnpm docker:upThe application can be deployed to any platform supporting Node.js:
- AWS Amplify
- Netlify
- Railway
- Render
See CONTRIBUTING.md for contribution guidelines.
See SECURITY.md for security policies and reporting vulnerabilities.
This project is licensed under the MIT License - see the LICENSE file for details.
Built with passion by BetaVersion.IO