Next.js + Tailwind CSS + TypeScript 入门模板和样板

<div align="center"> <h2>🔋 ts-nextjs-tailwind-starter</h2> <p>Next.js + Tailwind CSS + TypeScript 入门模板，集成了多种实用的开发功能。</p> <p>由 <a href="https://theodorusclarence.com">Theodorus Clarence</a> 制作</p>

</div>

功能特性

这个仓库包含以下功能：

• ⚡️ 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
• 📦 扩展包 — 轻松安装常用库、额外组件和配置。

查看 👉 功能详情和更新日志 👈 了解更多信息。

您还可以查看我博客文章中的所有详细信息和演示：

• Next.js 和 Tailwind CSS 项目的一站式入门模板，最大化效率

开始使用

1. 使用以下三种方式之一克隆此模板

1. 将此仓库用作模板

   **声明：**使用此仓库作为模板会在您的仓库中添加引用。

   如果您这样做，我将不胜感激，这样其他人也能了解到这个模板 😄

   

2. 使用 create-next-app

   pnpm 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

3. 使用 degit

   npx degit theodorusclarence/ts-nextjs-tailwind-starter YOUR_APP_NAME

4. 部署到 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 的项目

<!-- 模板 - [网站名称](https://网站链接.com) ([源代码](https://github.com/github链接)) - [网站名称](https://网站链接.com) -->

• theodorusclarence.com (源代码)
• Notiolink (源代码)
• NextJs + Materia UI + Typescript

您是否正在使用这个入门模板？请通过 Pull Request 将您的页面（和仓库）添加到列表末尾。😃

扩展包 📦

这个入门模板现在配备了扩展包。

您可以轻松地添加扩展，如 React Hook Form + 组件、Storybook 等，只需使用一个命令行即可。

https://user-images.githubusercontent.com/55318172/146631994-e1cac137-1664-4cfe-950b-a96decc1eaa6.mp4

查看扩展包仓库了解相关命令

App Router 更新

由于 App Router 更新，扩展包目前已过时。未来将会更新。您仍然可以通过复制和粘贴文件来使用它们。