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

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

ツールの準備

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

Node.js（v20以上）
Git
pnpm
VSCode または Cursor（推奨）

プロジェクトの起動

ステップ1：ソースコードのフォーク

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

fork

ステップ2：ソースコードのクローン

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

clone

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

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

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

cd your-fork-repo-name

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

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

pnpm install

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

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

cp .env.example .env.local

注目すべき点：

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

環境変数の説明：

基本的なWebサイト設定

NEXT_PUBLIC_SITE_URL（必須）：WebサイトURL
- ローカル開発の場合は起動アドレスを入力、デフォルトはhttp://localhost:3000
- 本番環境ではあなたのドメインを入力
NEXT_PUBLIC_LOCALE_DETECTION（必須）：next-intl言語検出を有効にするかどうか、falseに設定することを推奨
- trueに設定すると、next-intlは言語を検出し、ブラウザの言語に基づいて対応する言語ページに自動リダイレクトします
- falseに設定すると、Nexty.devテンプレートの組み込みSEOフレンドリー言語検出器を使用します
Nexty.devの組み込み言語検出器は、ユーザーが初めて訪問する際に、ブラウザの言語が現在のページの言語と一致するかをサイレントにチェックします。一致しない場合、ユーザーに言語切り替えを促す案内を表示します。2回目以降の訪問では、cookieに記録された最後に訪問した言語ページに基づいてリダイレクトします。このアプローチは不要なリダイレクトを減らし、SEOをより友好的にします。
ALLOWED_REDIRECT_HOSTS（オプション）：ログイン成功後にリダイレクトを許可するドメインのホワイトリスト、必須ではなく、開発環境でのみ有効

データ分析

NEXT_PUBLIC_GOOGLE_ID（オプション）：Google Analytics
NEXT_PUBLIC_BAIDU_TONGJI（オプション）：Baidu Analytics
NEXT_PUBLIC_PLAUSIBLE_DOMAIN（オプション）：Plausibleドメイン
NEXT_PUBLIC_PLAUSIBLE_SRC（オプション）：Plausibleソース

Plausibleはオープンソースです。サーバーがある場合は、セルフホスティングを推奨します。

NEXT_PUBLIC_GOOGLE_ADSENSE_ID（オプション）：Google Adsense

Supabase

Nexty.devはデータと認証にSupabaseサービスを使用しているため、以下の環境変数を設定する必要があります：

NEXT_PUBLIC_SUPABASE_URL（必須）：Supabase URL
NEXT_PUBLIC_SUPABASE_ANON_KEY（必須）：Supabase匿名キー
SUPABASE_SERVICE_ROLE_KEY（必須）：Supabaseサービスロールキー

まだSupabaseアカウントを準備していない場合は、まずSupabase統合の章を完了してください。

Resend

Resendはメール送信用のサードパーティサービスです。Nexty.devテンプレートはResendを基盤としてメール送信機能を実装しています。

RESEND_API_KEY（オプション）：Resend APIキー
RESEND_AUDIENCE_ID（オプション）：Resend Audience ID
ADMIN_EMAIL（オプション）：カスタム管理者メール、メールで送信者メールを表示するのに使用
ADMIN_NAME（オプション）：カスタム管理者名、メールで送信者名を表示するのに使用

RESEND_API_KEYとRESEND_AUDIENCE_IDの取得については、Resend統合の章を参照してください。

Upstash Redis

Upstash Redisはデータキャッシュ、リクエストレート制限などのシナリオで使用できます。

Nexty.devテンプレートのメール購読機能では、Upstash Redisを使用して日次送信を制限しています。これを例として - あなたの製品がトラフィック攻撃に直面した場合、この例を基に実装されたラップされたレートリミッターを使用して、ビジネスロジックの前に不正なトラフィックを迅速に防ぐことができます。

UPSTASH_REDIS_REST_URL（オプション）：Redis URL
UPSTASH_REDIS_REST_TOKEN（オプション）：Redisトークン
UPSTASH_REDIS_NEWSLETTER_RATE_LIMIT_KEY（オプション）：メール購読レート制限用のRedisキー
DAY_MAX_SUBMISSIONS（オプション）：日次最大送信数

