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