Menu

ローカル環境セットアップ ソースリポジトリ

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

準備

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

VSCodeやCursorを初めて使用する場合は、プログラミング効率を向上させるエディタープラグインをインストールすることをお勧めします： Cursor拡張機能の推奨

プロジェクトの開始

ステップ1: リポジトリをフォーク

Nextyソースリポジトリにアクセスし、右上角のForkボタンをクリックしてソースリポジトリをあなたのGitHubアカウントにフォークします。

fork
fork

ステップ2: リポジトリをクローン

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

clone

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

git clone https://github.com/your-github-username/your-fork-repo-name.git
 
## または
 
git clone https://github.com/your-github-username/your-fork-repo-name.git <new-folder-name>

クローンが完了したら、CursorまたはVSCodeでプロジェクトを開き、ターミナルでプロジェクトディレクトリに移動します。

cd your-fork-repo-name

ステップ3: 依存関係のインストール

pnpmを使用してプロジェクトの依存関係をインストールします。

pnpm install

ステップ4: 環境変数の設定

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

cp .env.example .env.local

環境変数の詳細な説明については、環境変数を参照してください

注目すべき点：

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

ステップ5: データベース統合の完了

データベース統合を完了してください。

ステップ6: 開発サーバーの起動

以下のコマンドのいずれかを使用して開発サーバーを実行します：

npm run dev
# または
yarn dev
# または
pnpm dev

サーバーが正常に起動したら、ブラウザでhttp://localhost:3000にアクセスしてアプリケーションを確認します。

起動成功

必須設定

管理者アカウントの設定

userテーブルを開きます。管理者として指定したいユーザーを見つけ、そのroleをadminに設定します。

管理者アカウントの設定

管理者アカウントで再ログインすると、管理者メニューが表示されます。

管理者ディレクトリ

料金プランの更新

/dashboard/pricesページに移動して、内蔵の料金データを確認します。

内蔵の料金データをStripe製品に接続して料金の編集を開始します。Proプランを例に：

料金プランの編集

Stripeで作成したPrice IDでStripe Price IDを更新し、Verify & Fetchボタンをクリックします。これにより、Stripeから製品と料金情報が自動的に取得され、料金プランが保存されます。

料金プランの確認

注目すべき点：

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

更新後、ランディングページで決済フローをテストできます。

決済テスト

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

  • クレジットカード: 4242 4242 4242 4242
  • 12/34のような有効な将来の日付を使用
  • 任意の3桁のCVC（American Expressカードの場合は4桁）を使用
  • その他のフォームフィールドは任意の値を使用できます。
決済テスト