Next.jsReactSaaS启动器

nextjs-starterkit — Next.js SaaS模板

作者 fjrfthrrhmn

基于 Next.js App Router 的 SaaS 启动器模板，采用 TypeScript 严格模式、Tailwind CSS 与 Feature-Sliced Design 目录结构，内置测试、国际化与代码质量工具链。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-03查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

采用 Next.js App Router，配合 TypeScript 严格模式与 Tailwind CSS

按 Feature-Sliced Design 组织 src 目录，区分 app、components、features、hooks、lib 等层

集成 Shadcn UI/Radix、TanStack React Query、Zustand、Zod、next-intl 与 Motion

内置 Vitest + Testing Library 单元/集成测试与 Playwright 端到端测试

配置 ESLint、Prettier、类型检查与 Husky Git 钩子作为提交前质量门禁

.docs/ 目录按架构、技术、工程、ADR、API、测试、部署、安全等主题提供工程文档

模板详细介绍

该模板是一个 Next.js 启动器项目，使用 App Router 组织路由与布局，并以 Feature-Sliced Design（FSD）划分 src 目录，包括 app、components、features、hooks、lib、i18n、testing、types、utils 等模块。技术选型覆盖 TypeScript 严格模式、Tailwind CSS、Shadcn UI/Radix 组件原语、TanStack React Query 服务端状态、Zustand 客户端状态、Zod 运行时校验、next-intl 国际化与 Motion 动画。

工程侧提供 Vitest 与 Testing Library 做单元/集成测试，Playwright 做端到端测试，并配置 ESLint、Prettier、TypeScript 类型检查与 Husky Git 钩子（pre-commit 运行 lint-staged，pre-push 运行类型检查与测试）。仓库内 .docs/ 目录按 architecture、technical、engineering、adr、api、testing、deployment、security、ai、product、design、glossary、onboarding 等子目录组织工程文档。

使用前提为 Bun 1.2 及以上或 Node.js 20 及以上，需复制 .env.example 为 .env 并按需填写。模板以 MIT 许可发布，可免费使用、修改、商用与分发，但需保留版权与许可声明；演示图片、字体、图标等第三方素材以及域名、托管、数据库、支付或 AI 等外部服务不包含在代码许可范围内，需另行核对或付费。README 中未列出具体依赖版本号，实际版本以仓库依赖清单为准。

Next.jsReactSaaS启动器

适合你的项目吗？

适用场景

需要以 App Router 与 FSD 目录结构起步的新 Next.js 项目
希望预先接入测试、代码检查与 Git 钩子的前端工程
需要国际化（next-intl）与客户端/服务端状态管理方案的 Web 应用
计划按 .docs/ 中的架构、API、测试、部署等文档组织工程协作流程的团队

适合人群

熟悉 React 与 TypeScript、希望快速搭建项目骨架的开发者
偏好 Feature-Sliced Design 分层组织代码的团队
需要单元测试、E2E 测试与代码质量工具链开箱可用的项目
需要国际化与状态管理基础配置的 SaaS 类应用

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
环境要求 Bun 1.2 及以上，或 Node.js 20 及以上，并安装 Git
2
克隆仓库后执行 bun install 安装依赖
3
复制 .env.example 为 .env，并按实际需要填写环境变量
4
执行 bun dev 启动开发服务器，默认访问 http://localhost:3000
5
提交前依次运行 bun check-types、bun lint、bun format、bun test:run 与 bun build

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

运行环境要求 Bun 1.2 及以上，或 Node.js 20 及以上；低于该版本无法按文档正常安装与启动。
需将 .env.example 复制为 .env 并按需填写环境变量，未配置时部分功能可能无法运行。
提交代码时 Husky 会在 pre-commit 自动运行 lint-staged，pre-push 运行类型检查与测试，可能阻断不符合质量门禁的提交。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

