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.

Table of Contents

• 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

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

Enter fullscreen mode

Exit fullscreen mode

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"  } }

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

Enter fullscreen mode

Exit fullscreen mode

🧪 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

# 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`

Enter fullscreen mode

Exit fullscreen mode

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",

{  "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": "[email protected]" },

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

Enter fullscreen mode

Exit fullscreen mode

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"  } }

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

Enter fullscreen mode

Exit fullscreen mode

• 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"  }  }  } }

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

Enter fullscreen mode

Exit fullscreen mode

• 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

Enter fullscreen mode

Exit fullscreen mode

• Add your pages inside that folder

• Update src/app/(protected)/layout.tsx to handle the new role:

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

Enter fullscreen mode

Exit fullscreen mode

That's genuinely all you need to do.

Step 5: Run It

npm run dev

Enter fullscreen mode

Exit fullscreen mode

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=[email protected] 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

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

Enter fullscreen mode

Exit fullscreen mode

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:

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