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]与您联系！
