Forem: Salman Shahriar

50 Hours Building a Next.js Boilerplate So You Can Ship in 30 Minutes!

Salman Shahriar — Sat, 04 Apr 2026 14:55:07 +0000

Next.js Boilerplate: The Ultimate SaaS Starter Kit

Looking for the best Next.js Boilerplate to launch your next project? You've found it. This production-ready starter kit is designed to help you go from idea to deployment in record time.

The Problem That Kept Me Up at Night
Why This Next.js Boilerplate is Different
Key Features of Nextjs-Elite-Boilerplate
How to Get Started (The Real Way)
The Project Structure (Explained for Humans)
What You Get Out of the Box
Contributing & Support
Final Thoughts

The Problem That Kept Me Up at Night

You know that feeling when you start a new Next.js project and spend the first week just setting things up? Authentication, internationalization, role management, SEO configuration... By the time you're done with the boilerplate, you've lost all that initial excitement.

What you get in one line: A production-ready Next.js SaaS Boilerplate with Type-safe i18n (6 languages) + NextAuth, Google OAuth + RBAC with parallel routes + SEO (sitemap, robots, manifest) + Theme + ESLint + Prettier + Vitest + Playwright.

I've been there. Too many times. After building multiple SaaS projects, I realized I was copy-pasting the same setup code. So I built the ultimate Next.js starter kit.

Why This Next.js Boilerplate is Different

Meet Nextjs-Elite-Boilerplate: not just another "hello world" starter template, but a fully-featured foundation that handles all the boring stuff so you can focus on building your actual product.

Best part? I've made this project completely open source for everyone. Whether you're a student learning the ropes or a seasoned dev looking for a solid starting point, this is for you.

Important Links:

🔗 Live Demo | 📦 GitHub Repo | 🚀 Use this template | Deploy on Vercel

Key Features of Nextjs-Elite-Boilerplate

🌍 Real Internationalization (i18n) for Global SaaS

Six languages out of the box: English, বাংলা, العربية, Français, Español, and 简体中文.
RTL support that actually works: Arabic layouts automatically flip to right-to-left.
Next.js 16 Ready: Fully optimized for the latest React features.

🔐 Role-Based Access Control (RBAC) That Scales

I used Next.js 16's parallel routes to make this painless:

src/app/
  (protected)/
    @admin/      # Admin-only views
      dashboard/
    @user/       # User views
      dashboard/
    layout.tsx   # Smart routing logic

The layout automatically shows the right dashboard based on the user's role. No messy conditionals scattered everywhere. Want to add a new role? Just create a new parallel route folder. That's it.

🎨 UI/UX with shadcn/ui

Components are copy-paste ready (no bloated dependencies).
Full TypeScript support & accessible by default.
Built-in Dark Mode with next-themes.

🔧 ESLint That Actually Helps (Not Annoys)

Catch real bugs (unused variables, missing dependencies, potential null references)
Enforce consistency (import order, naming conventions, formatting)
eslint-config-next - Official Next.js rules
TypeScript-specific linting

Prettier is wired up too. Run npm run lint and npm run prettier:fix for consistent, clean code.

📊 SEO Configuration That's Actually Usable

I created a single JSON configuration file that handles:

Open Graph tags
Structured data (JSON-LD)
Multi-language meta tags
Canonical URLs
Dynamic sitemap generation

Just edit one file:

{
  "appName": "Your App",
  "title": "Your Title",
  "description": "Your Description",
  "domain": "https://yoursite.com",
  "keywords": ["your", "keywords"],
  "social": {
    "twitter": "@yourhandle"
  }
}

🧪 Testing & CI

Unit and component tests: Vitest + React Testing Library. Run npm run test or npm run test:watch; npm run test:coverage for coverage.
E2E: Playwright in e2e/. Run npm run e2e (dev server starts automatically); npm run e2e:ui for the UI. Use npm run e2e:webkit for WebKit-only (e.g. to save disk).
CI: GitHub Actions – .github/workflows/check.yml runs lint, Prettier, tests, and build on push/PR; .github/workflows/playwright.yml runs E2E.

🔑 Authentication (NextAuth.js + Google OAuth)

Google OAuth – enable by setting GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, and NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=true in .env
Custom login page at /auth/login with optional "Sign in with Google"
JWT session with role and user id; redirect to /dashboard after sign-in

