访问官网
Github
文档Next.js + Tailwind CSS + TypeScript 入门模板和样板
🔋 ts-nextjs-tailwind-starter
Next.js + Tailwind CSS + TypeScript 入门模板，集成了多种实用的开发功能。
由 Theodorus Clarence 制作
功能特性
这个仓库包含以下功能：
- ⚡️ Next.js 14 使用 App Router
- ⚛️ React 18
- ✨ TypeScript
- 💨 Tailwind CSS 3 — 配置了 CSS 变量以扩展主要颜色
- 💎 预构建组件 — 能够自动适应您的品牌颜色的组件，点击此处查看演示
- 🃏 Jest — 配置用于单元测试
- 📈 绝对导入和路径别名 — 使用
@/前缀导入组件 - 📏 ESLint — 查找并修复代码中的问题，还会自动排序您的导入
- 💖 Prettier — 保持代码格式的一致性
- 🐶 Husky & Lint Staged — 在提交之前对暂存文件运行脚本
- 🤖 约定式提交规范 — 确保您和您的团队遵循约定式提交
- ⏰ Release Please — 通过激活
release-please工作流生成更新日志 - 👷 Github Actions — 在 PR 上检查代码
- 🚘 自动分支和问题自动链接 — 在问题分配时自动创建分支，并在 PR 中自动链接
- 🔥 代码片段 — 实用代码片段集合
- 👀 Open Graph 辅助函数 — 使用 og 生成出色的 Open Graph，可以 fork 并部署！
- 🗺 站点地图 — 自动生成 sitemap.xml
- 📦 扩展包 — 轻松安装常用库、额外组件和配置。
查看 👉 功能详情和更新日志 👈 了解更多信息。
您还可以查看我博客文章中的所有详细信息和演示：
开始使用
1. 使用以下三种方式之一克隆此模板
-
将此仓库用作模板
**声明：**使用此仓库作为模板会在您的仓库中添加引用。
如果您这样做，我将不胜感激，这样其他人也能了解到这个模板 😄
-
使用
create-next-apppnpm create next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter ts-pnpm如果您仍想使用页面目录（不再积极维护），可以使用以下命令
npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/tree/pages-directory project-name -
使用
degitnpx degit theodorusclarence/ts-nextjs-tailwind-starter YOUR_APP_NAME -
部署到 Vercel
2. 安装依赖
建议使用 pnpm，以确保 husky 钩子能正常工作。
pnpm install
3. 运行开发服务器
您可以使用以下命令启动服务器：
pnpm dev
在浏览器中打开 http://localhost:3000 查看结果。您可以通过修改 src/pages/index.tsx 开始编辑页面。
4. 更改默认设置
有一些需要更改的内容，包括标题、URL、favicon 等。
找到所有带有 !STARTERCONF 的注释，然后按照指南进行操作。
别忘了更改 package.json 中的包名。
5. 提交信息约定
这个入门模板使用约定式提交，提交更改时必须遵循这个规范。
使用 ts-nextjs-tailwind-starter 的项目
您是否正在使用这个入门模板？请通过 Pull Request 将您的页面（和仓库）添加到列表末尾。😃
扩展包 📦
这个入门模板现在配备了扩展包。
您可以轻松地添加扩展，如 React Hook Form + 组件、Storybook 等，只需使用一个命令行即可。
查看扩展包仓库了解相关命令
App Router 更新
由于 App Router 更新，扩展包目前已过时。未来将会更新。您仍然可以通过复制和粘贴文件来使用它们。
