เรียก exchangerate.dev จาก Server Component หรือ Route Handler เท่านั้น ห้ามเรียกจากโค้ดฝั่งเบราว์เซอร์ที่มี API key อยู่ โดยให้ source, market_session และ data_updated_at อธิบายอัตราที่แคชไว้
ประเด็นสำคัญ
เก็บ
EXCHANGERATE_API_KEY ฝั่งเซิร์ฟเวอร์และไม่ใช้ NEXT_PUBLIC_ใช้
next: { revalidate: 60 }แสดง
data_updated_at แทนการใช้ timestamp เป็นเวลาตลาดให้อัตราใช้เพื่อแสดงผลและให้ผู้ให้บริการชำระเงินกำหนดยอดจริง
ดึงข้อมูลฝั่งเซิร์ฟเวอร์
Server Component อ่านตัวแปรลับได้ ตัวอย่างขอ EUR และ GBP เทียบ USD พร้อมตรวจสถานะ HTTP
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
อย่าเปิดเผย key
ตัวแปร
NEXT_PUBLIC_ อาจเข้า browser bundle ให้อ่าน EXCHANGERATE_API_KEY บนเซิร์ฟเวอร์เท่านั้นแยกสกุลที่แสดงจากสกุลชำระเงินจริง
ร้านค้าสามารถแสดงราคาโดยประมาณ แต่ยอดเรียกเก็บต้องมาจากผู้ให้บริการชำระเงิน
- เก็บ key บนเซิร์ฟเวอร์
- แคชเฉพาะคำตอบสำเร็จ
- แสดงแหล่งที่มาและเวลา
- เก็บราคาเดิมเป็นหลักในการชำระ
ER
exchangerate.dev
คู่มือเชื่อมต่อสำหรับนักพัฒนาที่ใช้ข้อมูล FX
