M

MLOG

日本語

Next.js Edge Configを探る：設定をグローバルに、高速かつ効率的に配信する強力なソリューション。エッジでの動的な設定でアプリケーションを最適化する方法を学びます。

Next.js Edge Config: グローバルな設定配信を簡単に

今日のペースの速いウェブ開発の世界では、パーソナライズされた動的な体験を世界中のユーザーに提供することが不可欠です。人気のReactフレームワークであるNext.jsは、パフォーマンスが高くスケーラブルなウェブアプリケーションを構築するための堅牢なソリューションを提供します。その主要な機能の1つがEdge Configであり、これはエッジでグローバルに設定を管理・配信するための強力なツールです。このブログ記事では、Next.js Edge Configを理解し活用して、アプリケーションのパフォーマンスを最適化し、世界中のオーディエンスに合わせた体験を提供するための包括的なガイドを提供します。

Next.js Edge Configとは？

Next.js Edge Configは、Next.js Edge Functionsに設定データを提供するために特別に設計された、グローバルに分散された低遅延のキーバリューストアです。従来のデータベースやAPIとは異なり、Edge Configは速度と効率に最適化されており、世界中のどこからでもミリ秒単位で設定データにアクセスできます。これにより、パフォーマンスを犠牲にすることなく、設定値に基づいてアプリケーションの動作を動的に調整できます。

これは、Edge Functionsから非常に高速にクエリできる、グローバルに複製されたJSONファイルだと考えてください。これにより、以下の用途に最適です：

Edge Configを使用する理由

Next.js Edge Configを使用する主な利点は次のとおりです：

Edge Configの始め方

Next.js Edge Configを始めるためのステップバイステップガイドです：

1. プロジェクトのセットアップ

Next.jsプロジェクトがあることを確認してください。なければ、以下を使用して作成します：

npx create-next-app@latest my-app
cd my-app

2. Edge Configの作成

Edge Configを使用するにはVercelアカウントが必要です。ログインしたら、Vercelプロジェクトに移動し、新しいEdge Configを作成します。分かりやすい名前を付けてください。

3. Edge Config SDKのインストール

Next.jsプロジェクトに@vercel/edge-config SDKをインストールします：

npm install @vercel/edge-config
# or
yarn add @vercel/edge-config
# or
pnpm install @vercel/edge-config

4. 環境変数の設定

EDGE_CONFIG環境変数を設定する必要があります。この変数の値は、Edge ConfigのVercelダッシュボードで見つけることができます。それを.env.localファイル（または本番環境用のVercelプロジェクト設定）に追加します：

EDGE_CONFIG=your_edge_config_url

重要： .env.localファイルをリポジトリにコミットしないでください。本番環境ではVercelの環境変数設定を使用してください。

5. コード内での設定値へのアクセス

これで、Next.jsコード内でEdge Configの値にアクセスできます。以下に例を示します：

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const featureFlag = await get('featureFlag');
  const welcomeMessage = await get('welcomeMessage');

  return {
    props: {
      featureFlag,
      welcomeMessage,
    },
  };
}

export default function Home({ featureFlag, welcomeMessage }) {
  return (
    <div>
      <h1>{welcomeMessage}</h1>
      {featureFlag ? <p>Feature is enabled!</p> : <p>Feature is disabled.</p>}
    </div>
  );
}

この例では、getServerSidePropsでEdge ConfigからfeatureFlagとwelcomeMessageの値を取得しています。これらの値は、propsとしてHomeコンポーネントに渡されます。

6. 設定値の更新

Vercelダッシュボードを通じてEdge Configの値を更新できます。変更はミリ秒単位でグローバルに伝播します。

高度な使用例とサンプル

Edge ConfigによるA/Bテスト

Edge ConfigはA/Bテストに最適です。ユーザーに提供するアプリケーションのバージョンを決定する設定値を定義できます。例えば：

  1. abTestGroupというキーを持つEdge Configを作成します。
  2. 値をAまたはBに設定します。
  3. Edge Functionで、abTestGroupの値を読み取ります。
  4. 値に基づいて、コンテンツのバージョンAまたはバージョンBを提供します。