Copy .env.example to .env, add your secrets, and you're done.

🏥 Health Check

GET /api/health returns { status: "ok" } for load balancers and Kubernetes probes.

How to Get Started (The Real Way)

Step 1: Clone and Install

# Grab the code
git clone https://github.com/salmanshahriar/Nextjs-Elite-Boilerplate.git
cd Nextjs-Elite-Boilerplate

# Install dependencies (use whatever you prefer)
npm install
# or bun install / yarn install / pnpm install

Step 2: Configure Your Project

This is where most boilerplates leave you hanging. Not this one.

Edit src/shared/lib/config/app-main-meta-data.json:

{
  "appName": "My Awesome SaaS",
  "title": "Revolutionary Product That Does X",
  "description": "We help Y achieve Z",
  "domain": "https://myawesomesaas.com",

  "organization": {
    "name": "My Company",
    "email": "hello@mycompany.com"
  },

  "social": {
    "twitter": "@myhandle",
    "github": "https://github.com/myhandle"
  }
}

That's your entire brand configuration. One file.

Step 3: Customize Your Languages (Optional)

Want to add Spanish? Here's how:

Create locales/es.json with the same structure as locales/en.json:

{
  "common": { "appName": "Mi App", ... },
  "navigation": {
    "home": "Inicio",
    "about": "Acerca de"
  }
}

Update src/shared/lib/config/app-main-meta-data.json:

{
  "languages": {
    "supported": ["en", "bn", "ar", "es"],
    "locales": {
      "es": {
        "code": "es",
        "name": "Spanish",
        "nativeName": "Español",
        "locale": "es_ES",
        "direction": "ltr"
      }
    }
  }
}

In src/shared/lib/i18n/get-translations.ts, import es.json and add es to the translations object. If you use strict translation keys, add the new locale to the TranslationKeys union in src/shared/lib/i18n/types.ts.

Done. Your app now speaks Spanish.

Step 4: Set Up Your Roles

The boilerplate comes with User and Admin roles. To add more:

Create a new parallel route folder:

mkdir -p src/app/(protected)/@moderator/dashboard

Add your pages inside that folder
Update src/app/(protected)/layout.tsx to handle the new role:

if (currentUser?.role === 'moderator') return moderator

That's genuinely all you need to do.

Step 5: Run It

npm run dev

Open http://localhost:3000 and see your fully-configured app running.

Available Scripts

Command	Description
`npm run dev`	Start development server
`npm run build`	Production build
`npm run start`	Start production server
`npm run lint`	Run ESLint
`npm run lint:fix`	Fix ESLint errors
`npm run test`	Unit tests (Vitest)
`npm run test:watch`	Unit tests in watch mode
`npm run test:coverage`	Tests with coverage
`npm run e2e`	Playwright E2E tests
`npm run e2e:ui`	Playwright with UI
`npm run e2e:webkit`	E2E in WebKit only
`npm run prettier`	Check formatting
`npm run prettier:fix`	Fix formatting

Step 6: Environment (First-Time Setup)

Copy .env.example to .env. Set NEXT_PUBLIC_APP_URL if you need to override the site URL (e.g. in production). For Google sign-in: set NEXTAUTH_URL, NEXTAUTH_SECRET, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, then NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=true. Optionally set AUTH_ADMIN_EMAILS=admin@yourdomain.com so those emails get the admin role.

Prerequisites

Node.js 18.17 or later
npm, yarn, pnpm, or bun

The Project Structure (Explained for Humans)

src/
  app/
    (protected)/         # Routes behind auth (@admin, @user)
    (public)/            # Public routes (Home, About)
    auth/                # Auth-related pages (Login)
    api/                 # API routes (Auth, Health)
    layout.tsx           # Global layout & providers
    page.tsx             # Landing page
    ...
  shared/
    ui/                  # shadcn/ui components
    layout/              # Header, Sidebar, ThemeToggle
    components/          # Feature components
    hooks/               # Reusable hooks
    lib/                 # i18n, auth config, site metadata
locales/                 # i18n JSON files (en, bn, ar, fr, es, zh)
e2e/                     # Playwright E2E tests
.github/workflows/       # CI/CD pipelines

What You Get Out of the Box

✅ Next.js 16 with App Router and Server Components

✅ TypeScript (strict mode)

