Tutorial/Next.js ve TypeScript

Next.js ve TypeScript ile döviz kurları

Kurları Next.js Server Component içinde alın, API anahtarını istemciden uzak tutun ve gözlem zamanını kaybetmeden yanıtı önbelleğe alın.

MMexchangerate.dev·Jul 17, 2026·6 dk okuma

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

Key points
EXCHANGERATE_API_KEY yalnızca sunucuda kalsın; NEXT_PUBLIC_ kullanmayın.
next: { revalidate: 60 } ile yinelenen çağrıları azaltın.
Gözlem zamanı için data_updated_at gösterin.
Gösterge kuru ile gösterim yapın; tahsilat tutarını ödeme sağlayıcısı belirlesin.

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.

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

İ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.

Anahtarı açığa çıkarmayın
NEXT_PUBLIC_ değişkenleri tarayıcı paketine girebilir. EXCHANGERATE_API_KEY yalnızca sunucuda okunmalıdır.

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.
MM
exchangerate.dev
FX verileriyle çalışan geliştiriciler için entegrasyon rehberleri.

Keep reading

TutorialJavaScript ve Node.js ile para birimi dönüştürmeRead Referencesource ve market_session alanlarını okumaRead GuideGösterge ve uygulanabilir FX kurlarıRead