以下に例を示します：

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const abTestGroup = await get('abTestGroup');

  let content;
  if (abTestGroup === 'A') {
    content = 'This is version A!';
  } else {
    content = 'This is version B!';
  }

  return {
    props: {
      content,
    },
  };
}

export default function Home({ content }) {
  return (
    <div>
      <h1>A/B Test</h1>
      <p>{content}</p>
    </div>
  );
}

分析ツールを使用して各バージョンのパフォーマンスを追跡し、どちらのバージョンがより優れているかを判断できます。包括的なA/Bテストのデータ収集と分析には、Google Analytics、Amplitude、Mixpanelなどのツールを検討してください。

Edge Configによる機能フラグ

機能フラグを使用すると、新しいコードをデプロイすることなく機能を有効または無効にできます。これは、本番環境で新機能をテストしたり、一部のユーザーに段階的に機能を展開したりするのに役立ちます。A/Bテストと同様に、Edge Configの単純なブール値フラグで機能の利用可能性を制御できます。

  1. newFeatureEnabledというキーを持つEdge Configを作成します。
  2. 値をtrueまたはfalseに設定します。
  3. Edge Functionで、newFeatureEnabledの値を読み取ります。
  4. 値に基づいて、新機能を有効または無効にします。
// components/MyComponent.js
import { get } from '@vercel/edge-config';

export async function MyComponent() {
  const newFeatureEnabled = await get('newFeatureEnabled');

  return (
    <div>
      {newFeatureEnabled ? <p>New feature is enabled!</p> : <p>New feature is disabled.</p>}
    </div>
  );
}

export default MyComponent;

Edge Configによるパーソナライゼーション

Edge Configを使用して、ユーザーの好みや場所に基づいてコンテンツや体験をパーソナライズできます。例えば、ユーザーの好みをデータベースに保存し、Edge Configを使用してそれらの好みに基づいて異なるコンテンツを提供できます。

シナリオ例：グローバルなeコマースサイトが、ユーザーの国に基づいて商品のおすすめを表示したいと考えています。Edge Configを使用して、国をおすすめカテゴリにマッピングできます。

  1. countryToCategoryMapというキーを持つEdge Configを作成します。
  2. 値を、国を商品カテゴリにマッピングするJSONオブジェクトに設定します（例：{"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}）。
  3. Edge Functionで、countryToCategoryMapの値を読み取ります。
  4. ユーザーの国を特定します（例：IPアドレスやクッキーから）。
  5. countryToCategoryMapを使用して、適切な商品カテゴリを決定します。
  6. そのカテゴリの商品のおすすめを表示します。
// pages/products.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps(context) {
  const countryToCategoryMap = await get('countryToCategoryMap');
  const country = context.req.headers['x-vercel-ip-country'] || 'US'; // Default to US
  const category = countryToCategoryMap[country] || 'General'; // Default to General

  // Fetch product recommendations based on the category
  const products = await fetchProducts(category);

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Product Recommendations</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Replace with your actual product fetching logic
  return [
    { id: 1, name: `Product 1 (${category})` },
    { id: 2, name: `Product 2 (${category})` },
  ];
}

この例では、x-vercel-ip-countryヘッダーを使用してユーザーの国を特定しています。このヘッダーはVercelによって自動的に追加されます。IPベースのジオロケーションだけに頼ることは必ずしも正確ではないことに注意することが重要です。精度を向上させるために、ユーザーが提供した場所や、より洗練されたジオロケーションサービスなど、他の方法の使用を検討してください。

Edge Configによる地理的ルーティング

Edge Configを使用して、ユーザーの場所に基づいて異なるリソースにルーティングできます。これは、ローカライズされたコンテンツを提供したり、地域の規制に準拠したりするのに役立ちます。

  1. countryToRedirectMapというキーを持つEdge Configを作成します。
  2. 値を、国をURLにマッピングするJSONオブジェクトに設定します（例：{"CN": "/china", "DE": "/germany"}）。
  3. Edge Functionで、countryToRedirectMapの値を読み取ります。
  4. ユーザーの国を特定します（例：IPアドレスから）。
  5. ユーザーを適切なURLにリダイレクトします。
