SaaS Boilerplate
v1.7.3
SaaS ボイラープレートは、 SaaS アプリケーションを開始するための強力で完全にカスタマイズ可能なテンプレートです。 Next.jsとTailwind CSS 、およびShadcn UIのモジュラー UI コンポーネントで構築されています。このNext.js SaaS テンプレートは、最小限の労力で SaaS を迅速に構築して起動するのに役立ちます。
組み込みの認証、チームサポートを備えたマルチテナンシー、ロールと権限、データベース、I18n (国際化)、ランディングページ、ユーザーダッシュボード、フォーム処理、SEO 最適化、ログ、Sentry によるエラーレポート、テスト、展開などの重要な機能が満載、モニタリング、ユーザー偽装など、この SaaS テンプレートには、開始するために必要なものがすべて用意されています。
開発者を念頭に置いて設計されたこのNext.js スターター キットは、タイプ セーフティのために TypeScript を使用し、コードの品質を維持するために ESLint を統合し、一貫したコードの書式設定のために Prettier を統合します。テスト スイートは Vitest と React Testing Library を組み合わせて堅牢な単体テストを実現し、Playwright が統合と E2E テストを処理します。継続的な統合とデプロイは、GitHub Actions を通じて管理されます。ユーザー管理の場合、認証は Clerk によって処理されます。データベース操作では、Drizzle ORM を使用して、PostgreSQL、SQLite、MySQL などの一般的なデータベース全体でタイプセーフなデータベース管理を行います。
新しい SaaS アプリを構築している場合でも、柔軟で本番環境に対応した SaaS テンプレートを探している場合でも、この定型文が役に立ちます。この無料のオープンソース スターター キットには、開発を加速し、製品を簡単に拡張するために必要なものがすべて含まれています。
このプロジェクトのクローンを作成し、それを使用して独自の SaaS を作成します。 SaaS Boilerplate でライブ デモを確認できます。これは、認証およびマルチテナント システムが動作するデモです。
 |  |   |
 | ||
| ここにロゴを追加します |
ライブデモ: SaaS ボイラープレート
| ランディングページ | ユーザーダッシュボード |
|---|---|
 |  |
| チームマネジメント | ユーザープロフィール |
|---|---|
 |  |
| サインアップ | サインイン |
|---|---|
 |  |
| ダークモードを備えたランディングページ (プロバージョン) | ダークモードを備えたユーザーダッシュボード (プロバージョン) |
|---|---|
 |  |
| サイドバー付きユーザー ダッシュボード (プロ バージョン) |
|---|
 |