UPSTASH_REDIS_REST_URLとUPSTASH_REDIS_REST_TOKENの取得については、Upstash統合の章を参照してください。

CloudFlare R2

CloudFlare R2はファイルストレージサービスです。Nexty.devではユーザーのカスタムアバター、AI生成画像とビデオ、ブログ画像などの保存に使用しています。

R2_ACCOUNT_ID（オプション）：R2アカウントID
R2_ACCESS_KEY_ID（オプション）：R2アクセスキーID
R2_SECRET_ACCESS_KEY（オプション）：R2シークレットキー
R2_BUCKET_NAME（オプション）：R2バケット名
R2_PUBLIC_URL（オプション）：R2バケットURL

これらの環境変数の取得については、CloudFlare R2統合の章を参照してください。

AIモデル

Nexty.devにはAIモデル能力のデバッグ用のAIデモページがあります。AI関数呼び出しに慣れていない場合、このページのコードから迅速に学ぶことができます。

OPENAI_API_KEY（オプション）：OpenAI APIキー
DEEPSEEK_API_KEY（オプション）：DeepSeek APIキー
ANTHROPIC_API_KEY（オプション）：Anthropic APIキー
XAI_API_KEY（オプション）：XAI APIキー
GOOGLE_API_KEY（オプション）：Google APIキー
REPLICATE_API_TOKEN（オプション）：Replicate APIトークン

すべてのAIキーは各プラットフォームのダッシュボードから取得します。

Stripe

Stripeは現在最も主流の決済ゲートウェイです。Nexty.devテンプレートには、Stripeを基盤とした完全な一回払いと定期購読機能が組み込まれています。環境変数設定を通じて有効にするかどうかを決めることができます。

NEXT_PUBLIC_ENABLE_STRIPE（必須）：Stripe決済を有効にするかどうか
- trueに設定するとStripe決済機能を有効にします
- falseに設定するとStripe決済機能を無効にします。以下の設定項目を入力する必要はありません
STRIPE_SECRET_KEY（オプション）：Stripeシークレットキー
STRIPE_PUBLISHABLE_KEY（オプション）：Stripe公開キー
STRIPE_WEBHOOK_SECRET（オプション）：Stripe Webhook Secret
DEFAULT_CURRENCY（オプション）：デフォルト通貨
STRIPE_WEBHOOK_ASYNC_PROCESSING（オプション）：Stripeの再試行メカニズムを有効にするかどうか
- Stripeの再試行メカニズムに依存する場合はfalseに設定
- バックグラウンド処理の信頼性保証を構築する能力がある場合はtrueに設定。これにより、stripe webhooksに対してより迅速な応答が可能になり、重複イベントトリガーが減少します
STRIPE_CUSTOMER_PORTAL_URL（オプション）：ユーザーダッシュボードの定期購読管理ページ

STRIPE_SECRET_KEY、STRIPE_PUBLISHABLE_KEY、STRIPE_WEBHOOK_SECRETの取得については、Stripe統合の章を参照してください。

AI翻訳

Nexty.devには価格カードの作成/編集ページで多言語価格カード用のAI翻訳機能が組み込まれています。この機能を使用するには、AIモデルプロバイダーとモデルを設定する必要があります。

NEXT_PUBLIC_AI_MODEL_ID（オプション）：AIモデルID
NEXT_PUBLIC_AI_PROVIDER（オプション）：AIモデルプロバイダー

AI翻訳機能を使用しない場合、これらの環境変数を設定する必要はありません。

ステップ5：SQLファイルの実行

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

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

SQLファイルの実行

ステップ6：プロジェクトの起動

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

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が提供する以下の情報を使用して決済フローをテストできます：

クレジットカード：4242 4242 4242 4242
12/34などの有効な将来の日付を使用
任意の3桁のCVC（American Expressカードは4桁）
その他のフォームフィールドは任意の値を使用できます。

決済テスト