Bun](https://bun.sh) >= 1.2 (atau Node.js >= 20)
README 原文

cp .env.example .env # Edit .env sesuai kebutuhan
README 原文

Git hooks (Husky) akan menjalankan lint-staged otomatis di pre-commit
README 原文

https://github.com/fjrfthrrhmn/nextjs-starterkit/blob/main/LICENSE https://github.com/fjrfthrrhmn/nextjs-starterkit/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 88 / 100
技术栈: Next.js · React
网站类型: SaaS · 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-05-17
截图检查日期: 2026-10-03

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 6324bb2a2a8a1433c06220db2992ba200faf89adc3ee0e9b7d6e8520d17ec08b

2026-10-03T02:56:38.687Z

来源文件 / 仓库

# Next App

Foundation project Next.js 16 dengan arsitektur Feature-Sliced Design (FSD),
TypeScript strict, Tailwind CSS v4, dan tooling modern.

## Tech Stack

| Teknologi                    | Fungsi                        |
| ---------------------------- | ----------------------------- |
| **Next.js 16** (App Router)  | Routing, SSR, RSC, API Routes |
| **TypeScript** (Strict)      | Type safety                   |
| **Tailwind CSS v4**          | Styling utility-first         |
| **Shadcn UI / Radix**        | Component primitives          |
| **TanStack React Query**     | Server state management       |
| **Zustand**                  | Client state management       |
| **Zod**                      | Runtime validation            |
| **next-intl**                | Internasionalisasi            |
| **Motion**                   | Animasi                       |
| **Vitest + Testing Library** | Unit / integration test       |
| **Playwright**               | E2E test                      |

## Struktur Folder

```
src/
├── app/            # Routing & layout (App Router)
├── components/     # Shared components (ui/, layouts/, widgets/, providers/)
├── config/         # App configuration
├── constants/      # Global constants
├── data/           # Static data & mock
├── features/       # Feature modules (FSD)
├── hooks/          # Shared hooks
├── i18n/           # Internationalization
├── lib/            # Third-party integrations
├── styles/         # Global styles
├── testing/        # Test utilities & setup
├── types/          # Global type definitions
└── utils/          # Pure utility functions
```

## Prasyarat

- [Bun](https://bun.sh) >= 1.2 (atau Node.js >= 20)
- Git

## Setup Development

```bash
# 1. Clone repository
git clone https://github.com/fjrfthrrhmn/next-app.git
cd next-app

# 2. Install dependencies
bun install

# 3. Copy environment variables
cp .env.example .env
# Edit .env sesuai kebutuhan

# 4. Jalankan development server
bun dev
```

Buka [http://localhost:3000](http://localhost:3000) di browser.

## Scripts

| Perintah          | Deskripsi                |
| ----------------- | ------------------------ |
| `bun dev`         | Start development server |
| `bun build`       | Production build         |
| `bun start`       | Start production server  |
| `bun lint`        | ESLint check             |
| `bun format`      | Prettier check           |
| `bun format:fix`  | Prettier format          |
| `bun check-types` | TypeScript type checking |
| `bun test`        | Vitest (watch mode)      |
| `bun test:run`    | Vitest (single run)      |

## Quality Gates

Sebelum push, pastikan semua lolos:

```bash
bun check-types  # Type checking
bun lint         # ESLint
bun format       # Prettier
bun test:run     # Unit & integration tests
bun build        # Production build
```

Git hooks (Husky) akan menjalankan lint-staged otomatis di pre-commit
dan typecheck + test di pre-push.

## Dokumentasi

Seluruh dokumentasi engineering tersedia di `.docs/`:

| Sub-folder      | Isi                                  |
| --------------- | ------------------------------------ |
| `architecture/` | System architecture, data flow       |
| `technical/`    | Tech stack, dependencies, setup      |
| `engineering/`  | Coding standards, code review        |
| `adr/`          | Architecture Decision Records        |
| `api/`          | API documentation                    |
| `testing/`      | Testing strategy & coverage goals    |
| `deployment/`   | Deployment pipeline & environments   |
| `security/`     | Auth, authorization, data protection |
| `ai/`           | AI collaboration guide               |
| `product/`      | Product vision & roadmap             |
| `design/`       | Design system & UI/UX guidelines     |
| `glossary/`     | Project terminology                  |
| `onboarding/`   | Developer onboarding guide           |

## Lisensi

Distributed under the MIT License. Lihat `LICENSE` untuk informasi lebih lanjut.

反馈内容错误