DEV Community

Cover image for Next.js Best Practices in 2026: Why I Built Next-Elite
Salman Shahriar
Salman Shahriar

Posted on Edited on

Next.js Best Practices in 2026: Why I Built Next-Elite

Every serious Next.js project starts with the same fifteen things that aren't the product: auth, layouts, permissions, env validation, an API client, i18n, UI primitives, SEO, tests, linting, formatting, Docker, CI, error tracking, analytics.

Before I built Next Elite, I did what most people do first: I looked at what already existed. The official starter, the popular free kits, the paid ones. Some of them are genuinely excellent at what they set out to do. None of them fit the specific shape of project I kept building, a role-based SaaS dashboard sitting in front of a backend I don't own, shipped in more than one language.

This post walks through that landscape as it stood in 2026, and then makes the actual case for why Next-Elite is the one I'd hand a developer starting that kind of project today. Not "best" in the abstract. Best for that.


Table of Contents

  1. What "best" should mean for a 2026 boilerplate
  2. The 2026 landscape, honestly
  3. Where the gap is
  4. Why Next-Elite fills it
  5. Feature walkthrough
  6. Where Next-Elite is not the answer
  7. Why now, specifically
  8. Get started

1. What "best" should mean for a 2026 boilerplate

"Best Next.js boilerplate" is a search query with hundreds of contradictory answers, because nobody agrees on what's being optimized for. A boilerplate that's best for a solo founder shipping a $20/month tool in a weekend is a bad fit for a team shipping a multi-role SaaS dashboard, and vice versa. So before arguing for anything, here's the criteria I actually think matter in 2026:

  • Current stack, not last cycle's. Next.js 16 stabilized Turbopack and shipped React 19.2 with real architectural changes underneath (Cache Components, View Transitions). A boilerplate still pinned to Next.js 14 patterns is teaching you yesterday's defaults.
  • Architectural fit, not architectural maximalism. The best boilerplate isn't the one with the most integrations, it's the one whose assumptions match your project's shape. A kit that bundles Prisma and Postgres is the right answer for a project that wants Next.js to be the whole backend, and the wrong answer for one that already has a backend team.
  • Security that lives in the right place. 2025's CVE-2025-29927 let attackers skip Next.js middleware entirely with a crafted header, bypassing any auth check that lived only there. A boilerplate built after that lesson should enforce authorization server-side, in Server Components and Route Handlers, not lean on middleware as the only gate.
  • i18n as a first-class citizen, not an afterthought. Most boilerplates are English-only by default. If your product will ever ship in more than one market, retrofitting i18n later is a much bigger job than building on it from day one.
  • Tooling that respects your time. Linting and formatting on a large codebase with ESLint alone routinely takes 30 to 60 seconds; Rust-based tooling like Oxlint runs the same checks in a fraction of that.
  • Cost matching the license. Free-and-open-source is not automatically better than paid, a $199 to $649 one-time SaaS kit that saves you weeks of Stripe and email wiring is a fair trade for a lot of teams. But it should be a deliberate choice, not the only option on the table.

Judged on those six criteria, here's how the landscape actually looks.


2. The 2026 landscape, honestly

I'm not going to pretend the alternatives are bad. They're built for different jobs.

The official Next.js SaaS Starter, maintained by the Next.js team itself, is free, MIT-licensed, and demonstrates the framework's own current best practices. It ships Postgres and Stripe subscriptions with shadcn/ui. It's intentionally minimal: no built-in RBAC, no i18n, no admin dashboard beyond the basics. It's the best free starting point if you want clean foundations and don't mind building the last 40% yourself, which is exactly what it's designed for.

create-t3-app scaffolds a typesafe full-stack app from modular pieces, TypeScript, tRPC, Prisma or Drizzle, NextAuth, Tailwind. It's excellent for learning the typesafe-stack pattern and for smaller full-stack apps where Next.js owns the database. It isn't trying to be a role-based SaaS dashboard kit, and doesn't claim to be.

ixartz's Next.js Boilerplate is the community heavyweight in the free tier: auth, multi-tenancy, roles and permissions, i18n, database migrations, a full Vitest + Playwright testing suite, all MIT-licensed. It's a serious, well-maintained project and a completely reasonable choice if you want the database and multi-tenancy bundled in from the start.

