DEV Community

Cover image for I built an opensource production-ready NEXT.JS STARTER KIT!
Salman Shahriar
Salman Shahriar

Posted on Edited on

I built an opensource production-ready NEXT.JS STARTER KIT!

Every time I started a new Next.js project, I lost the first week to setup.

Authentication. Internationalization. Role-based access. SEO meta tags. Environment validation. Error monitoring. Linting. Testing. CI pipelines.

By the time I had a working foundation, the excitement was gone, buried under configuration files and boilerplate glue code.

I kept rebuilding the same foundation across SaaS projects, so I stopped and built it once: Next Elite.

It is a frontend-first Next.js 16.4 + React 19.3 boilerplate designed to consume APIs (REST/GraphQL/BFF) instead of owning a database, so you can drop it on top of any backend you already have. It is feature-based, optimized for speed, SEO, and developer productivity, and includes 50+ custom and reusable UI components built on shadcn/ui, plus pre-built split-pane auth layouts and role-based dashboard layouts. It is 100% open source under the MIT license.

Live Demo · GitHub Repo · Use This Template · Deploy on Vercel

Next Elite home page - production-ready Next.js starter kit

TL;DR: git clone, npm install, cp .env.example .env, npm run dev. Open http://localhost:6767. You get auth, RBAC dashboards, 6-language i18n, 50+ UI components, SEO, forms, testing, CI, and AI-agent-ready coding rules. Try the demo.


Table of Contents

  1. Why Another Next.js Boilerplate? (The Concept)
  2. What's Inside: The Next Elite Stack & Features
  3. Lighthouse Score: 100% Performance & SEO
  4. Quick Start: Launch Your Project in 60 Seconds
  5. Deep Dive: How Next Elite Works Under the Hood
  6. Clean Feature-Based Directory Structure
  7. Configuration & Environment Variables
  8. Development, Testing & CI/CD
  9. Architectural Caveats: What Next Elite is NOT
  10. Production Checklist: Going Live
  11. Contributing & Open Source

1. Why Another Next.js Boilerplate? (The Concept)

Most Next.js starters on GitHub are either too bare (a dark mode toggle and a "TODO: add auth" comment) or too bloated (Prisma, PostgreSQL, Docker Compose, Stripe webhooks, and an ORM tightly coupled to their own DB schema).

If you already have a backend (written in Go, Python, Laravel, or Node.js) or want a backend-for-frontend (BFF) architecture, tearing the built-in database layer out of a boilerplate is painful.

Next Elite sits in the sweet spot. It handles the complex frontend foundation, UI components, role management, and locale settings while leaving the database and API layer up to you. It's built to consume APIs directly, so you can drop it on top of any backend you already have.

When to use Next Elite

Next Elite is best for:

  • SaaS apps with multiple user roles.
  • Admin panels, ERPs, and dashboards.
  • Multi-lingual/Internationalized products (LTR + RTL).
  • Frontends consuming an existing backend or BFF.
  • Projects requiring a clean, feature-based modular structure.

It is probably overkill for:

  • Single-page landing sites.
  • Apps that need a tightly-coupled DB layer (API-only design).

2. What's Inside: The Next Elite Stack & Features

Here is the tech stack built into Next Elite, broken down by category:

Frameworks & Core

  • Next.js 16.4 (App Router) - Fast, modern React framework with Turbopack, standalone output for Docker/self-hosting, and full support for React 19.3 features (Server/Client components, Server Actions).
  • TypeScript 7 - End-to-end type safety for rock-solid refactoring and developer experience.
  • Node.js 22.12+ - Built on the Node.js 22 LTS runtime.
  • Feature-Based Architecture - Structured around self-contained vertical slices/feature folders under src/features/ for maximum modularity and clean separation of concerns.

