Next.js 入门模板
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
您好，
我创建了一个 Next.js 的入门模板，其中也包含了 TypeScript、Tailwind 和 shadcn/ui。我之前已经在这里写过相关内容，但我又添加了一些新功能，例如：Next-auth、Prisma、React-hook-form 和 T3-env。
如果您喜欢这个项目，请给我点个赞🌟
https://github.com/Skolaczk/next-starter
概述
这是一个 Next.js 入门模板，功能丰富，包含 TypeScript、Tailwind CSS、Next-auth、Eslint、测试工具等众多特性。助您高效、时尚地启动项目。
🎉 功能
- 🚀 Next.js 14（应用路由）
- ⚛️ React 18
- 📘 Typescript
- 🎨 TailwindCSS - 类排序、合并和代码检查
- 🛠️ Shadcn/ui - 可定制的 UI 组件
- 🔒 Next-auth - 适用于 Next.js 的简易身份验证库（GitHub 提供商）
- 💵 Stripe - 支付处理程序
- 🛡️ Prisma - Node.js 的 ORM
- 📋 React-hook-form - 轻松高效地管理表单
- 🔍 Zod - 模式验证库
- 🧪 Jest & React 测试库 - 已配置用于单元测试
- 🎭 Playwright - 已配置为端到端测试
- 📈 绝对路径导入和路径别名 - 使用
@/前缀导入组件 - 💅 Prettier - 代码格式化工具
- 🧹 ESLint - 代码检查工具
- 🐶 Husky & Lint Staged - 在暂存文件提交之前对其运行脚本
- 🔹 图标 - 来自 Lucide
- 🌑 深色模式 - 搭配 Next 主题
- 🗺️ 网站地图和 robots.txt - 包含下一个网站地图
- 📝 Commitlint - 检查你的 Git 提交
- 🤖 GitHub Actions - 在 PR 时检查代码
- ⚙️ T3-env - 管理您的环境变量
- 💯 完美灯塔评分
- 🌐 I18n 带滑翔伞
🚀 部署
点击下方按钮，即可使用Vercel轻松部署您的 Next.js 应用：
🎯 开始
1. 可通过以下三种方式之一克隆此模板。
- 使用此存储库作为模板
- 使用
create-next-app
npx create-next-app -e https://github.com/Skolaczk/next-starter my-project-name
- 使用
git clone
git clone https://github.com/Skolaczk/next-starter my-project-name
2. 安装依赖项
npm install
3. 设置环境变量
创建.env文件并从文件中设置环境变量.env.example。
4. 准备哈士奇
如果你想让哈士奇工作，这是必须的。
npm run prepare
5. 运行开发服务器
您可以使用以下命令启动服务器：
npm run dev
打开http://localhost:3000/即可查看此应用。
⚙️ 脚本概览
以下脚本可在以下位置找到package.json：
dev运行开发服务器build构建应用程序start运行生产服务器preview一起运行build和start命令lint使用 ESLint 检查代码lint:fix修复代码检查错误format:check检查代码格式是否正确format:write修复格式问题typecheck：在不生成文件的情况下进行 TypeScript 类型检查test运行单元测试test:watch以监视模式运行单元测试e2e运行端到端测试e2e:ui使用用户界面运行端到端测试。postbuild生成站点地图prepare安装 Husky 来管理 Git 钩子
🤝 贡献
如需捐款，请按以下步骤操作：
- fork 该仓库。
- 创建一个新分支。
- 做出更改并提交。
- 将你的更改推送到 fork 的仓库。
- 创建拉取请求。
❤️支持
如果你喜欢这个项目，请给我一颗星，我会非常感激的。🌟😊
文章来源：https://dev.to/skolaczk/nextjs-starter-template-3b1o