Next.js ve TypeScript ile döviz kurları

exchangerate.dev çağrısını Server Component veya Route Handler içinde yapın, anahtarınızı içeren istemci kodundan asla yapmayın. Next.js isteği 60 saniyede bir yeniler; source, market_session ve data_updated_at önbellekteki kurun neyi temsil ettiğini açıklar.

Sunucu tarafından alın

Server Component tarayıcı dışında çalışır ve özel ortam değişkenini okuyabilir. Örnek USD karşısında EUR ve GBP ister, HTTP durumunu denetler ve tipli JSON döndürür.

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>
  );
}

İsteği önbelleğe alın, gözlem zamanını koruyun

next: { revalidate: 60 } önbelleği 60 saniyeyle sınırlar. Günlük referans kurunu gün içi kura dönüştürmez; source, market_session ve data_updated_at alanlarını koruyun.

Gösterim para birimiyle mutabakatı ayırın

Mağaza yaklaşık yerel fiyat gösterebilir. Nihai tahsilat; ücret, spread ve zamanlamayı bilen ödeme sağlayıcısından gelmelidir.

• Anahtarı sunucuda tutun.
• Yalnızca başarılı yanıtları önbelleğe alın.
• Kaynak ve gözlem zamanını gösterin.
• Asıl fiyatı mutabakat kaynağı olarak koruyun.