ソースコードリポジトリのローカル起動

本章では、ソースコードリポジトリのローカル設定と起動プロセスについてご説明します。

ツールの準備

始める前に、以下のツールを準備する必要があります：

VSCodeやCursorを使い始めたばかりの方には、開発ワークフローを効率化するのに役立つエディタ拡張機能をいくつかご紹介します：Cursor拡張機能推奨

Nexty.devソースコードリポジトリを開き、右上隅のForkボタンをクリックして、ソースコードリポジトリをあなたのGitHubアカウントにフォークします。

GitHubアカウントを開き、先ほどフォークしたソースコードリポジトリを見つけ、CodeボタンをクリックしてリポジトリのURLをコピーします。

ターミナルを開き、git cloneコマンドを使用してソースコードリポジトリをクローンします。

git clone https://github.com/your-github-username/your-fork-repo-name.git

クローンが完了したら、CursorまたはVSCodeでソースコードリポジトリを開き、コマンドラインでソースコードリポジトリのディレクトリに入ります。

cd your-fork-repo-name

pnpmを使用して依存関係をインストールします：

pnpm install

ルートディレクトリに.env.localファイルを作成し、環境変数を入力します。

cp .env.example .env.local

環境変数の詳細は環境変数を参照してください。

注目すべき点：

.env.localはローカル開発環境専用です。本番環境では.envファイルを使用する必要があります。

Supabase統合の章の手順をすでに完了している場合、この手順を繰り返す必要はありません。

プロジェクトルートディレクトリのdataフォルダを開き、SupabaseのSQLエディターですべてのSQLファイルを順番に実行します。

ターミナルで起動コマンドを実行します：

npm run dev # npmで起動
または
yarn dev # yarnで起動
または
pnpm dev # pnpmで起動

起動成功後、ブラウザでhttp://localhost:3000にアクセスすると、プロジェクトが実行されていることを確認できます。

Supabaseを開き、Table Editorに移動してusersテーブルを開きます。管理者に設定したいユーザーを見つけて、そのroleをadminに設定します。

これで管理者アカウントでダッシュボードにログインすると、管理メニューを見ることができます。

Supabase統合の章の手順を完了していれば、今すぐ/dashboard/pricesページに移動して組み込みの価格カードを確認できます。

今度はStripeに関連付けられたカードを編集する必要があります。「Pro」カードを例として：

Stripe Price IDをStripeで作成したPrice IDに変更し、「Verify & Fetch」ボタンをクリックします。システムは自動的にStripeから製品と価格情報を取得し、価格カードを保存します。

注意：

まだStripeダッシュボードで製品を作成していない場合は、まずStripe統合の章を完了してください。

更新後、ランディングページの価格設定モジュールで決済フローをテストできます。

Nexty.devソースコードリポジトリのローカル設定と起動プロセス全体を完了しました。

Stripeが提供する以下の情報を使用して決済フローをテストできます：