開発者エクスペリエンスを第一に考えた非常に柔軟なコード構造で、必要なものだけを保持します。
@接頭辞を使用した絶対インポートNext.js の組み込み機能:
ローカル環境で次のコマンドを実行します。
git clone --depth=1 https://github.com/ixartz/SaaS-Boilerplate.git my-project-name
cd my-project-name
npm install参考までに、すべての依存関係は毎月更新されます。
次に、次のコマンドを実行することで、ライブ リロードを使用して開発モードでプロジェクトをローカルで実行できます。
npm run devお気に入りのブラウザで http://localhost:3000 を開いて、プロジェクトを表示します。
Clerk.com で Clerk アカウントを作成し、Clerk ダッシュボードで新しいアプリケーションを作成します。次に、 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 Clerk ダッシュボードで、 Organization management > Settings > [組織Enable organizationに移動して、 Enable Organization必要もあります。
これで、Next.js を使用した完全に機能する認証システムが完成しました。サインアップ、サインイン、サインアウト、パスワードを忘れた場合、パスワードのリセット、プロファイルの更新、パスワードの更新、電子メールの更新、アカウントの削除などを行うことができます。
このプロジェクトでは、PostgreSQL、SQLite、および MySQL データベースと互換性のあるタイプセーフな ORM である DrizzleORM を使用します。デフォルトでは、プロジェクトは PostgreSQL とシームレスに連携するように設定されており、任意の PostgreSQL データベース プロバイダーを簡単に選択できます。
翻訳には、プロジェクトではnext-intlと Crowdin を組み合わせて使用します。開発者は、英語 (または別のデフォルト言語) バージョンに注意するだけで済みます。他の言語の翻訳は自動的に生成され、Crowdin によって処理されます。 Crowdin を使用して、翻訳チームと共同作業したり、機械翻訳を利用して自分でメッセージを翻訳したりできます。
翻訳 (i18n) を設定するには、Crowdin.com でアカウントを作成し、新しいプロジェクトを作成します。新しく作成されたプロジェクトで、プロジェクト ID を見つけることができます。また、[アカウント設定] > [API] に移動して、新しいパーソナル アクセス トークンを作成する必要もあります。次に、GitHub Actions で、環境変数CROWDIN_PROJECT_IDおよびCROWDIN_PERSONAL_TOKENを定義する必要があります。
GitHub Actions で環境変数を定義すると、新しいコミットを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
├── scripts # Scripts folder
├── src
│ ├── app # Next JS App (App Router)
│ ├── components # Reusable components
│ ├── features # Components specific to a feature
│ ├── 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
├── tests
│ ├── e2e # E2E tests, also includes Monitoring as Code
│ └── integration # Integration tests
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configurationプロジェクト全体でFIXME:を検索することで、Next.js SaaS ボイラープレートを簡単に構成して、迅速なカスタマイズを行うことができます。カスタマイズする必要がある最も重要なファイルのいくつかを次に示します。
public/apple-touch-icon.png 、 public/favicon.ico 、 public/favicon-16x16.pngおよびpublic/favicon-32x32.png : ウェブサイトのファビコンsrc/utils/AppConfig.ts : 設定ファイルsrc/templates/BaseTemplate.tsx : デフォルトのテーマnext.config.mjs : Next.js の設定.env : デフォルトの環境変数さらにカスタマイズするためにソース コードに完全にアクセスできます。提供されているコードは、プロジェクトを開始する際に役立つ単なる例です。空は限界です。
ソース コードには、PRO バージョンでのみ使用できるコードを示すPROコメントもあります。このコードは簡単に削除したり、独自の実装に置き換えたりできます。
プロジェクト内のデータベース スキーマを変更するには、 ./src/models/Schema.tsにあるスキーマ ファイルを更新します。このファイルは、Drizzle ORM ライブラリを使用してデータベース テーブルの構造を定義します。
スキーマに変更を加えた後、次のコマンドを実行して移行を生成します。
npm run db:generateこれにより、スキーマの変更を反映した移行ファイルが作成されます。移行は次回のデータベース操作中に自動的に適用されるため、手動で実行したり、Next.js サーバーを再起動したりする必要はありません。
プロジェクトは従来のコミット仕様に従っています。つまり、すべてのコミット メッセージはそれに応じてフォーマットする必要があります。コミット メッセージの作成を支援するために、プロジェクトでは、コミット プロセスをガイドする対話型 CLI である Commitizen を使用します。これを使用するには、次のコマンドを実行します。
npm run commit従来のコミットを使用する利点の 1 つは、 CHANGELOGファイルを自動的に生成できることです。また、リリースに含まれるコミットの種類に基づいて次のバージョン番号を自動的に決定することもできます。
このプロジェクトは、サブスクリプション支払いのために Stripe と統合されています。 Stripe アカウントを作成する必要があり、Stripe CLI もインストールする必要があります。 Stripe CLI をインストールした後、CLI を使用してログインする必要があります。
stripe login次に、次のコマンドを実行して新しい価格を作成できます。
npm run stripe:setup-priceコマンドを実行した後、価格 ID をコピーし、既存の価格 ID を新しい価格 ID で更新してsrc/utils/AppConfig.tsに貼り付ける必要があります。
Stripe ダッシュボードでは、https://dashboard. Stripe.com/test/settings/billing/portal でカスタマー ポータル設定を構成する必要があります。最も重要なのは、設定を保存する必要があることです。
.envファイルで、 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY独自の Stripe Publishable キーで更新する必要があります。キーは Stripe ダッシュボードで見つけることができます。次に、 .env.localという名前の新しいファイルを作成し、新しく作成したファイルに次の環境変数を追加する必要もあります。
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret STRIPE_SECRET_KEY 、Stripe ダッシュボードから取得します。 STRIPE_WEBHOOK_SECRETは、次のコマンドを実行して生成されます。
npm run devターミナルに Webhook 署名シークレットが表示されます。これをコピーして.env.localファイルに貼り付けることができます。
すべての単体テストは同じディレクトリ内のソース コードと並んで配置されているため、見つけやすくなっています。このプロジェクトでは、単体テストに Vitest と React Testing Library を使用します。次のコマンドを使用してテストを実行できます。
npm run testこのプロジェクトは、統合とエンドツーエンド (E2E) テストに Playwright を使用します。次のコマンドを使用してテストを実行できます。
npx playwright install # Only for the first time in a new environment
npm run test:e2eローカル環境では、ビジュアル テストが無効になり、端末に[percy] Percy is not running, disabling snapshots. 。デフォルトでは、ビジュアル テストは GitHub Actions でのみ実行されます。
App Router フォルダーは Edge ランタイムと互換性があります。これを有効にするには、次の行src/app/layouts.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 を開いて結果を確認できます。
プロジェクトは Sentry を使用してエラーを監視します。開発環境では、追加のセットアップは必要ありません。NextJS SaaS ボイラープレートは、Sentry および Spotlight (開発用 Sentry) を使用するように事前に構成されています。すべてのエラーはローカルの Spotlight インスタンスに自動的に送信されるため、Sentry をローカルで体験できるようになります。
運用環境の場合は、Sentry アカウントと新しいプロジェクトを作成する必要があります。次に、 next.config.mjsのwithSentryConfig関数でorgとproject属性を更新する必要があります。さらに、Sentry DSN をsentry.client.config.ts 、 sentry.edge.config.ts 、およびsentry.server.config.tsに追加します。
Next.js SaaS テンプレートは、コード カバレッジ レポート ソリューションとして Codecov に依存しています。 Codecov を有効にするには、Codecov アカウントを作成し、GitHub アカウントに接続します。リポジトリが Codecov ダッシュボードに表示されるはずです。目的のリポジトリを選択し、トークンをコピーします。 GitHub Actions で、 CODECOV_TOKEN環境変数を定義し、トークンを貼り付けます。
CODECOV_TOKEN GitHub Actions シークレットとして作成してください。ソース コードに直接貼り付けないでください。
このプロジェクトでは、ログ記録に Pino.js を使用します。開発環境では、デフォルトでログがコンソールに表示されます。
運用環境では、プロジェクトはすでに Better Stack と統合されており、SQL を使用してログを管理およびクエリできます。 Better Stack を使用するには、Better Stack アカウントを作成し、新しいソースを作成する必要があります。Better Stack ログ ダッシュボード > ソース > 接続ソースに移動します。次に、ソースに名前を付け、プラットフォームとして Node.js を選択する必要があります。
ソースを作成した後、ソース トークンを表示およびコピーできるようになります。環境変数で、トークンをLOGTAIL_SOURCE_TOKEN変数に貼り付けます。これで、すべてのログが自動的に Better Stack に送信され、Better Stack によって取り込まれるようになります。
プロジェクトでは Checkly を使用して、運用環境が常に稼働していることを確認します。 Checkly は定期的に*.check.e2e.ts拡張子で終わるテストを実行し、テストが失敗した場合に通知します。さらに、複数の場所からテストを実行して、アプリケーションを世界中で利用できるようにする柔軟性もあります。
Checkly を使用するには、まず Web サイトでアカウントを作成する必要があります。アカウントを作成した後、Checkly ダッシュボードで新しい API キーを生成し、GitHub Actions でCHECKLY_API_KEY環境変数を設定します。さらに、 CHECKLY_ACCOUNT_IDを定義する必要があります。これは、Checkly ダッシュボードの [ユーザー設定] > [全般] にもあります。
セットアップを完了するには、独自の電子メール アドレスと運用 URL を使用してcheckly.config.tsファイルを更新します。
Next.js SaaS スターター キットには、組み込みのバンドル アナライザーが含まれています。これは、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
詳細については、「ライセンス」を参照してください。
| | |
| ||
| ここにロゴを追加します |
CreativeDesignsGuru による♥で作られました
プロジェクトを開始するためのカスタム ボイラープレートをお探しですか?構築のお手伝いができるかどうか、喜んでご相談させていただきます。いつでもお気軽に [email protected] までご連絡ください。
