Skip to content

pdsuwwz/nextjs-nextra-starter

Repository files navigation

color mode

Nextjs Nextra Starter

中文 | English

Deploy GitHub Workflow Status (branch) thanks License

🔥 面向独立开发者与小团队的 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+ 小时完善模板细节
🛡️ 稳定可靠
确保每个功能都充分测试

💝 如果你感受到了这份用心,请用 Star ⭐ 给予支持

🚀 更新说明

  • Tailwind CSS v4 升级:全面升级至 Tailwind CSS v4,优化性能并引入新特性。
  • Nextra v4 重构:升级至 Nextra v4,提升文档生成效率和开发体验。

👉 点击查看详细升级说明

🎉 Features

  • ⚡️ 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)

运行效果

image

image

image

image

image

安装和运行

  • 安装依赖
pnpm i
  • 本地开发
pnpm dev

接着用浏览器打开 http://localhost:8000 即可访问服务

🎉 成功运行了? 如果你喜欢这个模板的简洁配置,别忘了鼓励一下:

Star this repo

使用 Shadcn UI 组件

本项目已集成 Shadcn UI, 按照以下步骤安装/编辑组件并使用:

Shadcn 结构初始化

首次执行 pnpm dlx shadcn@latest init 命令初始化 Shadcn UI 基本项目结构(如果尚未初始化)

[!IMPORTANT]

该初始化命令用于创建 Shadcn UI 的基本项目结构

本项目已完成初始化,无需再次运行此命令

组件安装

  1. 使用 Shadcn CLI 添加组件:

    pnpm dlx shadcn@latest add <组件名>

    如添加 <Alert /> 组件,执行以下命令即可,详见文档

    pnpm dlx shadcn@latest add alert
  2. 使用组件

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>
  )
}
  1. 自定义组件样式(可选)

Shadcn UI 组件通常已提供了流行的默认样式和功能,能满足大多数需求,若确实需要进行自定义定制,可编辑相应的组件文件,如:

打开 src/components/ui/alert.tsx 文件来修改 Alert 组件的样式

注意:在大多数情况下,Shadcn UI 提供的默认样式已经足够满足需求,无需进行额外修改

🐱 说句心里话

如果你看到这里还没有点 Star, 那我只能说...

求求了,给个 Star 吧! 🥺👉👈

我的 Star 数量还不如我的 Bug 数量多 😭

给个Star

🌟 相关项目

以下是一些开发者和团队正在使用、参考或受本项目启发的项目:

项目名 简介
ClaudeCode101 中文教程 面向中文用户的 Claude Code AI 编程助手教程网站,汇集官方最佳实践与社区经验,助你高效掌握 AI 编程技能。
EdgeOne Saas 模板 腾讯云官方模板:助你快速构建并部署下一款 SaaS 应用
Talking Web3 一个 Web3 项目出圈加速器,致力于打造卓越的Web3项目。
面试宝典 一个免费且深入的八股文网站,帮助开发者提升技术能力并应对面试。

📢 社区贡献

💡 如果您的项目也在使用或借鉴了本项目,我们诚挚欢迎您:

  • 通过提交 Issue 分享您的项目链接
  • 提交 Pull Request (PR) 将您的项目添加到列表中

🚨 免责声明

本模板作为技术方案参考提供,使用者需知悉以下风险及义务:

  • 技术风险:依赖框架(Next.js/Nextra/Tailwind CSS等)存在版本迭代风险,第三方组件(如 Shadcn UI)的行为规范以原始仓库为准,环境配置变更可能导致不可预见的构建异常
  • 使用限制:禁止用于违反开源协议或法律法规的场景,使用者需自行完成代码安全审查及生产环境验证
  • 责任免除:不承诺技术方案的业务适用性、安全性担保及定制支持,因使用/修改引发的直接或间接后果均由使用者自行承担

License

MIT License | Copyright © 2020-PRESENT Wisdom

About

🔥 面向独立开发者与小团队的 Next.js (v16) 快速启动模板: 集成 Tailwind CSS (v4)、React (v19)、Nextra (v4)、TypeScript、Shadcn UI、Radix UI、Aceternity UI、Sass、ESLint (v9)、Iconify 与 i18n 多语言。覆盖个人博客、技术文档、产品官网与 AI 落地页等核心场景,提供响应式设计、暗黑模式和鉴权示例代码,开箱即用、工程化完善, Deployed on Netlify and Vercel.

Topics

Resources

License

Stars

Watchers

Forks

Contributors