typescript nextjs starter

Next.js的未開放的打字稿啟動器

具有最佳DX的高度可擴展基礎。您需要建立下一個項目所需的所有工具。

_{由JoãoPedro在許多出色貢獻者的幫助下創建。}

特徵

• ⚡️ANCEN.JS15（應用程序路由器）
• ⚛️反應19
• ⛑打字稿
• ？ ESLINT 9 - 在您的代碼中找到並解決問題
• ？更漂亮 - 一致樣式的代碼格式
• ？沙啞 - 在進行腳本之前運行腳本
• ？提交 - 確保您的提交消息遵循公約
• ？翻新 - 保持依賴關係的最新
• 絨毛階段 - 在上演的git文件上運行Eslint和Prettier
• ？ PR工作流程 - 在拉請請求上運行類型檢查和襯裡
• EditorConfig-編輯和IDE的一致編碼樣式
• ？路徑映射 - 使用@前綴導入組件或圖像
• ？ CSP - 增強安全性的內容安全策略（默認最小策略）
• ？ T3 Env-類型安全環境變量
• ？重定向 - 輕鬆將重定向添加到您的應用程序

快速開始

從此模板開始的最佳方法是使用Create Next應用程序。

 # pnpm
pnpm create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# yarn
yarn create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# npm
npx create-next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter

發展

要在本地啟動該項目，請運行：

pnpm dev

打開http://localhost:3000使用瀏覽器查看結果。

推薦

“該起動器是迄今為止Next的最佳打字稿入門者。
- Arafat Zahan

“我真的可以推薦下一個。JS打字稿入門倉庫，作為您未來下一步的堅實基礎。JS項目。”
- 科菲茨

“出色的工作！”
- Soham Dasgupta

展示櫃

從Next.js打字稿入門開始的網站列表：

• freeinvoice.dev
• 概念化身製造商
• 宜家低價
• hygraph.com
• Rocketseat.com.br
• vagaschapeco.com
• fufork.vercel.app
• cryptools.dev
• 添加你的

文件

要求

• node.js> = 20
• PNPM 9

目錄結構

• .github - GitHub配置，包括CI工作流程。
  
• .husky - 沙啞的配置和鉤子。
  
• public - 靜態資產，例如Robots.txt，Images和Favicon。
  
• src - 應用程序源代碼，包括頁面，組件，樣式。

腳本

• pnpm dev - 在http://localhost:3000處以開發模式啟動應用程序。
• pnpm build - 為您的應用程序創建優化的生產構建。
• pnpm start - 以生產模式啟動應用程序。
• pnpm type-check - 使用打字稿編譯器驗證代碼。
• pnpm lint - 為src目錄中的所有文件運行ESLINT。
• pnpm lint:fix運行src目錄中所有文件的ESLINT修復。
• pnpm format - 用於src目錄中所有文件的更漂亮。
• pnpm format:check - 檢查需要格式格式的文件清單。
• pnpm format:ci - 更漂亮的CI檢查。

路徑映射

TypeScript與自定義路徑映射預先配置。要導入組件或文件，請使用@前綴。

 import { Button } from '@/components/Button' ;
// To import images or other files from the public folder
import avatar from '@/public/avatar.png' ;

切換到紗線/NPM

默認情況下，此啟動器使用PNPM，但此選擇是您的。如果您想切換到YARN/NPM，請刪除pnpm-lock.yaml文件，使用YARN/NPM安裝依賴項，更改CI工作流，然後使用Husky Git Hooks使用YARN/NPM命令。

注意：如果使用紗線，請確保從沙啞的文檔中遵循以下步驟，以便windows上的紗線不會失敗。

環境變量

我們使用T3 Env來管理環境變量。在項目的根部創建.env.local文件，並在此處添加您的環境變量。

添加其他環境變量時， ./src/lib/env/server.ts相應./src/lib/env/client.ts更新。

重定向

要添加重定向，請在./redirects.ts中更新redirects數組。它是輸入的，因此您將獲得屬性的自動完成。

CSP（內容安全策略）

內容安全策略（CSP）是一個安全層，有助於檢測和減輕某些類型的攻擊，包括跨站點腳本（XSS）和數據注入攻擊。 CSP在next.config.ts文件中實現。

它包含一個默認和最小策略，您可以自定義以滿足您的應用程序需求。這是一個基礎。

執照

該項目已根據MIT許可證獲得許可 - 有關更多信息，請參見許可證文件。