Tutorial/Next.js と TypeScript

Next.jsとTypeScriptで為替レートを取得する

Next.jsのServer Componentから為替レートを取得し、APIキーをクライアントに渡さず、元データの更新時刻を失わずにレスポンスをキャッシュする方法を説明する。

MMexchangerate.dev·Jul 17, 2026·6分で読了

exchangerate.devはServer ComponentまたはRoute Handlerから呼び出し、キーを含むコードをブラウザへ送らない。Next.jsは上流リクエストを60秒ごとに再検証でき、source、market_session、data_updated_atがキャッシュされたレートの意味を示す。

Key points
EXCHANGERATE_API_KEYはサーバー専用の環境変数に保存し、NEXT_PUBLIC_を付けない。
サーバー側のfetchとnext: { revalidate: 60 }で、ページ表示ごとの上流呼び出しを避ける。
timestampではなくdata_updated_atを表示し、元の観測時刻を伝える。
インディケーティブレートは表示と分析に使い、決済額は決済事業者に決定させる。

サーバー側から取得する

Server Componentはブラウザ外で実行されるため、非公開の環境変数を読める。次の例はUSDに対するEURとGBPだけを要求し、HTTPステータスを確認して型付きJSONを返す。

typescript · app/page.tsxcopy
type LatestRates = {
  base: string;
  source: "live" | "ecb_daily" | "fred_daily";
  market_session: string;
  data_updated_at: string;
  rates: Record<string, number>;
};

async function getRates(): Promise<LatestRates> {
  const apiKey = process.env.EXCHANGERATE_API_KEY;
  if (!apiKey) throw new Error("EXCHANGERATE_API_KEY is missing");

  const response = await fetch(
    "https://api.exchangerate.dev/v1/latest/USD?symbols=EUR,GBP",
    {
      headers: { Authorization: `Bearer ${apiKey}` },
      next: { revalidate: 60 },
    },
  );

  if (!response.ok) {
    throw new Error(`FX request failed: ${response.status}`);
  }

  return response.json() as Promise<LatestRates>;
}

export default async function Page() {
  const fx = await getRates();

  return (
    <main>
      <p>1 USD = {fx.rates.EUR} EUR</p>
      <small>
        {fx.source} · {fx.market_session} · updated {fx.data_updated_at}
      </small>
    </main>
  );
}

リクエストをキャッシュし、観測時刻を保持する

next: { revalidate: 60 }は上流リクエストのキャッシュ寿命を最大60秒にする。重複呼び出しは減るが、日次参照レートが市場内レートに変わるわけではないため、source、market_session、data_updated_atを保持する。

キーを公開しない
NEXT_PUBLIC_で始まる環境変数はブラウザバンドルに含まれうる。EXCHANGERATE_API_KEYはサーバーコードだけで読む。匿名呼び出しは簡単な試験向けであり、本番ではキーを使う。

表示通貨と決済通貨を分ける

ストアはインディケーティブレートで概算の現地価格を表示できる。手数料、スプレッド、丸め、決済時刻により実行額は変わるため、最終請求額は決済事業者から取得する。

  • APIキーをサーバーに置く。
  • 成功レスポンスだけをキャッシュする。
  • 鮮度が重要なら情報源と観測時刻を表示する。
  • 元の商品価格と通貨を決済の基準にする。
MM
exchangerate.dev
FXデータを扱う開発者向けの統合ガイド。

Keep reading

TutorialJavaScriptとNode.jsによる通貨換算Read Referencesourceとmarket_sessionの読み方Read Guideインディケーティブレートと約定可能レートRead