Tutorial/Next.js และ TypeScript

อัตราแลกเปลี่ยนใน Next.js และ TypeScript

ดึงอัตราจาก Server Component เก็บ API key ไว้ฝั่งเซิร์ฟเวอร์ และแคชโดยไม่ทำเวลาของข้อมูลต้นทางหาย

MMexchangerate.dev·Jul 17, 2026·อ่าน 6 นาที

เรียก 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

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 วินาที แต่ไม่ทำให้อัตราอ้างอิงรายวันเป็นอัตราระหว่างวัน จึงต้องเก็บ source, market_session และ data_updated_at

อย่าเปิดเผย key
ตัวแปร NEXT_PUBLIC_ อาจเข้า browser bundle ให้อ่าน EXCHANGERATE_API_KEY บนเซิร์ฟเวอร์เท่านั้น

แยกสกุลที่แสดงจากสกุลชำระเงินจริง

ร้านค้าสามารถแสดงราคาโดยประมาณ แต่ยอดเรียกเก็บต้องมาจากผู้ให้บริการชำระเงิน

  • เก็บ key บนเซิร์ฟเวอร์
  • แคชเฉพาะคำตอบสำเร็จ
  • แสดงแหล่งที่มาและเวลา
  • เก็บราคาเดิมเป็นหลักในการชำระ
MM
exchangerate.dev
คู่มือเชื่อมต่อสำหรับนักพัฒนาที่ใช้ข้อมูล FX

Keep reading

Tutorialแปลงสกุลเงินด้วย JavaScript และ Node.jsRead Referenceอ่าน source และ market_sessionRead Guideอัตราเพื่ออ้างอิงและอัตราที่ซื้อขายได้Read