Kursy walut w Next.js i TypeScript

Wywołuj exchangerate.dev z Server Component lub Route Handler, nigdy z kodu przeglądarki zawierającego Twój klucz. Next.js może odświeżać żądanie co 60 sekund, a source, market_session i data_updated_at opisują znaczenie kursu w pamięci podręcznej.

Pobieraj dane po stronie serwera

Server Component działa poza przeglądarką i może odczytać prywatną zmienną. Przykład pobiera EUR i GBP względem USD, sprawdza status HTTP i zwraca typowany JSON.

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

Buforuj żądanie i zachowuj czas obserwacji

next: { revalidate: 60 } ogranicza czas bufora do 60 sekund. Nie zmienia jednak dziennego kursu referencyjnego w kurs intraday, dlatego zachowaj source, market_session i data_updated_at.

Oddziel walutę prezentacji od rozliczenia

Sklep może pokazać przybliżoną cenę lokalną. Ostateczne obciążenie musi pochodzić od operatora płatności, który uwzględnia spread, opłaty i moment rozliczenia.

• Klucz trzymaj na serwerze.
• Buforuj tylko poprawne odpowiedzi.
• Pokazuj źródło i czas obserwacji.
• Oryginalna cena i waluta pozostają podstawą rozliczenia.