Authentication & Access Control

  • BetterAuth - Out-of-the-box email/password and Google OAuth authentication using /api/auth/* route handlers. Configure admin emails via the comma-separated AUTH_ADMIN_EMAILS server variable.
  • Auth UI & Layout - Split-pane login, register, and password reset pages with a custom WebGL particle background animation, and a topbar with theme toggle and language switcher. Login and register are wired to BetterAuth; the password reset form is UI-only, ready to connect to your backend's reset flow.

Next Elite split-pane auth layout

  • Role-Based Access Control (RBAC) - Flexible RBAC (user and admin roles) with server-side guards (requireUser, requirePermission) and parallel route slots (@admin, @user) for role-agnostic routing.
  • Dashboard & Navigation - Modern sidebar navigation with fixed bottom Settings (/settings) and Logout (with a confirm dialog) actions, collapsible state remembered in a cookie, mobile sheet, and topbar breadcrumbs generated from the URL. Users without permission land on a dedicated /unauthorized page.

Next Elite role-based admin dashboard layout

Internationalization (i18n)

  • next-intl - Type-safe, cookie-based localizations (no URL prefix) with support for English, বাংলা, العربية (RTL), Français, Español, and 简体中文. Translation keys are type-checked (t("key") works; typos fail at compile time), and the language switcher updates the locale through a Server Action.

UI & Styling

  • Tailwind CSS 4 - Utility-first styling with @tailwindcss/postcss and tw-animate-css.
  • Design Tokens - Light and dark color, radius, and spacing tokens in src/app/styles/tokens.css, mapped to Tailwind utilities, so there are no hard-coded colors anywhere.
  • shadcn/ui - 50+ highly customizable UI components built with Tailwind CSS, Radix UI, and CVA variants: cards, stat cards, charts, a sortable and paginated data table, forms, selects, comboboxes, a calendar/date picker, dialogs, sheets, and more. Includes a live /ui-components showcase page.

Next Elite 50+ custom and reusable UI components

  • Theme Support - Light, dark, and system themes, with a circular "wave" transition (View Transitions API) when you toggle, and no flash on load because the theme is read on the server.
  • Feedback Built In - Toast notifications with Sonner, a top page-loading bar, skeleton loading states, and loading-aware buttons.

API & Data Fetching

  • TanStack Query (React Query) - Pre-configured QueryClientProvider in src/app/providers.tsx with sensible defaults (staleTime, gcTime, retry). Ready to wire useQuery / useMutation hooks to your REST, GraphQL, or BFF endpoints.
  • Next Elite Server (Coming Soon) - A companion backend template built with NestJS, BetterAuth, Drizzle ORM, PostgreSQL, and multi-tenancy.

Observability & Infrastructure

  • Sentry Integration - Error tracking and performance instrumentation for client and server. The browser SDK loads lazily and only when NEXT_PUBLIC_SENTRY_DSN is set, so it never blocks the first page load.
  • Vercel Analytics - Page analytics via @vercel/analytics, rendered only when deployed on Vercel.
  • Health Probes - Direct GET /api/health endpoint for load balancers.
  • Security Headers - A strict Content Security Policy, HSTS, X-Frame-Options: DENY, nosniff, Referrer-Policy, and Permissions-Policy are set in next.config.mjs, and E2E tests check them.

Quality Gates & Tooling

  • Validated Config - Environment variables are validated on the server with T3 Env (src/libs/env.ts), and site.config.json is checked against its schema in unit tests, so neither ships zod to the browser.
  • Testing Suite - Unit/component testing with Vitest and React Testing Library (separate node and jsdom projects), and E2E testing with Playwright.
  • Pinned Dependencies - Exact versions only (.npmrc sets save-exact=true), kept up to date by Renovate and Dependabot.
  • Hygiene & Linting - Oxlint and Oxfmt for fast linting and formatting, plus Knip for dead code/dependency hygiene.
  • Git Hook Automation - Lefthook pre-commit hooks (oxlint + oxfmt), Commitlint for conventional commits, and a pre-push hook that runs npm run check.

AI Agent Ready

  • AGENTS.md + project-standards skill - The repo ships coding rules for AI agents (Claude Code, Cursor, Codex, and others). They require agents to reuse the existing components first, add variants instead of duplicating components, use design tokens only, render public pages on the server, and ask before making structural changes. That way, AI-written code still looks like the rest of the codebase.
  • /llms.txt - A machine-readable project summary for AI crawlers and assistants.

3. Lighthouse Score: 100% Performance & SEO

One of the key goals of Next Elite was flawless performance and SEO defaults. Out of the box, the production build scores a perfect 100 for Performance, Accessibility, Best Practices, and SEO on Lighthouse, and passes all 3/3 Agentic Browsing checks:

Next Elite Lighthouse Report - 100 Performance, Accessibility, Best Practices, and SEO

This comes from rendering Server Components by default, serving SEO meta tags from a single configuration file, and keeping client-side JavaScript lean:

  • Heavy libraries like ApexCharts load only when a chart scrolls into view.
  • Sentry loads lazily and only when it is configured.
  • Validation libraries stay on the server.
  • Only the font subsets the app needs are loaded.

4. Quick Start: Launch Your Project in 60 Seconds

One-click Deploy

Deploy this template to Vercel with one click:

Deploy with Vercel

Set the environment variables from .env.example in your Vercel project (Production + Preview).

Prerequisites

  • Node.js 22.12 or later
  • npm

Local Setup

  1. Clone the repository and navigate into it:
   git clone https://github.com/salmanshahriar/Next-Elite.git
   cd Next-Elite
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies:
   npm install
Enter fullscreen mode Exit fullscreen mode
  1. Set up your environment variables:
   cp .env.example .env
Enter fullscreen mode Exit fullscreen mode
  1. Start the development server:
   npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:6767 to view your local instance.

Demo Credentials

When NEXT_PUBLIC_DEMO_MODE=true is enabled, the login screen includes a quick-fill panel with these seed credentials:

Role Email Password
User user@test.com 12345678
Admin admin@test.com 12345678

Removing the Demo Code

All demo code (landing page, /ui-components showcase, promo logos, demo accounts) lives in src/_demo(DELETE)/. When you're ready to build your own app, run:

npm run demo:remove
npm run check
Enter fullscreen mode Exit fullscreen mode

The script deletes the demo folder and rewrites every file that references it, so you're left with a clean, working app. CI runs this same removal on every push to make sure it keeps working.

Docker Setup

The production image uses a multi-stage Google Distroless base image (gcr.io/distroless/nodejs22-debian12) for maximum security, zero unnecessary OS packages, and a minimal image size.

Run the application locally via Docker:

cp .env.example .env
docker build -t next-elite .
docker run --rm --env-file .env -p 6767:6767 next-elite
Enter fullscreen mode Exit fullscreen mode

Or using Docker Compose:

docker compose up --build
Enter fullscreen mode Exit fullscreen mode

The Dockerfile uses Next.js standalone output with a built-in health check against /api/health.

Note: NEXT_PUBLIC_* variables are inlined into the JavaScript at build time, so pass them as build args (--build-arg NEXT_PUBLIC_APP_URL=..., NEXT_PUBLIC_GOOGLE_AUTH_ENABLED, NEXT_PUBLIC_DEMO_MODE). Server-only secrets like BETTER_AUTH_SECRET are read at runtime from --env-file.

Multi-Arch Deploy (ARM64 + AMD64)

The Dockerfile produces images that run on both linux/amd64 and linux/arm64. Build a multi-arch image with Buildx:

docker buildx create --name multiarch --use   # one-time setup
docker buildx build --platform linux/amd64,linux/arm64 -t next-elite .
Enter fullscreen mode Exit fullscreen mode

This is ideal for self-hosting on ARM servers (Oracle Cloud, Raspberry Pi, AWS Graviton, etc.).

Dokploy Deployment

This template is ready for Dokploy - the open-source PaaS.

  1. Create a new Application in Dokploy and point it to your fork of this repo.
  2. Set the build type to Dockerfile (auto-detected).
  3. Configure environment variables via the Dokploy UI (see .env.example).
  4. Deploy - Dokploy automatically builds and runs the container with health checks.

The included HEALTHCHECK instruction pings /api/health so Dokploy can monitor and restart the container if it becomes unresponsive.

View Available Scripts & CLI Commands

Command Description
npm run dev Start the dev server (port 6767)
npm run build Production build
npm run start Start the production server (port 6767)
npm run start:standalone Run standalone server (Playwright CI)
npm run typecheck tsc --noEmit
npm run lint Oxlint + Oxfmt check
npm run lint:fix Auto-fix with Oxlint + Oxfmt
npm run format Format with Oxfmt
npm run format:check Check formatting with Oxfmt
npm run knip Detect unused files / exports / deps
npm run check CI gate: typecheck + lint + knip + tests
npm run test Vitest run
npm run test:watch Vitest watch mode
npm run demo:remove Delete all demo code
npm run playwright:install Download Playwright browsers
npm run playwright:install:deps Install OS libs for browsers (Linux)
npm run e2e Playwright E2E
npm run e2e:ui Playwright UI mode
npm run e2e:webkit Playwright WebKit only

5. Deep Dive: How Next Elite Works Under the Hood

The big picture: a page is rendered on the server, auth/role is checked there, and any live data is fetched on the client.

flowchart TB
    User([User]) --> Page

    subgraph Server["Server (runs first)"]
        Page[Page / Layout]
        Guard["requireUser() / requirePermission()"]
        Page --> Guard
        Guard -->|reads session + role| Auth[BetterAuth]
    end

    subgraph Client["Client (runs in browser)"]
        Hook["useQuery (TanStack Query)"]
        Hook -->|fetch| Api["Your backend API"]
    end

    Page -->|sends HTML| User
    Page -.->|interactive parts| Hook

How a request flows:

  1. User opens a page - the Server Component renders first.
  2. Auth + role check - requireUser() / requirePermission() read the BetterAuth session and redirect to /login or /unauthorized if needed.
  3. HTML is sent to the browser; translations come from messages/ via next-intl.
  4. Live data (lists, forms, etc.) is fetched on the client with TanStack Query → your API (REST/GraphQL/BFF).

Type-Safe RBAC & BetterAuth

Permissions are checked on the server, not with scattered if (role === 'admin') checks.

View Auth & RBAC Usage

// Server Component example
import { requirePermission } from '@/features/auth/rbac/require';
import { getTranslations } from 'next-intl/server';

const AdminDashboardPage = async () => {
  const [, t] = await Promise.all([
    requirePermission('dashboard.view:admin'),
    getTranslations('dashboard.admin'),
  ]);
  return <h1>{t('title')}</h1>;
};

export default AdminDashboardPage;
Enter fullscreen mode Exit fullscreen mode

Next Elite uses Next.js Parallel Routes to keep layouts role-agnostic. The routing structure mounts specific slots based on the user's role, and both roles share the same URLs (/dashboard, /analytics, /profile, /settings):

src/app/(protected)/
  ├── @admin/               # Admin slots (dashboard, analytics, profile, settings)
  ├── @user/                # User slots (dashboard, analytics, profile, settings)
  └── layout.tsx            # Picks slot based on permissions
Enter fullscreen mode Exit fullscreen mode

Adding a Role

  1. Append the role to the UserRole union in src/features/auth/rbac/permissions.ts.
  2. Map permissions for the role in ROLE_PERMISSIONS in the same file.
  3. Optional: add a parallel route slot - src/app/(protected)/@/... - and update (protected)/layout.tsx to render it based on permissions.

Zero-Prefix cookie-based i18n

Unlike standard i18n setups that force prefixes like /en/ or /es/ into the URL (which clutters routes and duplicates routing config), Next Elite stores the locale in a NEXT_LOCALE cookie, so URLs have no prefix.

Adding a Language

  1. Add the locale code to languages.supported in site.config.json and add an entry under languages.locales.
  2. Create messages/.json mirroring messages/en.json.
  3. The next-intl runtime picks it up automatically; types update from src/global.d.ts.

Site & SEO Configuration

src/features/site/site.config.json is the single source of truth for SEO metadata, dynamic sitemaps, localized routes, and the PWA manifest:

{
  "appName": "Next Elite",
  "domain": "https://yourdomain.com",
  "tagline": "Frontend-first, API-driven, batteries included.",
  "title": "Next Elite - Production-Ready SaaS Boilerplate",
  "description": "Frontend-first Next.js 16.4 + React 19 boilerplate with i18n, RBAC and BetterAuth."
}
Enter fullscreen mode Exit fullscreen mode

The file is validated against a Zod schema in the unit tests, so a typo fails npm run check instead of breaking production.

View Forms Usage (React Hook Form + Zod)

'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { loginSchema, type LoginInput } from '@/features/auth/schemas/login';

const form = useForm({
  resolver: zodResolver(loginSchema),
  defaultValues: { email: '', password: '' },
});
Enter fullscreen mode Exit fullscreen mode

6. Clean Feature-Based Directory Structure

Next Elite uses a Feature-Based (Vertical Slice) Architecture under src/features/. Each folder contains its own hooks, schemas, server helpers, and config. Shared UI and layout pieces live under src/components/, and cross-cutting infra lives under src/libs/.

View Directory Structure

.
├── .github/
│   ├── workflows/            CI: check.yml (incl. demo removal) + playwright.yml
│   ├── dependabot.yml        Dependency updates
│   └── renovate.json         Dependency updates
├── .claude/skills/           project-standards skill for AI coding agents
├── config/                   Vitest, Playwright, and Knip configs
├── e2e/                      Playwright specs
├── messages/                 next-intl translations (en, bn, ar, fr, es, zh)
├── public/                   Static assets + llms.txt
├── scripts/                  remove-demo.mjs (npm run demo:remove)
├── .vscode/                  Oxc extension + format-on-save settings
├── components.json           shadcn/ui CLI config
├── .env.example              Environment variable template
├── .npmrc                    save-exact=true (pinned dependencies)
├── .oxlintrc.json            Oxlint rules (Next.js, TypeScript, React, Unicorn)
├── .oxfmtrc.json             Oxfmt formatter config (Tailwind class sorting)
├── Dockerfile                Multi-stage Distroless build + HEALTHCHECK
├── docker-compose.yml
├── next.config.mjs           Security headers, Sentry, next-intl, standalone output
├── postcss.config.mjs        Tailwind CSS v4
├── package.json              scripts + Commitlint config
├── package-lock.json
├── tsconfig.json
├── lefthook.yml              Git hooks (pre-commit, commit-msg, pre-push)
├── AGENTS.md                 Rules for AI coding agents
├── src/
│   ├── _demo(DELETE)/        Landing page, showcase, demo accounts (delete for your app)
│   ├── app/                  App Router
│   │   ├── (auth)/           Login, register, &amp; reset-password pages
│   │   ├── (public)/         Public pages
│   │   ├── (protected)/      Authenticated area + RBAC
│   │   │   ├── @admin/       Admin slots (dashboard, analytics, profile, settings)
│   │   │   ├── @user/        User slots (dashboard, analytics, profile, settings)
│   │   │   ├── unauthorized/ Shown when a role lacks permission
│   │   │   └── layout.tsx    Picks slot based on permissions
│   │   ├── api/              Route handlers (BetterAuth, health)
│   │   ├── styles/           tokens.css, base.css, components.css (theme transition)
│   │   ├── error.tsx         Error boundary (reports to Sentry)
│   │   ├── global-error.tsx  Root error boundary
│   │   ├── not-found.tsx     404 page
│   │   ├── fonts.ts          Inter typography configuration
│   │   ├── layout.tsx        Root layout, SEO, fonts, providers
│   │   ├── providers.tsx     Theme + Auth + TanStack Query
│   │   ├── manifest.ts       Web app manifest
│   │   ├── robots.ts         robots.txt
│   │   └── sitemap.ts        Dynamic sitemap
│   ├── components/
│   │   ├── auth/             Auth forms &amp; particle animation canvas
│   │   ├── icons/            Centralized SVG icon components &amp; barrel export
│   │   ├── layout/           App shell, navigation sidebars, topbar &amp; branding
│   │   ├── shared/           Page header, theme &amp; language controls, user dropdown
│   │   └── ui/               shadcn/ui primitives &amp; custom components
│   ├── features/             Feature modules (vertical slices)
│   │   ├── auth/             BetterAuth + RBAC (hooks, lib, rbac, schemas, server)
│   │   ├── i18n/             next-intl config (routing, request, actions)
│   │   └── site/             site config, schema, base URL + locale utilities
│   ├── hooks/                Shared React hooks
│   ├── libs/                 Cross-cutting infra (env, query-client, utils)
│   ├── tests/                Unit/component tests (components, features, libs) + renderWithProviders
│   ├── instrumentation.ts    Server Sentry init
│   ├── instrumentation-client.ts  Client Sentry init (lazy)
│   └── global.d.ts           next-intl type augmentation
└── ...
Enter fullscreen mode Exit fullscreen mode

7. Configuration & Environment Variables

Environment variables are validated on the server by src/libs/env.ts (T3 Env).

  • BETTER_AUTH_URL is optional - derived from VERCEL_URL in production, http://localhost:6767 locally.
  • BETTER_AUTH_SECRET (32+ chars) must be set at runtime in production. A missing secret logs a warning instead of crashing the build.
  • Set SKIP_ENV_VALIDATION=true in CI / Docker build steps when env vars aren't available yet.

Key variables:

Variable Purpose
BETTER_AUTH_SECRET Auth signing secret (32+ chars)
GOOGLE_CLIENT_ID/SECRET Optional Google OAuth
NEXT_PUBLIC_GOOGLE_AUTH_ENABLED Show Google sign-in button
AUTH_ADMIN_EMAILS Comma-separated admin role emails
NEXT_PUBLIC_DEMO_MODE Demo credentials panel (disable for prod)
SENTRY_DSN / NEXT_PUBLIC_SENTRY_DSN Optional Sentry error tracking
NEXT_PUBLIC_APP_URL Public app URL (SEO/OAuth)

8. Development, Testing & CI/CD

Editor Setup

Install the Oxc VS Code extension (oxc.oxc-vscode) for format-on-save and Oxlint fix-on-save. Project settings in .vscode/settings.json are preconfigured.

Testing

  • Unit / component: Vitest + React Testing Library (config/vitest.config.ts). Tests live in src/tests/, mirroring the src/ folder structure. Use renderWithProviders from @/tests/render for components that need app context (i18n, theme, auth, React Query). Plain render is fine for isolated UI primitives.
  • End-to-end: Playwright in e2e/ checks the home page, the health endpoint, and the security headers. It runs on port 6767 (127.0.0.1). Local runs use next dev (all browsers); CI uses production next start (Chromium only). Run playwright:install before the first E2E run; on Linux, WebKit needs playwright:install:deps (sudo). Stop npm run dev before npm run e2e - E2E starts its own server.

CI/CD Pipeline

  • .github/workflows/check.yml - typecheck → lint → knip → unit tests → build on every push and PR, plus a job that runs npm run demo:remove on a clean copy and checks that the app still passes.
  • .github/workflows/playwright.yml - build → Playwright E2E (Chromium, production server).
  • .github/renovate.json - weekly grouped updates, automerging patch and minor versions while keeping majors separate.
  • .github/dependabot.yml - weekly grouped npm and GitHub Actions updates.

9. Architectural Caveats: What Next Elite is NOT

To keep the boilerplate clean and adaptable, I made specific design trade-offs:

  1. No Database Bundled: There is no Prisma, Drizzle, Postgres, or MongoDB setup. Next Elite is built to communicate with an external API. Without a database configured, BetterAuth falls back to its built-in in-memory store, which is perfect for the demo and local development.
  2. Simple RBAC System: The starter RBAC covers two roles (user and admin) with a fast-path admin list via environment variables. For complex multi-tenant permissions, map roles in your main database and API layer.
  3. Cookie-Based i18n: Storing the locale in a cookie rather than a path prefix (like /en/dashboard) keeps routes simpler, but public pages render per request, and per-locale SEO indexing would need a custom path-prefixed router setup.
  4. In-Memory Auth Store: Because of that fallback, users and sessions live in server memory by default. They're lost on restart and aren't shared between server instances, so production needs a database adapter (or point auth at your own backend).

10. Production Checklist: Going Live

Before deploying Next Elite to production, run through these essential steps:

  1. Configure Auth Secrets: Set BETTER_AUTH_SECRET (at least 32 characters long) in your hosting dashboard.
  2. Add a Database Adapter: Connect BetterAuth to a database (for example Postgres via Drizzle or Prisma) so users and sessions survive restarts and work across multiple instances. Optionally add Redis as secondary storage for sessions.
  3. Remove the Demo: Run npm run demo:remove, or at least set NEXT_PUBLIC_DEMO_MODE=false.
  4. Link Your API: Point NEXT_PUBLIC_APP_URL at your live domain and wire TanStack Query hooks to your REST/GraphQL/BFF service.
  5. Update SEO Metadata: Update src/features/site/site.config.json with your project domain, OG image, and app description, and replace the images in public/.
  6. Wire Password Reset: Connect the password reset form to your backend's reset email flow.
  7. Enable Error Tracking: Set SENTRY_DSN and NEXT_PUBLIC_SENTRY_DSN to activate Sentry instrumentation.
  8. Set SKIP_ENV_VALIDATION=true in CI/Docker build steps when env vars aren't available at build time.

11. Contributing & Open Source

Next Elite is free and open-source under the MIT license. Contributions, bug reports, and discussions are welcome!

  1. Fork & branch from main (feat/..., fix/..., docs/...).
  2. Ensure npm run check passes locally.
  3. Use Conventional Commits.
  4. Open a pull request.

If this boilerplate saved you time, a star helps more devs discover it

Live Demo · GitHub Repo · Use Template · Deploy on Vercel

Top comments (23)

Collapse
 
jtorchia profile image
Juan Torchia •

50 hours is an honest number — most boilerplate authors underestimate the invisible cost of the glue layer (auth callbacks, RBAC middleware, i18n routing edge cases). One thing I'd push on: how does the RBAC model handle permission inheritance vs. flat role assignment? In my experience that's the first thing that breaks when a real client asks for 'editor who can publish but only their own content'. The difference between a boilerplate that ships fast and one that survives the first feature request is usually that one decision.

Collapse
 
salmanshahriar profile image
Salman Shahriar •

Great point!
and you’re exactly right that RBAC inheritance is where “simple boilerplate auth” usually collapses.

In this boilerplate, the model is intentionally flat role assignment + explicit permission checks, with ownership-aware rules layered in policy helpers (for cases like “publish own only”). That keeps the base predictable, but it does mean inheritance trees (e.g. admin > editor > author) are not first-class by default.

Collapse
 
anni profile image
Anietie Brownson •

This is awesome
Good work

Collapse
 
salmanshahriar profile image
Salman Shahriar •

Thanks man ‼️

Collapse
 
samihamahin profile image
Samiha Muntaha Mahin •

Thats amazingg

Collapse
 
salmanshahriar profile image
Salman Shahriar •

Thanks ‼️

Collapse
 
fahad_alikhan_5ec98c68a2 profile image
Fahad Ali Khan •

Nice simple design. I'll surely use it in the future.

Collapse
 
salmanshahriar profile image
Salman Shahriar •

❤️❤️

Collapse
 
sharafat_hossain_3dcc1f75 profile image
Sharafat Hossain •

Mad respect man

Collapse
 
salmanshahriar profile image
Salman Shahriar •

Thanks‼️

Collapse
 
joey_tribbiani_4771602dc5 profile image
Joey Tribbiani •

Thanks for this blog.

Collapse
 
salmanshahriar profile image
Salman Shahriar • • Edited

How you DOINNNN xD

Collapse
 
popy_chan_7f62c449a0c66c2 profile image
popy chan •

damn! Good Work brother.

Collapse
 
salmanshahriar profile image
Salman Shahriar •

thanks!

Collapse
 
leob profile image
leob •

Nice! Bookmarked, and kept for "whenever I need it"

Collapse
 
salmanshahriar profile image
Salman Shahriar •

Thanks, man! Feel free to share any suggestions anytime! ❤️

Collapse
 
sadi_nahin_5b099dbb050907 profile image
Sadi Nahin •

Coolest shit, needed this!

Collapse
 
salmanshahriar profile image
Salman Shahriar •

Thanks, man! Feel free to share any suggestions anytime! ❤️

Some comments may only be visible to logged-in visitors. Sign in to view all comments.