Next.js 与 React 技术栈，配合 TypeScript 与 ESLint 约束代码质量
Next.jsReact博客SaaS启动器
nextjs-nextra-starter — Next.js 博客模板
作者 pdsuwwz
面向独立开发者与小团队的 Next.js 启动模板，集成 Nextra 内容层与多套 UI 组件库，覆盖博客、文档站与 AI SaaS 落地页场景，支持中英双语、暗黑模式与前端鉴权示例。
看看你的网站会是什么样
浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局，交互效果请以实际项目为准。
采集于 2026-10-01查看来源
值得关注的模板亮点
从已有项目资料中，快速了解它的特点。
Nextra 内容层，适合文档站、知识库与博客等内容驱动项目
集成 Shadcn UI、Radix UI 与 Aceternity UI，组件可组合、可扩展
Tailwind CSS 与 Sass 并存，兼顾原子化样式与工程化样式组织
内置 i18n 多语言、暗黑模式与响应式布局
提供登录页与前端鉴权示例，以及 Iconify 统一图标方案
模板详细介绍
这是一个基于 Next.js 的启动模板，仓库由 pdsuwwz 维护，采用 MIT 许可。模板把内容型站点与产品型页面放在同一套工程里：Nextra 负责文档与博客类内容组织，Shadcn UI、Radix UI、Aceternity UI 提供可组合的界面组件，Tailwind CSS 与 Sass 处理样式，TypeScript 与 ESLint 约束代码质量。
功能范围上，模板提供中英文国际化路由与内容组织、暗黑模式、响应式布局、登录页与前端鉴权示例，以及基于 Iconify 的图标方案。仓库在 .agents/skills/ 下附带项目蒸馏 Skill，包含架构、功能地图、实现模式、扩展点与迁移注意事项等参考文档，供二次开发者理解模板结构。
使用限制方面，README 明确模板作为技术方案参考提供，不承诺业务适用性与安全性担保，使用者需自行完成代码安全审查与生产环境验证。依赖框架存在版本迭代风险，第三方组件行为以原始仓库为准。演示图片、字体、图标等第三方素材需按各自许可单独核对，域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
Next.jsReact博客SaaS启动器
适合你的项目吗？
适用场景
- 搭建个人博客或内容型站点
- 构建技术文档与产品文档站
- 制作 AI 产品官网与营销落地页
- 作为小团队产品展示站或项目主页的起点
适合人群
- 希望用 Next.js 快速起步的独立开发者
- 需要同时承载文档与产品页面的小团队
- 需要中英双语内容组织与路由的项目
- 希望参考已有工程结构进行二次开发的开发者
上手与定制指南
结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。
- 1
前置条件为 Node >= 20.x、Pnpm 9.x，并建议安装 VS Code 的 ESLint 插件（pre-release 版本）
- 2
使用 pnpm i 安装依赖，pnpm dev 启动本地开发，默认访问 http://localhost:8000
- 3
Shadcn UI 结构已初始化，无需再次执行 init；新增组件使用 pnpm dlx shadcn@latest add <组件名>
- 4
模板支持 Vercel 与 Netlify 部署，演示站点部署在 Netlify 与 Vercel
- 5
二次开发前可先阅读 .agents/skills/ 下的中文版 SKILL.md 及其架构、功能地图、扩展与迁移参考文档
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供；担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 使用者不得将本模板用于违反开源协议或法律法规的场景，并须自行完成代码安全审查与生产环境验证。
- 项目不承诺业务适用性、安全性担保及定制支持，因使用或修改模板引发的直接或间接后果由使用者自行承担。
- 依赖框架存在版本迭代风险，第三方组件行为规范以原始仓库为准，环境配置变更可能导致构建异常。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
禁止用于违反开源协议或法律法规的场景，使用者需自行完成代码安全审查及生产环境验证
README 原文
不承诺技术方案的业务适用性、安全性担保及定制支持，因使用/修改引发的直接或间接后果均由使用者自行承担
README 原文
https://github.com/pdsuwwz/nextjs-nextra-starter/blob/main/LICENSEhttps://github.com/pdsuwwz/nextjs-nextra-starter/blob/main/README.md依赖框架（Next.js/Nextra/Tailwind CSS等）存在版本迭代风险，第三方组件（如 Shadcn UI）的行为规范以原始仓库为准
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 96 / 100
- 技术栈
- Next.js · React
- 网站类型
- 博客 · SaaS · 启动器
这个分数如何计算
本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-09-17
- 截图检查日期
- 2026-10-01
已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: aa4432e54f832e6bc0328615a384f45051969bdc76b126f2bccccfd72093c5e0
2026-10-01T00:55:09.099Z
来源文件 / 仓库<!-- <p style="text-align:center;" align="center"><a href="https://github.com/pdsuwwz/nextjs-nextra-starter"><picture align="center">
<source media="(prefers-color-scheme: dark)" srcset="https://i.stardots.io/wisdom/1747723353145.png" width="100%" align="center" style="margin-bottom:20px;">
<source media="(prefers-color-scheme: light)" srcset="https://i.stardots.io/wisdom/1747723353146.png" width="100%" align="center" style="margin-bottom:20px;">
<img alt="color mode" src="https://i.stardots.io/wisdom/1747723353146.png" width="100%" align="center" style="margin-bottom:20px;">
</picture></a><br /><br /></p> -->
# Nextjs Nextra Starter
中文 | [English](README-en.md)
[](https://github.com/pdsuwwz/nextjs-nextra-starter/deployments)
[](https://github.com/pdsuwwz/nextjs-nextra-starter/deployments/Production)
[](https://github.com/pdsuwwz)
[](https://github.com/pdsuwwz/nextjs-nextra-starter/blob/main/LICENSE)
🔥 面向独立开发者与小团队的 Next.js 16 启动模板：集成 Tailwind CSS 4、React 19、Nextra 4、TypeScript、Shadcn UI、Radix UI、Aceternity UI、Sass、ESLint 10、Iconify 与 i18n 多语言。覆盖 Blog、Docs、AI SaaS Landing Page 等核心场景，支持响应式布局、暗黑模式、登录页与前端鉴权示例，兼顾快速起步与长期可维护性，支持 Vercel / Netlify 部署。
- [🚀 Live Demo 在线体验](https://nextjs-nextra.netlify.app/zh)
- [🤖 AI Demo 落地页](https://nextjs-nextra.netlify.app/zh/ai-demo)
- [✨ 备用地址1](https://nextjs-nextra-starter-green.vercel.app/zh)
- [✨ 备用地址2](https://nextra.likemashang.com/zh)
## 🧪 项目蒸馏 Skill
本仓库在 `.agents/skills/` 下提供了项目蒸馏 Skill，用于帮助后续二次开发者或其他项目快速理解本模板的架构、功能地图、实现模式、扩展点与迁移注意事项：
- [英文版 Skill](.agents/skills/nextjs-nextra-starter-distill/SKILL.md)
- [中文版 Skill](.agents/skills/nextjs-nextra-starter-distill-zh/SKILL.md)
如果你希望参考本项目开发类似产品，建议先阅读 [中文版 SKILL.md](.agents/skills/nextjs-nextra-starter-distill-zh/SKILL.md)，再按任务读取 [architecture.md](.agents/skills/nextjs-nextra-starter-distill-zh/references/architecture.md)、[feature-map.md](.agents/skills/nextjs-nextra-starter-distill-zh/references/feature-map.md)、[implementation-patterns.md](.agents/skills/nextjs-nextra-starter-distill-zh/references/implementation-patterns.md)、[extension-guide.md](.agents/skills/nextjs-nextra-starter-distill-zh/references/extension-guide.md) 或 [migration-notes.md](.agents/skills/nextjs-nextra-starter-distill-zh/references/migration-notes.md)。
## 🛠️ 项目维护承诺
<div align="center">
<table>
<tr>
<td><strong>🔄 持续更新</strong><br/>不定期更新依赖和功能</td>
<td><strong>🐛 快速响应</strong><br/>平均 2 小时内回复 Issue</td>
</tr>
<tr>
<td><strong>💎 精心打磨</strong><br/>花费 100+ 小时完善模板细节</td>
<td><strong>🛡️ 稳定可靠</strong><br/>确保每个功能都充分测试</td>
</tr>
</table>
</div>
<div align="center">
<img src="https://media.giphy.com/media/a5viI92PAF89q/giphy.gif" width="400" alt="感谢你读到这里"/>
💝 **如果你感受到了这份用心，请用 Star ⭐ 给予支持**
</div>
## 🚀 更新说明
- **Tailwind CSS v4 升级**：全面升级至 Tailwind CSS v4，优化性能并引入新特性。
- **Nextra v4 重构**：升级至 Nextra v4，提升文档生成效率和开发体验。
- **依赖版本更新**：同步升级 Next.js 16.3、React 19.3、TypeScript 6、ESLint 10、tsparticles v4 等依赖，并适配相关破坏性变更。
👉 [点击查看详细升级说明](https://nextjs-nextra.netlify.app/zh/upgrade)
## 🎉 Features
- ⚡️ **Next.js 16 + React 19 + TypeScript**：现代前端核心栈，类型安全与开发效率兼顾
- 🎨 **Tailwind CSS v4 + Sass**：支持原子化样式与工程化样式组织，快速构建响应式 UI
- 📚 **Nextra v4（内容驱动）**：适合文档站、知识库、博客等内容型项目
- 🧩 **Shadcn UI + Radix UI + Aceternity UI**：可组合、可扩展的组件体系，便于快速搭建产品页面
- 🌍 **i18n 多语言国际化**：中英文内容组织与路由支持，适配多语言产品站点
- 🌙 **暗黑模式 + 响应式设计**：覆盖桌面端与移动端体验，支持主题切换
- 🔐 **登录页与前端鉴权示例**：提供基础鉴权流程参考，便于业务快速接入
- 🖼️ **Iconify 图标集支持**：统一图标方案，降低图标接入成本
- 🛠️ **ESLint v10 规范化**：统一代码风格与质量约束，适合团队协作
- 🚀 **部署友好**：开箱支持 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)**
## 运行效果
## 安装和运行
- 安装依赖
```bash
pnpm i
```
- 本地开发
```bash
pnpm dev
```
接着用浏览器打开 http://localhost:8000 即可访问服务
🎉 **成功运行了？** 如果你喜欢这个模板的简洁配置，别忘了鼓励一下：
[](https://github.com/pdsuwwz/nextjs-nextra-starter)
## 使用 Shadcn UI 组件
本项目已集成 [Shadcn UI](https://ui.shadcn.com), 按照以下步骤安装/编辑组件并使用:
### Shadcn 结构初始化
首次执行 `pnpm dlx shadcn@latest init` 命令初始化 `Shadcn UI` 基本项目结构（如果尚未初始化）
> [!IMPORTANT]
> 该初始化命令用于创建 `Shadcn UI` 的基本项目结构
>
> **本项目已完成初始化，无需再次运行此命令**
### 组件安装
1. 使用 `Shadcn CLI` 添加组件:
```bash
pnpm dlx shadcn@latest add <组件名>
```
如添加 `<Alert />` 组件，执行以下命令即可，[详见文档](https://ui.shadcn.com/docs/components/alert#installation)
```bash
pnpm dlx shadcn@latest add alert
```
2. 使用组件
```tsx
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>
)
}
```
3. 自定义组件样式（可选）
`Shadcn UI` 组件通常已提供了流行的默认样式和功能，能满足大多数需求，若确实需要进行自定义定制，可编辑相应的组件文件，如：
打开 [`src/components/ui/alert.tsx`](src/components/ui/alert.tsx) 文件来修改 `Alert` 组件的样式
> 注意：在大多数情况下，`Shadcn UI` 提供的默认样式已经足够满足需求，无需进行额外修改
## 🐱 说句心里话
<div align="center">
如果你看到这里还没有点 Star, 那我只能说...
<img src="https://media.giphy.com/media/l0HlKrB02QY0f1mbm/giphy.gif" width="500" alt="求个 Star"/>
**求求了，给个 Star 吧！** 🥺👉👈
我的 Star 数量还不如我的 Bug 数量多 😭
<a href="https://github.com/pdsuwwz/nextjs-nextra-starter">
<img src="https://img.shields.io/badge/%E8%89%AF%E5%BF%83%E5%8F%91%E7%8E%B0-%E8%B5%8F%E4%B8%AAStar%20%E2%AD%90%EF%B8%8F%EF%B8%8F-orange?style=for-the-badge&logo=github&logoColor=white" alt="给个Star"/>
</a>
</div>
## 🌟 相关项目
以下是一些开发者和团队正在使用、参考或受本项目启发的项目：
| 项目名 | 简介 |
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| [ClaudeCode101 中文教程](https://www.claudecode101.com/zh) | 面向中文用户的 Claude Code AI 编程助手教程网站，汇集官方最佳实践与社区经验，助你高效掌握 AI 编程技能。 |
| [EdgeOne Saas 模板](https://github.com/TencentEdgeOne/saas-starter) | [腾讯云官方模板：助你快速构建并部署下一款 SaaS 应用](https://saas-starter-docs.edgeone.app/zh) |
| [Talking Web3](https://talkingweb3.io/zh) | 一个 Web3 项目出圈加速器，致力于打造卓越的Web3项目。 |
| [面试宝典](https://www.codecrack.cn/zh) | 一个免费且深入的八股文网站，帮助开发者提升技术能力并应对面试。 |
### 📢 社区贡献
💡 如果您的项目也在使用或借鉴了本项目，我们诚挚欢迎您：
- 通过提交 [Issue](https://github.com/pdsuwwz/nextjs-nextra-starter/issues) 分享您的项目链接
- 提交 Pull Request (PR) 将您的项目添加到列表中
## 🚨 免责声明
本模板作为技术方案参考提供，使用者需知悉以下风险及义务：
- **技术风险**：依赖框架（Next.js/Nextra/Tailwind CSS等）存在版本迭代风险，第三方组件（如 Shadcn UI）的行为规范以原始仓库为准，环境配置变更可能导致不可预见的构建异常
- **使用限制**：禁止用于违反开源协议或法律法规的场景，使用者需自行完成代码安全审查及生产环境验证
- **责任免除**：不承诺技术方案的业务适用性、安全性担保及定制支持，因使用/修改引发的直接或间接后果均由使用者自行承担
## License
[MIT](./LICENSE) License | Copyright © 2020-PRESENT [Wisdom](https://github.com/pdsuwwz)
看看同类模板
对比同技术栈与用途的模板，找到更适合的视觉与内容结构。
ai-website-cloner-template
Clone any website with one command using AI coding agents
Next.js · 启动器
Next.js SaaS Starter
Next.js SaaS Starter 是 Next.js 官方维护的 SaaS 起点模板，定位介于学习资源和可直接部署的脚手架之间。
Next.js · SaaS
Next.js Commerce
Next.js Commerce 是 Vercel 团队维护的电商启动模板，基于 Next.js App Router 构建，采用服务端渲染、React Server Components、Server Actions …
Next.js · 电商
Next-js-Boilerplate
Next-js-Boilerplate 是一个面向 Next.js 16、Tailwind CSS 4 和 TypeScript 的启动器，核心定位是开发者体验优先。
Next.js · 启动器
tailwind-nextjs-starter-blog
tailwind-nextjs-starter-blog 是一个面向个人技术博客的 Next.js 与 Tailwind CSS 启动模板，其 v2 版本基于 App Router 与 React Server Comp…
Next.js · 博客
next-forge
Production-grade Turborepo template for Next.js apps.
Next.js · 启动器