⚡ Next.js Enterprise Boilerplate

Production-ready foundation for building lightning-fast, secure, and scalable web applications

Built with the latest web technologies and best practices for exceptional developer experience

🎯 Why Choose This Boilerplate?

Modern Stack
_{Latest Next.js 15, React 19, and Tailwind v4}

100% Type Safe
_{Strict TypeScript configuration}

DX Optimized
_{Pre-configured tools and workflows}

This boilerplate is meticulously crafted to provide:

✅ Instant Productivity - Start coding immediately with zero configuration
✅ Enterprise Security - Production-ready security headers and CSP out of the box
✅ Blazing Performance - Optimized with React Compiler and Turbopack
✅ Modern CSS - Latest Tailwind CSS v4 with advanced features
✅ Developer Joy - Automated workflows, linting, and formatting

✨ Features

🚀 Performance & Optimization

⚡ Turbopack - Lightning-fast HMR and builds in development
🔄 React Compiler (Experimental) - Automatic performance optimizations
📦 Optimized Bundling - Smart code splitting and lazy loading
🎨 CSS Optimization - PostCSS with automatic vendor prefixing
🖼️ Image Optimization - Next.js Image component with automatic optimization
📱 Responsive Design - Mobile-first approach with Tailwind CSS

🛡️ Security & Reliability

🔒 Security Headers - Pre-configured CSP, HSTS, X-Frame-Options
🛡️ Content Security Policy - Strict CSP with nonce support
🔐 Environment Variables - Secure handling with validation
🚫 XSS Protection - Built-in protections against common vulnerabilities
✅ Type Safety - Strict TypeScript configuration
🔍 Runtime Validation - Input validation and sanitization

🎨 UI & Styling

🎭 Theme Support - Dark/Light mode with next-themes
🎨 Tailwind CSS v4 - Latest version with new features
📐 Component Architecture - Modular and reusable components
♿ Accessibility - WCAG compliant components
🎯 Design System Ready - Consistent spacing and typography
🌈 CSS Variables - Dynamic theming capabilities

🛠️ Developer Experience

🔥 Hot Module Replacement - Instant feedback during development
🐛 Debugging Tools - Source maps and React DevTools support
📝 Biome - Ultra-fast linting and formatting (replaces ESLint + Prettier)
🐶 Husky & Lint-staged - Pre-commit hooks for code quality
🔄 Renovate - Automated dependency updates
📦 pnpm - Fast, disk space efficient package manager

📋 Code Quality

✨ Biome Linting - Comprehensive linting rules
🎨 Auto-formatting - Consistent code style on save
📏 EditorConfig - Consistent coding styles across editors
🔍 TypeScript Strict Mode - Maximum type safety
📊 Bundle Analysis - Visualize and optimize bundle size
🧪 Testing Ready - Pre-configured for unit and integration tests

🔧 Build & Deployment

📦 Production Optimized - Minification and tree-shaking
🚀 Vercel Ready - One-click deployment

🚀 Quick Start

Prerequisites

Node.js 18.17 or later
pnpm 8.0 or later (recommended) or npm/yarn

Installation

Clone the repository

git clone https://github.com/sujalxplores/next-js-boilerplate.git
cd next-js-boilerplate

Install dependencies
```
pnpm install
# or
npm install
```
Set up environment variables
```
cp .env.example .env.local
```
Start the development server
```
pnpm dev
# or
npm run dev
```
Open your browser

Navigate to http://localhost:3000 🎉

📦 Tech Stack

Category	Technology	Description
🎯 Core	Next.js	React framework with SSR/SSG
	React	UI library
	TypeScript	Type-safe JavaScript
🎨 Styling	Tailwind CSS	Utility-first CSS framework
	PostCSS	CSS transformations
	next-themes	Theme management
🛠️ DX Tools	Biome	Linting & formatting
	Husky	Git hooks
	lint-staged	Pre-commit linting
	Renovate	Dependency updates

📁 Project Structure

Click to expand project structure

