ts nextjs tailwind starter

next.js + tailwind CSS +打字稿入门和样板

？ TS-Nextjs-Tailwind-Starter

Next.js +尾风CSS +打字稿启动器包含有用的开发功能。

由Theodorus Clarence制作

特征

这个存储库是？电池包装：

• ⚡️下一条。
• ⚛️反应18
• 打字稿
• ？尾风CSS 3 - 配置了CSS变量以扩展主要颜色
• ？预先构建的组件 - 将自动适应您的品牌颜色的组件，请在此处查看演示
• ？开玩笑 - 配置用于单元测试
• ？绝对导入和路径别名 - 使用@/ prefix导入组件
• ？ ESLINT - 在您的代码中找到并解决问题，也将自动对导入进行分类
• ？更漂亮 - 始终格式化代码
• ？ Husky＆Lint上演 - 在您分阶段的文件上运行脚本
• ？常规提交棉绒 - 确保您和您的队友遵循常规犯罪
• ⏰请发行 - 通过激活释放release-please工作流来生成变形值
• ？ github动作 - 在PR上的代码。
• ？自动分支和问题自动链接 - 分支将自动创建在问题上，并在PR上链接自动
• 片段 - 有用的摘要集
• ？打开的图形辅助功能 - 使用OG，叉子和部署生成的真棒打开图！
• ？站点地图 - 自动生成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 ，以便沙哑的钩子可以正常工作。

pnpm install

3。运行开发服务器

您可以使用此命令启动服务器：

pnpm dev

打开http：// localhost：3000使用浏览器查看结果。您可以通过修改src/pages/index.tsx开始编辑页面。

4。更改默认值

您需要更改一些内容，包括标题，URL，Favicons等。

查找所有评论！starterConf，然后遵循指南。

不要忘记更改package.json中的软件包名称

5。提交消息惯例

该起动器使用常规提交，必须使用它来进行更改。

使用TS-Nextjs-Tailwind-Starter的项目

• theodorusclarence.com（来源）
• notiolink（来源）
• NextJS + Materia UI +打字稿

您正在使用此入门机吗？请通过拉动请求将您的页面（和回购）添加到列表的末尾。 ？

扩展包？

该起动器现在配备了扩展包。

您可以轻松地添加扩展，例如使用单个命令行，例如React Hook Form +组件，故事书等。

CleanShot.2021-12-04.AT.18.54.07-Trimmed.mp4

查看命令的扩展包存储库

应用路由器更新

由于应用程序路由器更新，该扩展包当前已过时。将来会更新。您仍然可以通过复制和粘贴文件来使用它们。