exchangerate.devはServer ComponentまたはRoute Handlerから呼び出し、キーを含むコードをブラウザへ送らない。Next.jsは上流リクエストを60秒ごとに再検証でき、source、market_session、data_updated_atがキャッシュされたレートの意味を示す。
要点
EXCHANGERATE_API_KEYはサーバー専用の環境変数に保存し、NEXT_PUBLIC_を付けない。サーバー側の
fetchとnext: { revalidate: 60 }で、ページ表示ごとの上流呼び出しを避ける。timestampではなくdata_updated_atを表示し、元の観測時刻を伝える。インディケーティブレートは表示と分析に使い、決済額は決済事業者に決定させる。
サーバー側から取得する
Server Componentはブラウザ外で実行されるため、非公開の環境変数を読める。次の例はUSDに対するEURとGBPだけを要求し、HTTPステータスを確認して型付きJSONを返す。
type LatestRates = {
base: string;
source: "live" | "ecb_daily" | "market_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キーをサーバーに置く。
- 成功レスポンスだけをキャッシュする。
- 鮮度が重要なら情報源と観測時刻を表示する。
- 元の商品価格と通貨を決済の基準にする。
ER
exchangerate.dev
FXデータを扱う開発者向けの統合ガイド。