next-js-boilerplate/
├── 📁 .husky/                 # Git hooks configuration
│   └── pre-commit            # Pre-commit hook for linting
├── 📁 .vscode/               # VS Code configuration
│   ├── extensions.json       # Recommended extensions
│   └── settings.json         # Project-specific settings
├── 📁 app/                   # Next.js App Router
│   ├── 📁 components/        # React components
│   │   └── ThemeToggle.tsx   # Theme switcher component
│   ├── 📁 lib/              # Utility functions and helpers
│   ├── favicon.ico          # Site favicon
│   ├── globals.css          # Global styles
│   ├── layout.tsx           # Root layout component
│   └── page.tsx             # Home page component
├── 📁 public/               # Static assets
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── 📄 .editorconfig         # Editor configuration
├── 📄 .gitignore           # Git ignore rules
├── 📄 .lintstagedrc.json   # Lint-staged configuration
├── 📄 .npmrc               # npm configuration
├── 📄 biome.json           # Biome linter/formatter config
├── 📄 CONTRIBUTING.md      # Contribution guidelines
├── 📄 LICENSE              # MIT license
├── 📄 next.config.ts       # Next.js configuration
├── 📄 package.json         # Project dependencies
├── 📄 postcss.config.mjs   # PostCSS configuration
├── 📄 README.md            # Project documentation
├── 📄 renovate.json        # Renovate bot configuration
└── 📄 tsconfig.json        # TypeScript configuration

📜 Available Scripts

Click to view all available scripts

Script	Command	Description
Development	`pnpm dev`	Start development server with Turbopack (port 3000)
Build	`pnpm build`	Create optimized production build
Start	`pnpm start`	Start production server
Lint	`pnpm lint`	Run Biome linter
Format	`pnpm format`	Format code with Biome
Format Check	`pnpm format:check`	Check code formatting
Type Check	`pnpm type-check`	Run TypeScript compiler check
Clean	`pnpm clean`	Remove build artifacts and node_modules
Analyze	`pnpm analyze`	Analyze bundle size
Prepare	`pnpm prepare`	Setup Husky git hooks

🔧 Script Details

Development Mode

pnpm dev

Starts the development server with Turbopack
Enables Hot Module Replacement (HMR)
Provides detailed error overlays
Runs on http://localhost:3000

Production Build

pnpm build && pnpm start

Creates optimized production build
Minifies code and optimizes images
Generates static pages where possible
Starts production server

Code Quality

pnpm lint        # Check for linting issues
pnpm format      # Auto-fix formatting issues
pnpm type-check  # Verify TypeScript types

⚙️ Configuration

Next.js Configuration

Key Features Enabled

// next.config.ts highlights
{
  reactStrictMode: true,           // Enable React strict mode
  experimental: {
    reactCompiler: true,            // React Compiler for optimizations
    turbo: {},                      // Turbopack configuration
  },
  images: {
    formats: ['image/avif', 'image/webp'],  // Modern image formats
  },
  headers: async () => [...],      // Security headers
}

TypeScript Configuration

Strict Type Checking

{
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true
  }
}

Tailwind CSS Configuration

Tailwind v4 Features

⚡ Lightning CSS for faster builds
🎨 CSS variables for dynamic theming
📱 Container queries support
🎯 Advanced selector strategies
🔧 Custom utilities and components

Biome Configuration

Linting & Formatting Rules

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": { "noForEach": "off" },
      "suspicious": { "noExplicitAny": "error" }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  }
}

🔒 Security Features

🛡️ Security Headers

The boilerplate includes comprehensive security headers configured in next.config.ts:

Header	Purpose
Content-Security-Policy	Prevents XSS attacks and data injection
X-Frame-Options	Prevents clickjacking attacks
X-Content-Type-Options	Prevents MIME type sniffing
Referrer-Policy	Controls referrer information
Permissions-Policy	Controls browser features and APIs

🔐 Content Security Policy

Pre-configured CSP with:

✅ Strict source allowlists
✅ Nonce-based script execution
✅ Upgrade insecure requests
✅ Block mixed content

🚫 Additional Security Measures

Environment Variables Validation - Runtime validation of env vars
Input Sanitization - Protection against injection attacks
Secure Cookies - HttpOnly and Secure flags
HTTPS Enforcement - Automatic redirect to HTTPS

⚡ Performance Optimizations

🚀 Build-time Optimizations

Tree Shaking - Remove unused code
Code Splitting - Automatic route-based splitting
Minification - Compress JavaScript and CSS
Image Optimization - Automatic format conversion and sizing
Font Optimization - Subset and preload critical fonts

🔄 Runtime Optimizations

React Compiler - Automatic memoization and optimizations
Turbopack - Faster HMR and builds
Streaming SSR - Progressive page hydration
ISR Support - Incremental Static Regeneration
Edge Runtime - Deploy to edge locations

