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に設定します。

管理者アカウントの設定

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

管理者ディレクトリ

料金プランの更新

注目すべき点

v4.0.0 以降、料金はデータベースに保存されなくなり、管理画面の料金管理ページも廃止されました。料金の唯一の情報源は config/pricing.ts です。

config/pricing.ts を開くと、内蔵の料金データを確認できます。1 プランが 1 オブジェクトで、provider フィールドがどのプロバイダーで決済するかを宣言し、対応する価格 ID は同名のフィールド（stripePriceId / creemProductId / paypalPlanId）に、test と live の 2 環境分を記述します：

{
  id: 'pro-monthly',
  kind: 'subscription',
  interval: 'month',
  monthlyCredits: 2000,
  provider: 'stripe',
  stripePriceId: {
    test: 'price_REPLACE_pro_monthly_test',
    live: 'price_REPLACE_pro_monthly_live',
  },
  price: 29.9,
  currency: 'USD',
  active: true,
  copy: { en: { ... }, zh: { ... }, ja: { ... } },
}

price_REPLACE_* のプレースホルダーを実際の Price ID に置き換える方法は 2 つあります。

方法 1：スクリプトで自動作成・自動反映（推奨）

# まずはドライラン。作成される内容を表示するだけ
pnpm stripe:bootstrap
 
# 問題なければ適用：Stripe に製品と価格を作成し、config/pricing.ts に書き戻す
pnpm stripe:bootstrap --write

スクリプトは STRIPE_SECRET_KEY のプレフィックスで書き込み先の列を判断し（sk_test なら test、sk_live なら live）、冪等に動作します。製品は metadata.planId で、価格は金額 + 通貨 + 周期で既存のものを再利用し、すでに反映済みのエントリはスキップされます。

方法 2：手動で記入

すでに Stripe ダッシュボードで製品を作成済みであれば、Price ID を対応するフィールドに貼り付けるだけです。

注目すべき点：

  • Stripeダッシュボードでまだ製品を作成していない場合は、まずStripe統合の章を完了してください。
  • プランの id は再利用せず、販売実績のあるプランは削除しないでください（過去の注文とクレジット履歴がこれを通じて解決されます）。提供終了は active: false で行います。

編集後、開発サーバーを再起動すれば、ランディングページで決済フローをテストできます。

決済テスト

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

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