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

查看命令的擴展包存儲庫

應用路由器更新

由於應用程序路由器更新，該擴展包當前已過時。將來會更新。您仍然可以通過複製和粘貼文件來使用它們。