Next js Boilerplate
v3.60.5
アプリルーター、テールウィンドCSS、タイプスクリプトを備えたnext.jsのボイラープレートとスターター最初に開発者エクスペリエンスの優先順位付け：next.js、typescript、eslint、eslint、frittier、husky、lint stage、vitest（jest）、テストライブラリ、劇作家、コミットリント、vscode、tailwind css、cs（ SQLite、およびMySQL）、Sentryによるエラーモニタリング、Pino.jsおよびログ管理でのロギング、コードとしての監視、ストーリーブック、マルチ言語（I18N）、ArcJet（ボット検出、レート制限、攻撃保護など）などの安全。
このプロジェクトをクローンし、それを使用して独自のnext.jsプロジェクトを作成します。 Working Authentication Systemを含むnext.jsボイラープレートでライブデモを確認できます。
 |  |   |
 |  | |
 |  | |
| ここにロゴを追加します |
ライブデモ：next.jsボイラープレート
| サインアップ | サインイン |
|---|---|
 | |
開発者は最初に体験し、非常に柔軟なコード構造を体験し、必要なもののみを保持します。
@プレフィックスを使用した絶対インポート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でClerkアカウントを作成し、Clerk Dashboardに新しいアプリケーションを作成する必要があります。それを行ったら、 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を備えた完全に機能的な認証システムができました。
このプロジェクトでは、PostgreSQL、SQLite、およびMySQLデータベースと互換性のあるタイプセーフORMであるDrizzLeormを使用します。デフォルトでは、プロジェクトはPostgreSQLでシームレスに動作するように構成されており、選択したPostgreSQLデータベースプロバイダーを選択する柔軟性があります。
翻訳のために、プロジェクトはCrowdinと組み合わせたnext-intlを使用します。開発者として、英語（または別のデフォルト言語）バージョンの世話をするだけです。他の言語の翻訳は自動的に生成され、Crowdinによって処理されます。 Crowdinを使用して翻訳チームと協力したり、機械翻訳の助けを借りてメッセージを自分で翻訳することができます。
翻訳（i18n）を設定するには、creadinin.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 configurationFIXME:次のJSボイラープレートを簡単に構成できます。カスタマイズする最も重要なファイルの一部は次のとおりです。
public/apple-touch-icon.png 、 public/favicon.ico 、 public/favicon-16x16.png and public/favicon-32x32.png ：あなたのウェブサイトFaviconsrc/utils/AppConfig.ts ：構成ファイルsrc/templates/BaseTemplate.tsx ：デフォルトテーマnext.config.mjs ：next.js構成.env ：デフォルトの環境変数さらにカスタマイズするために、ソースコードに完全にアクセスできます。提供されたコードは、プロジェクトを開始するのに役立つ例です。空は限界です。
プロジェクトのデータベーススキーマを変更するには、 ./src/models/Schema.ts schema.tsにあるスキーマファイルを更新できます。このファイルは、Drizzle ORMライブラリを使用してデータベーステーブルの構造を定義します。
スキーマを変更した後、次のコマンドを実行して移行を生成します。
npm run db:generateこれにより、スキーマの変更を反映する移行ファイルが作成されます。移行は次のデータベースインタラクション中に自動的に適用されるため、手動で実行したり、next.jsサーバーを再起動する必要はありません。
このプロジェクトは、従来のコミットの仕様に従い、それに応じてすべてのコミットメッセージをフォーマットする必要があります。コミットメッセージを書くのに役立つために、プロジェクトはコミットプロセスをガイドするインタラクティブCLIであるCommitizenを使用します。それを使用するには、次のコマンドを実行します。
npm run commit従来のコミットを使用する利点の1つは、 CHANGELOGファイルを自動的に生成する機能です。また、リリースに含まれるコミットの種類に基づいて、次のバージョン番号を自動的に決定することができます。
すべてのユニットテストは、同じディレクトリのソースコードと並んで配置されているため、見つけやすくなります。このプロジェクトでは、ユニットテストにVitestおよびReactテストライブラリを使用しています。次のコマンドでテストを実行できます。
npm run testこのプロジェクトでは、Playwrightを統合とエンドツーエンド（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を追加することで有効にできます。TSX：
export const runtime = 'edge' ;あなたの情報については、データベースの移行は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を開いて、結果を確認してください。
このプロジェクトは、セントリーを使用してエラーを監視しています。開発環境では、追加のセットアップは必要ありません。NEXT.JSボイラープレートは、SentryとSpotlight（開発のためのSentry）を使用するために事前に構成されています。すべてのエラーは自動的にローカルスポットライトインスタンスに送信され、セントリーをローカルで体験できます。
生産環境のために、Sentryアカウントと新しいプロジェクトを作成する必要があります。次に、 next.config.mjsでは、 withSentryConfig関数のorg属性とproject属性を更新する必要があります。さらに、sentry dsnをsentry.client.config.ts 、 sentry.edge.config.ts and sentry.server.config.tsに追加します。
Next.JSボイラープレートは、コードカバレッジレポートソリューションについてCodeCovに依存しています。 Codecovを有効にするには、CodeCovアカウントを作成してGitHubアカウントに接続します。リポジトリはCodecovダッシュボードに表示されます。目的のリポジトリを選択し、トークンをコピーします。 GitHubアクションでは、 CODECOV_TOKEN環境変数を定義し、トークンを貼り付けます。
CODECOV_TOKEN githubアクションの秘密として作成してください。ソースコードに直接貼り付けないでください。
このプロジェクトでは、ロギングにPino.jsを使用しています。開発環境では、デフォルトでログがコンソールに表示されます。
生産のために、このプロジェクトは既にSQLを使用してログを管理および照会するためのより良いスタックと統合されています。より良いスタックを使用するには、より良いスタックアカウントを作成し、新しいソースを作成する必要があります。より良いスタックログダッシュボード> [ソース]> [ソースの接続]に移動します。次に、ソースに名前を付け、プラットフォームとしてnode.jsを選択する必要があります。
ソースを作成した後、ソーストークンを表示およびコピーすることができます。環境変数では、トークンをLOGTAIL_SOURCE_TOKEN変数に貼り付けます。これで、すべてのログが自動的に送信され、より良いスタックによって摂取されます。
このプロジェクトは、生産環境が常に稼働していることを確認するためにチェックリーを使用します。定期的に、CECKLYは*.check.e2e.ts拡張機能で終了するテストを実行し、テストのいずれかが失敗した場合に通知します。さらに、複数の場所からテストを実行して、アプリケーションが世界中で利用できるようにする柔軟性があります。
Checklyを使用するには、まずWebサイトにアカウントを作成する必要があります。アカウントを作成した後、Checkly Dashboardで新しいAPIキーを生成し、GitHubアクションでCHECKLY_API_KEY環境変数を設定します。さらに、 CHECKLY_ACCOUNT_IDを定義する必要があります。これは、ユーザー設定> [一般的な]の下のChecklyダッシュボードにもあります。
セットアップを完了するには、 checkly.config.tsファイルを独自のメールアドレスと生産URLで更新します。
このプロジェクトでは、個別に使用したり、組み合わせてサイトに防御を提供できるいくつかの機能を含むセキュリティとしてセキュリティを使用しています。
ArcJetをセットアップするには、無料アカウントを作成してAPIキーを取得します。次に、 ARCJET_KEY環境変数に追加します。
ArcJetは、ボット検出とArcJet Shield WAFの2つの主要な機能で構成されています。
ArcJetは、 src/libs/Arcjet.tsの中央クライアントで構成されており、Shield WAFルールが含まれています。追加のルールは、ページタイプに基づいて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はコードを自動的に修正してエラーを表示できます。テストにも同じことが当てはまります。VSCODEVitest拡張子をインストールして、テストを自動的に実行することもできます。また、コンテキストでコードカバレッジも表示されます。
プロのヒント：TypeScriptを使用してプロジェクト幅広いチェックが必要な場合は、MacでCMD + Shift + Bを使用してビルドを実行できます。
誰もがこのプロジェクトに貢献できます。質問がある場合は、バグを見つけた場合は、お気軽に問題を開いてください。提案と改善に完全に開かれています。
MITライセンスの下でライセンス、Copyright©2024
詳細については、ライセンスを参照してください。
| | |
| | |
| | |
| ここにロゴを追加します |
creativedesignsguruによって♥で作られました
あなたのプロジェクトをキックオフするためのカスタムボイラープレートをお探しですか？私があなたがそれを構築するのをどのように助けることができるかを話し合うことを嬉しく思います。 [email protected]でいつでもお気軽にご連絡ください！
