請喺 Server Component 或者 Route Handler 度call exchangerate.dev，唔好將密鑰放入瀏覽器嘅程式碼。Next.js 可以每 60 秒重新驗證上游請求，而 source、market_session 同 data_updated_at 就會講清楚快取住嘅匯率實際代表緊乜嘢。
重點
將
EXCHANGERATE_API_KEY 保存喺淨係伺服器先讀得到嘅環境變數，唔好加 NEXT_PUBLIC_。用伺服器端嘅
fetch 加 next: { revalidate: 60 }，避免每次有人瀏覽都去call一次上游。顯示
data_updated_at，唔好將回應嘅 timestamp 當成市場觀測嘅新鮮程度。指示性匯率淨係用嚟展示同分析，最終結算金額由付款服務商決定。
喺伺服器端攞匯率
Server Component 唔喺瀏覽器度跑，所以攞得到私人環境變數。呢個例子淨係request USD兌EUR同GBP，check咗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 秒之內。呢個做法會減少重複call，但唔會將每日參考匯率變成盤中匯率，所以一定要保留 source、market_session 同 data_updated_at。
唔好公開密鑰
以
NEXT_PUBLIC_ 開頭嘅環境變數有可能走咗入瀏覽器套件度。請淨係喺伺服器程式碼讀 EXCHANGERATE_API_KEY。匿名call幾啱做快速測試，但正式環境就一定要用密鑰。分開展示貨幣同結算貨幣
商店可以用指示性匯率顯示大約嘅本地價格。最終扣款應該由付款服務商嚟提供，因為手續費、點差、四捨五入同結算時間都會改變到可執行金額。
- 將 API 密鑰留喺伺服器度。
- 淨係快取成功嘅回應，401 或者 429 就唔好快取。
- 需要判斷新鮮程度嗰陣，顯示埋來源同觀測時間。
- 以原本嘅商品價格同貨幣作為結算依據。
ER
exchangerate.dev
為用緊外匯數據嘅開發者而設嘅整合指南。