中文 | English
🔥 面向独立开发者与小团队的 Next.js 16 启动模板:集成 Tailwind CSS 4、React 19、Nextra 4、TypeScript、Shadcn UI、Radix UI、Aceternity UI、Sass、ESLint 9、Iconify 与 i18n 多语言。覆盖 Blog、Docs、AI SaaS Landing Page 等核心场景,支持响应式布局、暗黑模式、登录页与前端鉴权示例,兼顾快速起步与长期可维护性,支持 Vercel / Netlify 部署。
| 🔄 持续更新 不定期更新依赖和功能 |
🐛 快速响应 平均 2 小时内回复 Issue |
| 💎 精心打磨 花费 100+ 小时完善模板细节 |
🛡️ 稳定可靠 确保每个功能都充分测试 |
- Tailwind CSS v4 升级:全面升级至 Tailwind CSS v4,优化性能并引入新特性。
- Nextra v4 重构:升级至 Nextra v4,提升文档生成效率和开发体验。
- ⚡️ Next.js 16 + React 19 + TypeScript:现代前端核心栈,类型安全与开发效率兼顾
- 🎨 Tailwind CSS v4 + Sass:支持原子化样式与工程化样式组织,快速构建响应式 UI
- 📚 Nextra v4(内容驱动):适合文档站、知识库、博客等内容型项目
- 🧩 Shadcn UI + Radix UI + Aceternity UI:可组合、可扩展的组件体系,便于快速搭建产品页面
- 🌍 i18n 多语言国际化:中英文内容组织与路由支持,适配多语言产品站点
- 🌙 暗黑模式 + 响应式设计:覆盖桌面端与移动端体验,支持主题切换
- 🔐 登录页与前端鉴权示例:提供基础鉴权流程参考,便于业务快速接入
- 🖼️ Iconify 图标集支持:统一图标方案,降低图标接入成本
- 🛠️ ESLint v9 规范化:统一代码风格与质量约束,适合团队协作
- 🚀 部署友好:开箱支持 Vercel / Netlify 部署
- 个人博客(Blog Starter Template)
- 技术文档与产品文档站(Docs Site)
- AI 产品官网与营销落地页(AI SaaS Landing Page)
- 个人项目主页与小团队产品展示站
- React 19.x
- Node >= 20.x
- Pnpm 9.x
- VS Code 插件
dbaeumer.vscode-eslint>= v3.0.5 (pre-release)
- 安装依赖
pnpm i- 本地开发
pnpm dev接着用浏览器打开 http://localhost:8000 即可访问服务
🎉 成功运行了? 如果你喜欢这个模板的简洁配置,别忘了鼓励一下:
本项目已集成 Shadcn UI, 按照以下步骤安装/编辑组件并使用:
首次执行 pnpm dlx shadcn@latest init 命令初始化 Shadcn UI 基本项目结构(如果尚未初始化)
[!IMPORTANT]
该初始化命令用于创建
Shadcn UI的基本项目结构本项目已完成初始化,无需再次运行此命令
-
使用
Shadcn CLI添加组件:pnpm dlx shadcn@latest add <组件名>
如添加
<Alert />组件,执行以下命令即可,详见文档pnpm dlx shadcn@latest add alert
-
使用组件
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
export default function Home() {
return (
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components and dependencies to your app using the cli.
</AlertDescription>
</Alert>
)
}- 自定义组件样式(可选)
Shadcn UI 组件通常已提供了流行的默认样式和功能,能满足大多数需求,若确实需要进行自定义定制,可编辑相应的组件文件,如:
打开 src/components/ui/alert.tsx 文件来修改 Alert 组件的样式
注意:在大多数情况下,
Shadcn UI提供的默认样式已经足够满足需求,无需进行额外修改
以下是一些开发者和团队正在使用、参考或受本项目启发的项目:
| 项目名 | 简介 |
|---|---|
| ClaudeCode101 中文教程 | 面向中文用户的 Claude Code AI 编程助手教程网站,汇集官方最佳实践与社区经验,助你高效掌握 AI 编程技能。 |
| EdgeOne Saas 模板 | 腾讯云官方模板:助你快速构建并部署下一款 SaaS 应用 |
| Talking Web3 | 一个 Web3 项目出圈加速器,致力于打造卓越的Web3项目。 |
| 面试宝典 | 一个免费且深入的八股文网站,帮助开发者提升技术能力并应对面试。 |
💡 如果您的项目也在使用或借鉴了本项目,我们诚挚欢迎您:
- 通过提交 Issue 分享您的项目链接
- 提交 Pull Request (PR) 将您的项目添加到列表中
本模板作为技术方案参考提供,使用者需知悉以下风险及义务:
- 技术风险:依赖框架(Next.js/Nextra/Tailwind CSS等)存在版本迭代风险,第三方组件(如 Shadcn UI)的行为规范以原始仓库为准,环境配置变更可能导致不可预见的构建异常
- 使用限制:禁止用于违反开源协议或法律法规的场景,使用者需自行完成代码安全审查及生产环境验证
- 责任免除:不承诺技术方案的业务适用性、安全性担保及定制支持,因使用/修改引发的直接或间接后果均由使用者自行承担