✅ Tailwind CSS

✅ ESLint and Prettier (Next.js, TypeScript, a11y, format on save in .vscode)

✅ NextAuth.js with optional Google OAuth and admin-by-email

✅ i18n with type safety and RTL (en, bn, ar, fr, es, zh)

✅ RBAC with parallel routes (User / Admin)

✅ SEO from one JSON config (metadata, sitemap, robots, manifest)

✅ next-themes for dark mode (system + manual toggle)

✅ shadcn/ui (accessible, customizable)

✅ Vitest + React Testing Library for unit/component tests

✅ Playwright for E2E in e2e/

✅ GitHub Actions for lint, format, test, build and E2E

✅ Health check at GET /api/health

✅ Vercel-ready (one-click deploy from the repo)

Real Talk: When Should You Use This?

Perfect for:

SaaS products with multiple user types
International applications
Projects where you want to ship fast

Maybe not ideal for:

Projects with very specific auth requirements (you'll need to customize heavily)
Apps that don't need i18n or role management

Contributing & Support

Found a bug? Want to add a feature? The repo is fully open source:

🐛 Report issues

⭐ Star on GitHub

🤝 Submit a PR

Final Thoughts

I built this because I got tired of setting up the same infrastructure for every project. Now that it's open source, I hope it helps you ship your next big idea even faster.

What's your biggest pain point when starting a new Next.js project?
Drop a comment below; I'm always looking to improve this.

Happy building! 🚀

Important Links:

🔗 Live Demo | 📦 GitHub Repo | 🚀 Use this template | Deploy on Vercel

50 Hours Building a Next.js Boilerplate So You Can Ship in 30 Minutes!

Salman Shahriar — Tue, 24 Mar 2026 21:19:07 +0000

Next.js Boilerplate: The Ultimate SaaS Starter Kit

Looking for the best Next.js Boilerplate to launch your next project? You've found it. This production-ready starter kit is designed to help you go from idea to deployment in record time.

The Problem That Kept Me Up at Night
Why This Next.js Boilerplate is Different
Key Features of Nextjs-Elite-Boilerplate
How to Get Started (The Real Way)
The Project Structure (Explained for Humans)
What You Get Out of the Box
Contributing & Support
Final Thoughts

The Problem That Kept Me Up at Night

I've been there. Too many times. After building multiple SaaS projects, I realized I was copy-pasting the same setup code. So I built the ultimate Next.js starter kit.

Why This Next.js Boilerplate is Different

Best part? I've made this project completely open source for everyone. Whether you're a student learning the ropes or a seasoned dev looking for a solid starting point, this is for you.

Important Links:

🔗 Live Demo | 📦 GitHub Repo | 🚀 Use this template | Deploy on Vercel

Key Features of Nextjs-Elite-Boilerplate

🌍 Real Internationalization (i18n) for Global SaaS

Six languages out of the box: English, বাংলা, العربية, Français, Español, and 简体中文.
RTL support that actually works: Arabic layouts automatically flip to right-to-left.
Next.js 16 Ready: Fully optimized for the latest React features.

🔐 Role-Based Access Control (RBAC) That Scales

I used Next.js 16's parallel routes to make this painless:

src/app/
  (protected)/
    @admin/      # Admin-only views
      dashboard/
    @user/       # User views
      dashboard/
    layout.tsx   # Smart routing logic

The layout automatically shows the right dashboard based on the user's role. No messy conditionals scattered everywhere. Want to add a new role? Just create a new parallel route folder. That's it.

🎨 UI/UX with shadcn/ui

Components are copy-paste ready (no bloated dependencies).
Full TypeScript support & accessible by default.
Built-in Dark Mode with next-themes.

🔧 ESLint That Actually Helps (Not Annoys)

Catch real bugs (unused variables, missing dependencies, potential null references)
Enforce consistency (import order, naming conventions, formatting)
eslint-config-next - Official Next.js rules
TypeScript-specific linting

Prettier is wired up too. Run npm run lint and npm run prettier:fix for consistent, clean code.

📊 SEO Configuration That's Actually Usable

I created a single JSON configuration file that handles:

Open Graph tags
Structured data (JSON-LD)
Multi-language meta tags
Canonical URLs
Dynamic sitemap generation

Just edit one file:

{
  "appName": "Your App",
  "title": "Your Title",
  "description": "Your Description",
  "domain": "https://yoursite.com",
  "keywords": ["your", "keywords"],
  "social": {
    "twitter": "@yourhandle"
  }
}

🧪 Testing & CI

Unit and component tests: Vitest + React Testing Library. Run npm run test or npm run test:watch; npm run test:coverage for coverage.
E2E: Playwright in e2e/. Run npm run e2e (dev server starts automatically); npm run e2e:ui for the UI. Use npm run e2e:webkit for WebKit-only (e.g. to save disk).
CI: GitHub Actions – .github/workflows/check.yml runs lint, Prettier, tests, and build on push/PR; .github/workflows/playwright.yml runs E2E.

🔑 Authentication (NextAuth.js + Google OAuth)

Google OAuth – enable by setting GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, and NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=true in .env
Custom login page at /auth/login with optional "Sign in with Google"
JWT session with role and user id; redirect to /dashboard after sign-in

Copy .env.example to .env, add your secrets, and you're done.

🏥 Health Check

GET /api/health returns { status: "ok" } for load balancers and Kubernetes probes.

How to Get Started (The Real Way)

Step 1: Clone and Install

# Grab the code
git clone https://github.com/salmanshahriar/Nextjs-Elite-Boilerplate.git
cd Nextjs-Elite-Boilerplate

# Install dependencies (use whatever you prefer)
npm install
# or bun install / yarn install / pnpm install

Step 2: Configure Your Project

This is where most boilerplates leave you hanging. Not this one.

Edit src/shared/lib/config/app-main-meta-data.json:

{
  "appName": "My Awesome SaaS",
  "title": "Revolutionary Product That Does X",
  "description": "We help Y achieve Z",
  "domain": "https://myawesomesaas.com",

  "organization": {
    "name": "My Company",
    "email": "hello@mycompany.com"
  },

  "social": {
    "twitter": "@myhandle",
    "github": "https://github.com/myhandle"
  }
}

That's your entire brand configuration. One file.

Step 3: Customize Your Languages (Optional)

Want to add Spanish? Here's how:

Create locales/es.json with the same structure as locales/en.json:

{
  "common": { "appName": "Mi App", ... },
  "navigation": {
    "home": "Inicio",
    "about": "Acerca de"
  }
}

Update src/shared/lib/config/app-main-meta-data.json:

{
  "languages": {
    "supported": ["en", "bn", "ar", "es"],
    "locales": {
      "es": {
        "code": "es",
        "name": "Spanish",
        "nativeName": "Español",
        "locale": "es_ES",
        "direction": "ltr"
      }
    }
  }
}

In src/shared/lib/i18n/get-translations.ts, import es.json and add es to the translations object. If you use strict translation keys, add the new locale to the TranslationKeys union in src/shared/lib/i18n/types.ts.

Done. Your app now speaks Spanish.

Step 4: Set Up Your Roles

The boilerplate comes with User and Admin roles. To add more:

Create a new parallel route folder:

mkdir -p src/app/(protected)/@moderator/dashboard

Add your pages inside that folder
Update src/app/(protected)/layout.tsx to handle the new role:

if (currentUser?.role === 'moderator') return moderator

That's genuinely all you need to do.

Step 5: Run It

npm run dev

Open http://localhost:3000 and see your fully-configured app running.

Available Scripts

Command	Description
`npm run dev`	Start development server
`npm run build`	Production build
`npm run start`	Start production server
`npm run lint`	Run ESLint
`npm run lint:fix`	Fix ESLint errors
`npm run test`	Unit tests (Vitest)
`npm run test:watch`	Unit tests in watch mode
`npm run test:coverage`	Tests with coverage
`npm run e2e`	Playwright E2E tests
`npm run e2e:ui`	Playwright with UI
`npm run e2e:webkit`	E2E in WebKit only
`npm run prettier`	Check formatting
`npm run prettier:fix`	Fix formatting

Step 6: Environment (First-Time Setup)

Prerequisites

Node.js 18.17 or later
npm, yarn, pnpm, or bun

The Project Structure (Explained for Humans)

src/
  app/
    (protected)/         # Routes behind auth (@admin, @user)
    (public)/            # Public routes (Home, About)
    auth/                # Auth-related pages (Login)
    api/                 # API routes (Auth, Health)
    layout.tsx           # Global layout & providers
    page.tsx             # Landing page
    ...
  shared/
    ui/                  # shadcn/ui components
    layout/              # Header, Sidebar, ThemeToggle
    components/          # Feature components
    hooks/               # Reusable hooks
    lib/                 # i18n, auth config, site metadata
locales/                 # i18n JSON files (en, bn, ar, fr, es, zh)
e2e/                     # Playwright E2E tests
.github/workflows/       # CI/CD pipelines

What You Get Out of the Box

Real Talk: When Should You Use This?

Perfect for:

SaaS products with multiple user types
International applications
Projects where you want to ship fast

Maybe not ideal for:

Projects with very specific auth requirements (you'll need to customize heavily)
Apps that don't need i18n or role management

Contributing & Support

Found a bug? Want to add a feature? The repo is fully open source:

🐛 Report issues

⭐ Star on GitHub

🤝 Submit a PR

Final Thoughts

I built this because I got tired of setting up the same infrastructure for every project. Now that it's open source, I hope it helps you ship your next big idea even faster.

What's your biggest pain point when starting a new Next.js project?
Drop a comment below; I'm always looking to improve this.

Happy building! 🚀

Important Links:

🔗 Live Demo | 📦 GitHub Repo | 🚀 Use this template | Deploy on Vercel

50 Hours Building a Next.js Boilerplate So You Can Ship in 30 Minutes!

Salman Shahriar — Wed, 19 Nov 2025 19:11:28 +0000

Next.js Boilerplate: The Ultimate SaaS Starter Kit

Looking for the best Next.js Boilerplate to launch your next project? You've found it. This production-ready starter kit is designed to help you go from idea to deployment in record time.

The Problem That Kept Me Up at Night
Why This Next.js Boilerplate is Different
Key Features of Nextjs-Elite-Boilerplate
How to Get Started (The Real Way)
The Project Structure (Explained for Humans)
What You Get Out of the Box
Contributing & Support
Final Thoughts

The Problem That Kept Me Up at Night

I've been there. Too many times. After building multiple SaaS projects, I realized I was copy-pasting the same setup code. So I built the ultimate Next.js starter kit.

Why This Next.js Boilerplate is Different

Best part? I've made this project completely open source for everyone. Whether you're a student learning the ropes or a seasoned dev looking for a solid starting point, this is for you.

Important Links:

🔗 Live Demo | 📦 GitHub Repo | 🚀 Use this template | Deploy on Vercel

Key Features of Nextjs-Elite-Boilerplate

🌍 Real Internationalization (i18n) for Global SaaS

Six languages out of the box: English, বাংলা, العربية, Français, Español, and 简体中文.
RTL support that actually works: Arabic layouts automatically flip to right-to-left.
Next.js 16 Ready: Fully optimized for the latest React features.

🔐 Role-Based Access Control (RBAC) That Scales

I used Next.js 16's parallel routes to make this painless:

src/app/
  (protected)/
    @admin/      # Admin-only views
      dashboard/
    @user/       # User views
      dashboard/
    layout.tsx   # Smart routing logic

The layout automatically shows the right dashboard based on the user's role. No messy conditionals scattered everywhere. Want to add a new role? Just create a new parallel route folder. That's it.

🎨 UI/UX with shadcn/ui

Components are copy-paste ready (no bloated dependencies).
Full TypeScript support & accessible by default.
Built-in Dark Mode with next-themes.

🔧 ESLint That Actually Helps (Not Annoys)

Catch real bugs (unused variables, missing dependencies, potential null references)
Enforce consistency (import order, naming conventions, formatting)
eslint-config-next - Official Next.js rules
TypeScript-specific linting

Prettier is wired up too. Run npm run lint and npm run prettier:fix for consistent, clean code.

📊 SEO Configuration That's Actually Usable

I created a single JSON configuration file that handles:

Open Graph tags
Structured data (JSON-LD)
Multi-language meta tags
Canonical URLs
Dynamic sitemap generation

Just edit one file:

{
  "appName": "Your App",
  "title": "Your Title",
  "description": "Your Description",
  "domain": "https://yoursite.com",
  "keywords": ["your", "keywords"],
  "social": {
    "twitter": "@yourhandle"
  }
}

🧪 Testing & CI

Unit and component tests: Vitest + React Testing Library. Run npm run test or npm run test:watch; npm run test:coverage for coverage.
E2E: Playwright in e2e/. Run npm run e2e (dev server starts automatically); npm run e2e:ui for the UI. Use npm run e2e:webkit for WebKit-only (e.g. to save disk).
CI: GitHub Actions – .github/workflows/check.yml runs lint, Prettier, tests, and build on push/PR; .github/workflows/playwright.yml runs E2E.

🔑 Authentication (NextAuth.js + Google OAuth)

Google OAuth – enable by setting GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, and NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=true in .env
Custom login page at /auth/login with optional "Sign in with Google"
JWT session with role and user id; redirect to /dashboard after sign-in

Copy .env.example to .env, add your secrets, and you're done.

🏥 Health Check

GET /api/health returns { status: "ok" } for load balancers and Kubernetes probes.

How to Get Started (The Real Way)

Step 1: Clone and Install

# Grab the code
git clone https://github.com/salmanshahriar/Nextjs-Elite-Boilerplate.git
cd Nextjs-Elite-Boilerplate

# Install dependencies (use whatever you prefer)
npm install
# or bun install / yarn install / pnpm install

Step 2: Configure Your Project

This is where most boilerplates leave you hanging. Not this one.

Edit src/shared/lib/config/app-main-meta-data.json:

{
  "appName": "My Awesome SaaS",
  "title": "Revolutionary Product That Does X",
  "description": "We help Y achieve Z",
  "domain": "https://myawesomesaas.com",

  "organization": {
    "name": "My Company",
    "email": "hello@mycompany.com"
  },

  "social": {
    "twitter": "@myhandle",
    "github": "https://github.com/myhandle"
  }
}

That's your entire brand configuration. One file.

Step 3: Customize Your Languages (Optional)

Want to add Spanish? Here's how:

Create locales/es.json with the same structure as locales/en.json:

{
  "common": { "appName": "Mi App", ... },
  "navigation": {
    "home": "Inicio",
    "about": "Acerca de"
  }
}

Update src/shared/lib/config/app-main-meta-data.json:

{
  "languages": {
    "supported": ["en", "bn", "ar", "es"],
    "locales": {
      "es": {
        "code": "es",
        "name": "Spanish",
        "nativeName": "Español",
        "locale": "es_ES",
        "direction": "ltr"
      }
    }
  }
}

In src/shared/lib/i18n/get-translations.ts, import es.json and add es to the translations object. If you use strict translation keys, add the new locale to the TranslationKeys union in src/shared/lib/i18n/types.ts.

Done. Your app now speaks Spanish.

Step 4: Set Up Your Roles

The boilerplate comes with User and Admin roles. To add more:

Create a new parallel route folder:

mkdir -p src/app/(protected)/@moderator/dashboard

Add your pages inside that folder
Update src/app/(protected)/layout.tsx to handle the new role:

if (currentUser?.role === 'moderator') return moderator

That's genuinely all you need to do.

Step 5: Run It

npm run dev

Open http://localhost:3000 and see your fully-configured app running.

Available Scripts

Command	Description
`npm run dev`	Start development server
`npm run build`	Production build
`npm run start`	Start production server
`npm run lint`	Run ESLint
`npm run lint:fix`	Fix ESLint errors
`npm run test`	Unit tests (Vitest)
`npm run test:watch`	Unit tests in watch mode
`npm run test:coverage`	Tests with coverage
`npm run e2e`	Playwright E2E tests
`npm run e2e:ui`	Playwright with UI
`npm run e2e:webkit`	E2E in WebKit only
`npm run prettier`	Check formatting
`npm run prettier:fix`	Fix formatting

Step 6: Environment (First-Time Setup)

Prerequisites

Node.js 18.17 or later
npm, yarn, pnpm, or bun

The Project Structure (Explained for Humans)

src/
  app/
    (protected)/         # Routes behind auth (@admin, @user)
    (public)/            # Public routes (Home, About)
    auth/                # Auth-related pages (Login)
    api/                 # API routes (Auth, Health)
    layout.tsx           # Global layout & providers
    page.tsx             # Landing page
    ...
  shared/
    ui/                  # shadcn/ui components
    layout/              # Header, Sidebar, ThemeToggle
    components/          # Feature components
    hooks/               # Reusable hooks
    lib/                 # i18n, auth config, site metadata
locales/                 # i18n JSON files (en, bn, ar, fr, es, zh)
e2e/                     # Playwright E2E tests
.github/workflows/       # CI/CD pipelines

What You Get Out of the Box

Real Talk: When Should You Use This?

Perfect for:

SaaS products with multiple user types
International applications
Projects where you want to ship fast

Maybe not ideal for:

Projects with very specific auth requirements (you'll need to customize heavily)
Apps that don't need i18n or role management

Contributing & Support

Found a bug? Want to add a feature? The repo is fully open source:

🐛 Report issues

⭐ Star on GitHub

🤝 Submit a PR

Final Thoughts

I built this because I got tired of setting up the same infrastructure for every project. Now that it's open source, I hope it helps you ship your next big idea even faster.

What's your biggest pain point when starting a new Next.js project?
Drop a comment below; I'm always looking to improve this.

Happy building! 🚀

Important Links:

🔗 Live Demo | 📦 GitHub Repo | 🚀 Use this template | Deploy on Vercel

Forem: Salman Shahriar

50 Hours Building a Next.js Boilerplate So You Can Ship in 30 Minutes!

Next.js Boilerplate: The Ultimate SaaS Starter Kit

Table of Contents

The Problem That Kept Me Up at Night

Why This Next.js Boilerplate is Different

Important Links:

Key Features of Nextjs-Elite-Boilerplate

🌍 Real Internationalization (i18n) for Global SaaS

🔐 Role-Based Access Control (RBAC) That Scales

🎨 UI/UX with shadcn/ui

🔧 ESLint That Actually Helps (Not Annoys)

📊 SEO Configuration That's Actually Usable

🧪 Testing & CI

🔑 Authentication (NextAuth.js + Google OAuth)

🏥 Health Check

How to Get Started (The Real Way)

Step 1: Clone and Install

Step 2: Configure Your Project

Step 3: Customize Your Languages (Optional)

Step 4: Set Up Your Roles

Step 5: Run It

Available Scripts

Step 6: Environment (First-Time Setup)

Prerequisites

The Project Structure (Explained for Humans)

What You Get Out of the Box

Real Talk: When Should You Use This?

Contributing & Support

Final Thoughts

Important Links:

50 Hours Building a Next.js Boilerplate So You Can Ship in 30 Minutes!

Next.js Boilerplate: The Ultimate SaaS Starter Kit

Table of Contents

The Problem That Kept Me Up at Night

Why This Next.js Boilerplate is Different

Important Links:

Key Features of Nextjs-Elite-Boilerplate

🌍 Real Internationalization (i18n) for Global SaaS

🔐 Role-Based Access Control (RBAC) That Scales

🎨 UI/UX with shadcn/ui

🔧 ESLint That Actually Helps (Not Annoys)

📊 SEO Configuration That's Actually Usable

🧪 Testing & CI

🔑 Authentication (NextAuth.js + Google OAuth)

🏥 Health Check

How to Get Started (The Real Way)

Step 1: Clone and Install

Step 2: Configure Your Project

Step 3: Customize Your Languages (Optional)

Step 4: Set Up Your Roles

Step 5: Run It

Available Scripts

Step 6: Environment (First-Time Setup)

Prerequisites

The Project Structure (Explained for Humans)

What You Get Out of the Box

Real Talk: When Should You Use This?

Contributing & Support

Final Thoughts

Important Links:

50 Hours Building a Next.js Boilerplate So You Can Ship in 30 Minutes!

Next.js Boilerplate: The Ultimate SaaS Starter Kit

Table of Contents

The Problem That Kept Me Up at Night

Why This Next.js Boilerplate is Different

Important Links:

Key Features of Nextjs-Elite-Boilerplate

🌍 Real Internationalization (i18n) for Global SaaS

🔐 Role-Based Access Control (RBAC) That Scales

🎨 UI/UX with shadcn/ui

🔧 ESLint That Actually Helps (Not Annoys)

📊 SEO Configuration That's Actually Usable

🧪 Testing & CI

🔑 Authentication (NextAuth.js + Google OAuth)

🏥 Health Check

How to Get Started (The Real Way)

Step 1: Clone and Install

Step 2: Configure Your Project

Step 3: Customize Your Languages (Optional)