I built a production ready NEXT.JS starter so you dont have to!

查看原文 / View Original 编辑 / Edit

I built a production ready NEXT.JS starter so you dont have to!

我构建了一个生产就绪的 NEXT.JS 启动模板，你无需再从零开始！

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.

每当我开启一个新的 Next.js 项目时，第一周的时间总是耗费在各种配置上：身份验证、国际化、基于角色的访问控制、SEO 元标签、环境变量验证、错误监控、Linting、测试以及 CI 流水线。等到我搭建好基础架构时，最初的热情早已被淹没在配置文件和样板代码中。由于我不断在不同的 SaaS 项目中重复构建相同的基础，我决定停下来，一次性将其做好：Next Elite 应运而生。

It is a frontend-first Next.js 16 + React 19 boilerplate designed to consume APIs (REST/GraphQL/BFF) instead of owning a database, allowing you to drop it on top of any backend you already have. It is optimized for speed, SEO, and developer productivity, and it is 100% open source under the MIT license.

这是一个以前端为先的 Next.js 16 + React 19 样板项目，旨在通过调用 API（REST/GraphQL/BFF）而非内置数据库来运行，使你可以将其直接部署在现有的任何后端之上。它针对速度、SEO 和开发效率进行了优化，并以 MIT 协议完全开源。

Live Demo · GitHub Repo · Use This Template · Deploy on Vercel TL;DR: git clone, npm install, cp .env.example .env, npm run dev. You get auth, RBAC dashboards, 6-language i18n, SEO, forms, testing, and CI. Try the demo.

在线演示 · GitHub 仓库 · 使用此模板 · 部署到 Vercel 简而言之：git clone，npm install，cp .env.example .env，npm run dev。你将直接获得身份验证、RBAC 仪表板、6 种语言的国际化、SEO、表单、测试和 CI 支持。快去试试演示吧。

Table of Contents

目录

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

  • What’s Inside: The Next Elite Stack & Features

  • Lighthouse Score: 100% Performance & SEO

  • Quick Start: Launch Your Project in 60 Seconds

  • Deep Dive: How Next Elite Works Under the Hood

  • Clean Feature-Based Directory Structure

  • Architectural Caveats: What Next Elite is NOT

  • Production Checklist: Going Live

  • Contributing & Open Source

  • 为什么还需要另一个 Next.js 样板？（设计理念）

  • 核心内容：Next Elite 技术栈与功能

  • Lighthouse 评分：100% 性能与 SEO

  • 快速开始：60 秒启动你的项目

  • 深度解析：Next Elite 的底层原理

  • 基于功能的整洁目录结构

  • 架构注意事项：Next Elite 不适合什么

  • 生产环境检查清单：上线准备

  • 贡献与开源

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

1. 为什么还需要另一个 Next.js 样板？（设计理念）

