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