// pages/_middleware.js
import { NextResponse } from 'next/server'
import { get } from '@vercel/edge-config';

export async function middleware(req) {
  const countryToRedirectMap = await get('countryToRedirectMap');
  const country = req.geo.country || 'US'; // Default to US
  const redirectUrl = countryToRedirectMap[country];

  if (redirectUrl) {
    return NextResponse.redirect(new URL(redirectUrl, req.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/',
}

この例では、req.geo.countryプロパティを使用しています。これはVercelのEdge Networkによってユーザーの国コードが自動的に入力されます。これは、x-vercel-ip-countryヘッダーを直接解析するよりもクリーンで信頼性の高いアプローチです。ミドルウェア関数は、Edge Configでユーザーの国にリダイレクトURLが定義されているかどうかを確認します。もしあれば、ユーザーをそのURLにリダイレクトします。そうでなければ、リクエストの処理を続行します。

Edge Configによるレート制限

Edge Configは本格的なレート制限ソリューションとして設計されていませんが、他の技術と組み合わせて基本的なレート制限を実装するために使用できます。アイデアは、レート制限パラメータ（例：1分あたりのリクエスト数）をEdge Configに保存し、それらのパラメータをEdge Functionsで使用してレート制限を強制することです。

重要事項： このアプローチは、単純なレート制限シナリオに適しています。より堅牢なレート制限には、専用のレート制限サービスまたはミドルウェアの使用を検討してください。

  1. requestsPerMinuteやblockedIpsなどのキーを持つEdge Configを作成します。
  2. requestsPerMinuteの値を目的のレート制限に設定します。
  3. blockedIpsの値を、ブロックすべきIPアドレスの配列に設定します。
  4. Edge Functionで、requestsPerMinuteとblockedIpsの値を読み取ります。
  5. ユーザーのIPアドレスがblockedIps配列にあるかどうかを確認します。もしあれば、リクエストをブロックします。
  6. キャッシングメカニズム（例：RedisやVercel's Edge Cache）を使用して、過去1分間の各IPアドレスからのリクエスト数を追跡します。
  7. ユーザーのIPアドレスからのリクエスト数がrequestsPerMinuteの制限を超えた場合、リクエストをブロックします。

例（説明用 - キャッシングのための追加実装が必要）：

// pages/api/protected-route.js
import { get } from '@vercel/edge-config';

export default async function handler(req, res) {
  const requestsPerMinute = await get('requestsPerMinute');
  const blockedIps = await get('blockedIps');
  const ip = req.headers['x-real-ip'] || req.connection.remoteAddress; // Get user's IP

  // Check if IP is blocked
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO: Implement request counting and caching (e.g., using Redis or Vercel Edge Cache)
  // Example (Conceptual):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // Your protected route logic here
  res.status(200).send('Protected route accessed successfully!');
}

レート制限に関する重要な考慮事項：

Edge Configを使用するためのベストプラクティス

Edge Configの代替手段

Edge Configは強力なツールですが、すべてのユースケースにとって常に最善のソリューションとは限りません。以下に検討すべき代替手段をいくつか示します：

まとめ

Next.js Edge Configは、エッジでグローバルに設定を管理・配信するための強力なツールです。Edge Configを活用することで、アプリケーションのパフォーマンスを最適化し、パーソナライズされた体験を提供し、設定管理のワークフローを簡素化できます。グローバルなeコマースサイト、ソーシャルメディアプラットフォーム、またはその他の種類のウェブアプリケーションを構築している場合でも、Edge Configは世界中のユーザーに高速で魅力的な体験を提供するのに役立ちます。その可能性を探求し、今すぐNext.jsプロジェクトにEdge Configを統合して、その潜在能力を解き放ちましょう！

Next.js Edge Config: グローバルな設定配信を簡単に | MLOG