Most Next.js starters on GitHub are either too bare (providing just a dark mode toggle and a “TODO: add auth” comment) or too bloated (bundling 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 to build a backend-for-frontend (BFF) architecture, tearing out the built-in database layer from a boilerplate is painful.

GitHub 上大多数 Next.js 启动模板要么过于简陋（仅提供一个深色模式切换按钮和一行“TODO: 添加身份验证”的注释），要么过于臃肿（捆绑了 Prisma、PostgreSQL、Docker Compose、Stripe Webhooks 以及与特定数据库模式紧密耦合的 ORM）。如果你已经拥有后端（使用 Go、Python、Laravel 或 Node.js 编写），或者想要构建 BFF（后端为前端服务）架构，那么从这些样板中剥离内置的数据库层是非常痛苦的。

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 fetching structure flexible. It’s built to consume APIs directly, allowing you to drop it on top of any backend you already have.

Next Elite 找到了一个完美的平衡点。它处理了复杂的前端基础、UI 组件、角色管理和语言设置，同时保持了数据库和 API 获取结构的灵活性。它专为直接调用 API 而设计，允许你将其直接覆盖在你现有的任何后端之上。

Who is this boilerplate for? 这个样板适合谁？

✅ SaaS applications requiring complex role authorization. ✅ Internationalized projects that need to support multiple languages (LTR and RTL). ✅ Frontend-first architectures consuming REST, GraphQL, or a backend-for-frontend (BFF). ❌ Single-page landing websites (Next Elite is likely overkill). ❌ Tightly-coupled monoliths requiring a database layer in the same repository.

✅ 需要复杂角色授权的 SaaS 应用。 ✅ 需要支持多种语言（从左到右和从右到左布局）的国际化项目。 ✅ 采用前端优先架构，调用 REST、GraphQL 或 BFF 的项目。 ❌ 单页落地页网站（Next Elite 可能显得大材小用）。 ❌ 要求数据库层与代码库紧密耦合的单体应用。

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

2. 核心内容：Next Elite 技术栈与功能

Here is the clean, high-performance tech stack built into Next Elite, broken down by core categories: 以下是 Next Elite 内置的简洁、高性能技术栈，按核心类别分类：

Frameworks & Core 框架与核心

  • Next.js 16 (App Router) & React 19 – Fast, modern React framework with full support for React 19 features (Server/Client components, Server Actions).

  • TypeScript 6 – End-to-end type safety for rock-solid refactoring and developer experience.

  • Node.js 22 (LTS) – Built on the latest LTS runtime.

  • Feature-Based Architecture – Structured around self-contained vertical slices/feature folders under src/features/ for maximum modularity and clean separation of concerns.

  • Next.js 16 (App Router) & React 19 – 快速、现代的 React 框架，全面支持 React 19 特性（服务端/客户端组件、Server Actions）。

  • TypeScript 6 – 端到端的类型安全，确保重构的稳健性和良好的开发体验。

  • Node.js 22 (LTS) – 基于最新的 LTS 运行时构建。

  • 基于功能的架构 – 在 src/features/ 下按自包含的垂直切片/功能文件夹进行组织，实现最大程度的模块化和清晰的关注点分离。

Authentication & Access Control 身份验证与访问控制

  • BetterAuth – Out-of-the-box email/password and OAuth (Google) authentication using /api/auth/* route handlers.

  • 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.

  • BetterAuth – 开箱即用的电子邮件/密码和 OAuth (Google) 身份验证，使用 /api/auth/* 路由处理程序。

  • 基于角色的访问控制 (RBAC) – 灵活的 RBAC（用户和管理员角色），带有服务端守卫（requireUser, requirePermission）以及用于角色无关路由的并行路由插槽（@admin, @user）。

Internationalization (i18n) 国际化 (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.

  • next-intl – 类型安全、基于 Cookie 的本地化（无 URL 前缀），支持英语、孟加拉语、阿拉伯语（RTL）、法语、西班牙语和简体中文。翻译键经过类型检查。

3. Lighthouse Score: 100% Performance & SEO

3. Lighthouse 评分：100% 性能与 SEO

One of the key goals of Next Elite was achieving flawless performance and SEO defaults. Out-of-the-box, the production build scores a perfect 100 across the board on Lighthouse. This is achieved by rendering Server Components by default, minimizing client-side javascript, optimizing images, and dynamically serving optimized SEO meta tags from a single configuration file.

Next Elite 的核心目标之一是实现完美的性能和 SEO 默认设置。在生产构建中，它在 Lighthouse 的各项指标中均获得了 100 分的满分。这是通过默认渲染服务端组件、最小化客户端 JavaScript、优化图像以及从单个配置文件动态提供优化的 SEO 元标签来实现的。

4. Quick Start: Launch Your Project in 60 Seconds

4. 快速开始：60 秒启动你的项目

Local Setup 本地设置

Getting started is simple. Clone the repository, install dependencies, copy environment variables, and run: 开始非常简单。克隆仓库，安装依赖，复制环境变量，然后运行：

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

Open http://localhost:3000 to see your app running locally. 打开 http://localhost:3000 即可在本地查看你的应用。

Demo Credentials 演示凭据

When NEXT_PUBLIC_DEMO_MODE=true is enabled, the login screen includes a quick-fill panel with these seed credentials: 当启用 NEXT_PUBLIC_DEMO_MODE=true 时，登录界面会包含一个快速填充面板，提供以下种子凭据：

RoleEmailPassword
Useruser@test.com12345678
Adminadmin@test.com12345678

[!NOTE] For production deployments, set… [!注意] 对于生产环境部署，请设置…

← 返回新闻列表 / Back to news list