📊 Performance Metrics

Target metrics achieved:

First Contentful Paint: < 1.0s
Time to Interactive: < 3.0s
Cumulative Layout Shift: < 0.1
First Input Delay: < 100ms

🎨 Theming

Dark/Light Mode Support

The boilerplate includes a complete theming system:

// Automatic theme detection
<ThemeProvider attribute="class" defaultTheme="system">
  <App />
</ThemeProvider>

Features:

🌓 System preference detection
💾 Theme persistence
🎨 CSS variables for colors
🔄 Smooth transitions
📱 No flash on load

🧪 Testing

Testing Setup (Coming Soon)

Pre-configured for:

Jest - Unit testing
React Testing Library - Component testing
Playwright - E2E testing
MSW - API mocking

📚 Documentation

📖 Next.js Documentation - Framework features and API
🎓 Learn Next.js - Interactive tutorial
💨 Tailwind CSS Docs - Utility classes reference
🔧 Biome Docs - Linter and formatter guide
📘 TypeScript Handbook - Language reference

🚀 Deployment

Vercel (Recommended)

Click the button above
Create a new repository
Configure environment variables
Deploy!

Other Platforms

Deploy to Netlify

# Install Netlify CLI
npm install -g netlify-cli

# Build and deploy
npm run build
netlify deploy --prod --dir=.next

🤝 Contributing

We love contributions! Please see our Contributing Guide for details.

How to Contribute

🍴 Fork the repository
🌿 Create your feature branch (git checkout -b feature/AmazingFeature)
💻 Commit your changes (git commit -m 'Add some AmazingFeature')
📤 Push to the branch (git push origin feature/AmazingFeature)
🎉 Open a Pull Request

Development Workflow

# 1. Clone your fork
git clone https://github.com/your-username/next-js-boilerplate.git

# 2. Install dependencies
pnpm install

# 3. Create a branch
git checkout -b feature/your-feature

# 4. Make changes and test
pnpm dev

# 5. Run checks before committing
pnpm lint
pnpm type-check
pnpm build

# 6. Commit (Husky will run pre-commit hooks)
git commit -m "feat: add new feature"

# 7. Push and create PR
git push origin feature/your-feature

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Next.js Team for the amazing framework
Vercel for hosting and deployment
Tailwind Labs for the utility-first CSS framework
Biome for the fast linting and formatting
All contributors who help improve this boilerplate

💬 Support

Need help? Feel free to:

📝 Open an issue
💬 Start a discussion
⭐ Star this repo to show support!

Built with ❤️ by developers, for developers

_{⭐ Star us on GitHub — it motivates us a lot!}

Name		Name	Last commit message	Last commit date
Latest commit History 151 Commits
.github		.github
.husky		.husky
.vscode		.vscode
app		app
public		public
.editorconfig		.editorconfig
.gitignore		.gitignore
.lintstagedrc.json		.lintstagedrc.json
.npmrc		.npmrc
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
biome.json		biome.json
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
renovate.json		renovate.json
tsconfig.json		tsconfig.json

License

SujalXplores/next-js-boilerplate

Folders and files

Latest commit

History

Repository files navigation

⚡ Next.js Enterprise Boilerplate

🎯 Why Choose This Boilerplate?

✨ Features

🚀 Performance & Optimization

🛡️ Security & Reliability

🎨 UI & Styling

🛠️ Developer Experience

📋 Code Quality

🔧 Build & Deployment

🚀 Quick Start

Prerequisites

Installation

📦 Tech Stack

📁 Project Structure

📜 Available Scripts

🔧 Script Details

Development Mode

Production Build

Code Quality

⚙️ Configuration

Key Features Enabled

Strict Type Checking

Tailwind v4 Features

Linting & Formatting Rules

🔒 Security Features

🛡️ Security Headers

🔐 Content Security Policy

🚫 Additional Security Measures

⚡ Performance Optimizations

🚀 Build-time Optimizations

🔄 Runtime Optimizations

📊 Performance Metrics

🎨 Theming

Dark/Light Mode Support

🧪 Testing

📚 Documentation

🚀 Deployment

Vercel (Recommended)

Other Platforms

🤝 Contributing

How to Contribute

Development Workflow

📄 License

🙏 Acknowledgments

💬 Support

About

Topics

Resources

License

Contributing

Uh oh!

Stars

Watchers

Forks

Releases 1

Uh oh!

Contributors 4

Uh oh!

Languages