Paid kits like ShipFast and MakerKit solve a different problem: speed to a sellable product. ShipFast bundles Stripe payments, transactional email, and a blog for a one-time fee, straightforward, well-documented, no surprises. MakerKit goes further with a Turborepo monorepo, team accounts, and enterprise features, aimed at teams who'll pay for that scaffolding rather than build it. Building an equivalent foundation from scratch, auth, billing, multi-tenancy, a marketing site, has been estimated at somewhere around $7,500 to $12,000 in developer time, which is exactly the math that makes a $200 to $650 one-time kit an easy yes for a lot of founders.

None of this is a case against any of them. It's the honest starting point for the actual question: what's missing.


3. Where the gap is

Every option above makes the same underlying assumption in one direction or another: either Next.js owns the database (the official starter, T3, ixartz, the paid kits), or you're building something small enough that architecture doesn't matter yet.

Almost none of them assume the opposite, common, situation: you already have a backend, a Go service, a Laravel API, a BFF layer your platform team owns, and you need a frontend that's genuinely good at consuming it, with real role-based access control and real multi-language support, without dragging in a database layer you're going to rip out on day two.

That's the specific gap Next-Elite is built for.

Next Elite home page


4. Why Next-Elite fills it

Here's the direct comparison, using the same six criteria from section 1:

Official Next.js Starter ixartz Boilerplate ShipFast / MakerKit Next-Elite
Stack currency Current Current Current Next.js 16.4, React 19.3, TypeScript 7
Database assumption Postgres bundled Postgres/Drizzle bundled Bundled (Prisma/Postgres) None, API-driven by design
RBAC Not included Roles & permissions Varies by tier Permission-based, server-enforced guards
i18n / RTL Not included Included (locales vary) Rare 6 languages, RTL, type-checked keys
Linting ESLint ESLint ESLint Oxlint + Oxfmt (dramatically faster)
Testing Minimal Vitest + Playwright Varies Vitest + Playwright, pre-wired
License / cost Free (MIT) Free (MIT) $199 to $649 one-time Free (MIT)
Best for Learning current Next.js patterns, small full-stack apps Full-stack SaaS that wants the DB bundled Fastest path to a sellable, DB-owning SaaS Multi-role, multi-language frontends sitting in front of an existing or external API

The columns aren't competing to be "better" in general, they're solving different problems. Next-Elite's column is the one that exists specifically for "the backend isn't Next.js's job here."


5. Feature walkthrough

Auth and RBAC that enforce on the server. BetterAuth handles email/password and Google OAuth. Authorization is separate and deliberate: requireUser() and requirePermission() run inside Server Components, and Next.js parallel routes (@admin, @user) mean role-specific dashboards (dashboard, analytics, profile, settings) don't need runtime branching in the render tree at all. This is the direct, practical answer to the CVE-2025-29927 lesson from section 1: the project has no middleware at all, so nothing security-critical can be skipped at the edge. Roles and their permissions live in one typed file, so a misspelled permission is a compile error. One thing to plan for: with no database configured, BetterAuth uses an in-memory store, which is perfect for the demo but loses users on restart, so connect a database adapter or your own backend's auth before going to production.

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

Next Elite split-pane auth layout

i18n that's actually type-safe. Six languages, English, Bengali, Arabic (RTL), French, Spanish, Simplified Chinese, via next-intl, cookie-based so there's no /en/ URL prefix to manage. Translation keys are checked at compile time, so a typo'd key fails the build instead of silently rendering blank in production, and a unit test makes sure every locale has the same keys as English. RTL support in particular is something most of the boilerplates in section 2 simply don't ship; Next-Elite's layouts use logical start/end spacing so the same components work in both directions.

Frontend-first, API-driven architecture. No Prisma, no Drizzle, no Postgres. TanStack Query is pre-configured in providers.tsx, ready to point at your REST, GraphQL, or BFF endpoint. Drop it in front of whatever backend already exists. (If you want a matching backend, a companion template, Next Elite Server, with NestJS, BetterAuth, Drizzle ORM, and PostgreSQL, is coming soon.)

Next Elite role-based admin dashboard layout

