Next js Boilerplate
v3.60.5
Boilerplate and Starter for Next.js with App Router, Tailwind CSS, and TypeScript ⚡️ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Playwright, Commitlint, VSCode, Tailwind CSS, Authentication with Clerk, Database with DrizzleORM (PostgreSQL, SQLite和MySQL），使用Sentry進行錯誤監視，使用Pino.js和日誌管理登錄，作為代碼，故事書，多語言（I18N）的監視，使用ARCJET（bot檢測，速率限制，攻擊保護等），以及更多。
克隆這個項目，並使用它來創建您自己的下一個項目。您可以在Next.js樣板上查看實時演示，其中包括一個工作的身份驗證系統。
 |  |   |
 |  | |
 |  | |
| 在這裡添加您的徽標 |
現場演示：Next.js樣板
| 報名 | 登入 |
|---|---|
 | |
開發人員首先體驗，非常靈活的代碼結構，只保留您需要的東西：
@ prefix的絕對導入Next.js的內置功能：
在您的本地環境上運行以下命令：
git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name
cd my-project-name
npm install有關您的信息，所有依賴項每月都會更新。
然後，您可以通過執行：通過實時重新加載在開發模式下本地運行該項目：
npm run dev打開http：// localhost：3000帶有您喜歡的瀏覽器以查看您的項目。
首先，您需要在clerk.com上創建一個文員帳戶，並在店員儀表板上創建一個新應用程序。完成此操作後，複製NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY和CLERK_SECRET_KEY值，然後將它們添加到.env.local文件中（git不跟踪）：
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key現在，您擁有一個功能齊全的身份驗證系統，其中包括Next.js，包括註冊，登錄，登錄，忘記密碼，重置密碼，更新配置文件，更新密碼，更新電子郵件，刪除帳戶等。
該項目使用Drizzleorm，這是一種與PostgreSQL，SQLITE和MYSQL數據庫兼容的類型保護ORM。默認情況下，該項目配置為與PostgreSQL無縫合作，並且您可以靈活地選擇您選擇的任何PostgreSQL數據庫提供商。
為了翻譯，該項目使用了next-intl與Crowdin結合在一起。作為開發人員，您只需要照顧英語（或其他默認語言）版本即可。其他語言的翻譯自動由Crowdin生成和處理。您可以使用Crowdin與您的翻譯團隊合作，也可以在機器翻譯的幫助下自己翻譯消息。
要設置翻譯（I18N），請在Crowdin.com上創建一個帳戶並創建一個新項目。在新創建的項目中，您將能夠找到項目ID。您還需要通過進入帳戶設置> API來創建一個新的個人訪問令牌。然後，在您的github操作中，您需要定義以下環境變量： CROWDIN_PROJECT_ID和CROWDIN_PERSONAL_TOKEN 。
在github操作中定義環境變量後，每當您將新提交推向main分支時，您的本地化文件都會與Crowdin同步。
.
├── README.md # README file
├── .github # GitHub folder
├── .husky # Husky configuration
├── .storybook # Storybook folder
├── .vscode # VSCode configuration
├── migrations # Database migrations
├── public # Public assets folder
├── src
│ ├── app # Next JS App (App Router)
│ ├── components # React components
│ ├── libs # 3rd party libraries configuration
│ ├── locales # Locales folder (i18n messages)
│ ├── models # Database models
│ ├── styles # Styles folder
│ ├── templates # Templates folder
│ ├── types # Type definitions
│ ├── utils # Utilities folder
│ └── validations # Validation schemas
├── tests
│ ├── e2e # E2E tests, also includes Monitoring as Code
│ └── integration # Integration tests
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration您可以通過搜索整個項目以獲取FIXME:快速自定義來輕鬆配置下一個JS樣板。這是一些要自定義的最重要的文件：
public/apple-touch-icon.png ， public/favicon.ico ， public/favicon-16x16.png和public/favicon-32x32.png ：您的網站faviconsrc/utils/AppConfig.ts ：配置文件src/templates/BaseTemplate.tsx ：默認主題next.config.mjs ：next.js配置.env ：默認環境變量您可以完全訪問源代碼以進行進一步自定義。提供的代碼只是一個示例，可以幫助您啟動項目。天空是極限。
要修改項目中的數據庫架構，您可以更新位於./src/models/Schema.ts的架構文件。該文件使用毛毛雨ORM庫定義數據庫表的結構。
更改模式後，通過運行以下命令來生成遷移：
npm run db:generate這將創建一個反映您的模式更改的遷移文件。遷移將在下一個數據庫交互期間自動應用，因此無需手動運行它或重新啟動下一個服務器。
該項目遵循常規提交規範，這意味著所有提交消息都必須相應地格式化。為了幫助您編寫提交消息，該項目使用Commitizen，這是一種交互式CLI，可指導您完成提交過程。要使用它，請運行以下命令：
npm run commit使用常規提交的好處之一是能夠自動生成CHANGELOG文件的能力。它還允許我們根據發行版中包含的提交類型自動確定下一個版本號。
所有單元測試均與同一目錄中的源代碼旁邊放置，使它們更易於查找。該項目使用vitest和React測試庫進行單位測試。您可以使用以下命令運行測試：
npm run test該項目使用劇作家進行集成和端到端（E2E）測試。您可以使用以下命令運行測試：
npx playwright install # Only for the first time in a new environment
npm run test:e2e在本地環境中，視覺測試被禁用，終端將顯示消息[percy] Percy is not running, disabling snapshots. 。默認情況下，視覺測試僅在github動作中運行。
應用程序路由器文件夾與邊緣運行時兼容。您可以通過添加以下行src/app/layouts.tsx來啟用它：
export const runtime = 'edge' ;為了獲得您的信息，數據庫遷移與邊緣運行時不兼容。因此，您需要禁用src/libs/DB.ts中的自動遷移：
await migrate ( db , { migrationsFolder : './migrations' } ) ;禁用它後，您必須手動運行遷移：
npm run db:migrate您還需要每次要更新數據庫架構時運行命令。
在構建過程中，數據庫遷移將自動執行，因此無需手動運行它們。但是，您必須在環境變量中定義DATABASE_URL 。
然後，您可以使用以下方式生成生產構建：
$ npm run build它生成了樣板的優化生產構建。要測試生成的構建，請運行：
$ npm run start您還需要使用自己的密鑰來定義環境變量CLERK_SECRET_KEY 。
此命令使用生產構建啟動本地服務器。現在，您可以在首選瀏覽器中打開http：// localhost：3000以查看結果。
該項目使用Sentry監視錯誤。在開發環境中，不需要其他設置：Next.js樣板預先配置以使用Sentry和Spotlight（Sentry用於開發）。所有錯誤都會自動發送到您當地的聚光燈實例，從而使您可以在本地體驗哨兵。
對於生產環境，您需要創建一個哨兵帳戶和一個新項目。然後，在next.config.mjs中，您需要在withSentryConfig函數中更新org和project屬性。此外，將您的哨兵DSN添加到sentry.client.config.ts ， sentry.edge.config.ts和sentry.server.config.ts 。
Next.js樣板依靠CodeCov來用於代碼覆蓋範圍報告解決方案。要啟用Codecov，請創建一個Codecov帳戶，然後將其連接到您的GitHub帳戶。您的存儲庫應出現在Codecov儀表板上。選擇所需的存儲庫並複制令牌。在github操作中，定義CODECOV_TOKEN環境變量並粘貼令牌。
確保將CODECOV_TOKEN作為github動作秘密創建，不要將其直接粘貼到源代碼中。
該項目使用pino.js進行記錄。在開發環境中，默認情況下，日誌顯示在控制台中。
對於生產，該項目已經與更好的堆棧集成在一起，可以使用SQL來管理和查詢日誌。要使用更好的堆棧，您需要創建一個更好的堆棧帳戶並創建一個新來源：轉到更好的堆棧日誌儀表板> sources> Connect source。然後，您需要給源名稱，然後選擇Node.js作為平台。
創建源後，您將能夠查看和復制源代幣。在您的環境變量中，將令牌粘貼到LOGTAIL_SOURCE_TOKEN變量中。現在，所有日誌都將自動發送到更好的堆棧並攝入並攝入。
該項目使用Checkly來確保您的生產環境始終啟動並運行。定期進行檢查，以*.check.e2e.ts擴展結束的測試，並通知您是否有任何測試失敗。此外，您可以靈活地從多個位置執行測試，以確保您的應用程序在全球範圍內可用。
要使用Checkly，您必須首先在其網站上創建一個帳戶。創建帳戶後，在Checkly儀表板中生成新的API密鑰，並在GitHub操作中設置CHECKLY_API_KEY環境變量。此外，您將需要定義CHECKLY_ACCOUNT_ID ，也可以在用戶設置>一般的Checkly儀表板中找到。
要完成設置，請使用您自己的電子郵件地址和生產URL更新checkly.config.ts文件。
該項目使用Arcjet，這是一種安全產品，其中包含幾個可以單獨使用或合併以為您的網站提供防禦的功能。
要設置Arcjet，請創建一個免費帳戶並獲取您的API密鑰。然後將其添加到ARCJET_KEY環境變量中。
Arcjet配置了兩個主要功能：Bot檢測和Arcjet Shield WAF：
ARCJET在包括Shield WAF規則的src/libs/Arcjet.ts上配置了中央客戶端。基於頁麵類型中的src/app/[locale]/layout.tsx中配置了其他規則。
Next.js樣板包括一個內置捆綁分析儀。它可用於分析JavaScript束的大小。首先，運行以下命令：
npm run build-stats通過運行命令，它將自動打開帶有結果的新瀏覽器窗口。
該項目已經配置為Drizzle Studio來探索數據庫。您可以運行以下命令打開數據庫工作室：
npm run db:studio然後，您可以使用您喜歡的瀏覽器打開https://local.drizzle.studio，以探索您的數據庫。
如果您是VSCODE用戶，則可以通過在.vscode/extension.json中安裝建議的擴展名來與VSCODE更好地集成。入門代碼提供了與VSCODE無縫集成的設置。還為前端和後端調試體驗提供了調試配置。
在您的VSCODE中安裝插件後，Eslint和Prettier可以自動修復代碼並顯示錯誤。測試也是如此：您可以安裝VSCODE VITEST擴展名來自動運行測試，並且還顯示了上下文中的代碼覆蓋率。
專業提示：如果您需要使用Typescript進行項目寬型檢查，則可以在Mac上運行CMD + Shift + B的構建。
歡迎每個人為這個項目做出貢獻。如果您有任何疑問或找到錯誤，請隨時打開問題。完全接受建議和改進。
根據MIT許可許可，版權所有©2024
有關更多信息，請參見許可證。
| | |
| | |
| | |
| 在這裡添加您的徽標 |
由CreativedSignsguru製成的
尋找定制的樣板來啟動您的項目嗎？我很高興討論如何幫助您建造一個。請隨時通過[email protected]與您聯繫！
