Tutorial/Next.js 同 TypeScript

喺 Next.js 同 TypeScript 攞匯率

喺 Next.js 嘅 Server Component 攞實時匯率,將 API 密鑰留喺伺服器度,快取回應嗰陣仲要保留底層匯率實際幾時更新過。

ERexchangerate.dev·Jul 17, 2026·6 分鐘閱讀

請喺 Server Component 或者 Route Handler 度call exchangerate.dev,唔好將密鑰放入瀏覽器嘅程式碼。Next.js 可以每 60 秒重新驗證上游請求,而 sourcemarket_sessiondata_updated_at 就會講清楚快取住嘅匯率實際代表緊乜嘢。

Key points
EXCHANGERATE_API_KEY 保存喺淨係伺服器先讀得到嘅環境變數,唔好加 NEXT_PUBLIC_
用伺服器端嘅 fetchnext: { revalidate: 60 },避免每次有人瀏覽都去call一次上游。
顯示 data_updated_at,唔好將回應嘅 timestamp 當成市場觀測嘅新鮮程度。
指示性匯率淨係用嚟展示同分析,最終結算金額由付款服務商決定。

喺伺服器端攞匯率

Server Component 唔喺瀏覽器度跑,所以攞得到私人環境變數。呢個例子淨係request USD兌EUR同GBP,check咗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 秒之內。呢個做法會減少重複call,但唔會將每日參考匯率變成盤中匯率,所以一定要保留 sourcemarket_sessiondata_updated_at

唔好公開密鑰
NEXT_PUBLIC_ 開頭嘅環境變數有可能走咗入瀏覽器套件度。請淨係喺伺服器程式碼讀 EXCHANGERATE_API_KEY。匿名call幾啱做快速測試,但正式環境就一定要用密鑰。

分開展示貨幣同結算貨幣

商店可以用指示性匯率顯示大約嘅本地價格。最終扣款應該由付款服務商嚟提供,因為手續費、點差、四捨五入同結算時間都會改變到可執行金額。

  • 將 API 密鑰留喺伺服器度。
  • 淨係快取成功嘅回應,401 或者 429 就唔好快取。
  • 需要判斷新鮮程度嗰陣,顯示埋來源同觀測時間。
  • 以原本嘅商品價格同貨幣作為結算依據。
ER
exchangerate.dev
為用緊外匯數據嘅開發者而設嘅整合指南。

延伸閱讀

Tutorial喺 JavaScript 同 Node.js 度換算貨幣閱讀 Reference點讀 source 同 market_session閱讀 Guide指示性匯率同可執行匯率閱讀
更多比較Fixer vs exchangerate.devOpen Exchange Rates vs exchangerate.devCurrencylayer vs exchangerate.dev
學習Reading source and market_session in your pipelineIndicative vs executable FX rates: what a rates API actually gives youECB reference rates, explained
即時匯率EUR/USDGBP/USDUSD/JPY