50+ shadcn/ui components you own. Built on Tailwind CSS v4 and Radix UI, including stat cards, charts, a sortable and paginated data table, a searchable combobox, and a date picker, with a live /ui-components showcase page. Every color and radius comes from light and dark design tokens, so rebranding or adjusting dark mode is a token change, not a find-and-replace. Because the components are code in your repo rather than an imported library, extending one (a new variant) doesn't mean waiting on someone else's release.

Next Elite 50+ custom and reusable UI components

Tooling that doesn't waste your CI minutes. Oxlint and Oxfmt for linting and formatting, Knip for dead code, Lefthook wiring pre-commit, commit-msg, and pre-push hooks so problems get caught before they reach a PR, not during it. Dependencies are pinned to exact versions and kept current by Renovate and Dependabot. And because a lot of 2026 code is written with AI agents, the repo ships its conventions for them too: an AGENTS.md and a project-standards skill that tell Claude Code, Cursor, Codex and friends to reuse existing components, add variants instead of duplicates, and use design tokens only.

Testing from the first commit. Vitest and React Testing Library for units and components, Playwright for the handful of end-to-end flows that matter (including checking that the security headers are actually sent), npm run check as a single CI gate: typecheck, lint, dead code, tests. CI also deletes the demo code on every push and runs the checks again, so npm run demo:remove always leaves you a clean, working app.

Observability, security, and deployment that aren't afterthoughts. Sentry (lazy-loaded, and only when a DSN is set), Vercel Analytics (rendered only on Vercel), and a /api/health endpoint. A strict Content Security Policy, HSTS, and frame protection are set in code. Standalone Docker output on a Distroless base image, with multi-arch builds (amd64/arm64) for self-hosting on ARM, Dokploy-ready, or one click to Vercel.

Performance measured, not assumed. I ran the Turbopack bundle analyzer on the project and moved everything that didn't need to be on every page off the first load: Sentry, the env validation library, and the charting library. That cut first-load JavaScript by 21–24% per page, and the live demo's total transfer went from 906 KB to 462 KB. The project's Lighthouse report shows 100 across Performance, Accessibility, Best Practices, and SEO, plus 3/3 on Agentic Browsing:

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

All of it, MIT-licensed, free.


6. Where Next-Elite is not the answer

An argument for "best for X" is only credible if it also says what it's not for.

  • You want the database bundled in. If you want Next.js to be your whole backend, ixartz's boilerplate or the official Next.js SaaS Starter will serve you better than fighting Next-Elite's API-driven assumption.
  • You want payments and billing pre-wired. Next-Elite doesn't include Stripe. ShipFast or MakerKit will save you more time if billing is core to the MVP.
  • Your project is small enough that this is overkill. A landing page or a weekend prototype doesn't need feature-based architecture, RBAC, or six languages. create-next-app is the right answer there.
  • You need enterprise compliance features out of the box. SOC 2 audit logging and SSO aren't in scope here; a kit like Bedrock exists specifically for that.
  • You need per-locale URLs for SEO. Cookie-based i18n keeps routing simple, but if /es/... pages must rank separately from /en/... pages, you'll need a path-prefixed routing setup that Next-Elite doesn't ship.

If none of those describe your project, and it does involve multiple roles, more than one language, or a backend you don't want to duplicate inside your frontend, that's the project Next-Elite was built for.


7. Why now, specifically

2026 is a reasonable moment to make this call, not an arbitrary one. Turbopack went stable as the default bundler in Next.js 16, React 19.2 shipped View Transitions and the Activity component underneath it, and the framework's own security posture keeps evolving in ways that reward architecture over reflexive middleware checks. A boilerplate built on last cycle's defaults isn't just missing features, it's teaching patterns the framework itself has moved past. Next-Elite is built on Next.js 16.4, React 19.3, and TypeScript 7 for that reason, not as a version-number flex, but because starting a 2026 project on 2024 patterns is a debt you pay down later.


8. Get started

git clone https://github.com/salmanshahriar/Next-Elite.git
cd Next-Elite
npm install
cp .env.example .env
npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:6767. Auth, RBAC-gated dashboards, six languages, and everything above is already wired together. When you're ready to build your own product, run npm run demo:remove and npm run check.

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

If this is the project you keep rebuilding from scratch too, it's free, MIT-licensed, and a star helps more people find it.

Top comments (0)