Tipos de cambio en Next.js y TypeScript

Llama a exchangerate.dev desde un Server Component o Route Handler, nunca desde código del navegador que contenga tu clave. Next.js puede revalidar la solicitud cada 60 segundos, mientras source, market_session y data_updated_at explican qué representa el tipo almacenado.

Consulta desde el servidor

Un Server Component se ejecuta fuera del navegador y puede leer una variable privada. Este ejemplo solicita EUR y GBP frente a USD, comprueba el estado HTTP y devuelve JSON tipado.

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

Almacena la solicitud y conserva la hora de observación

next: { revalidate: 60 } limita la vida de la caché a 60 segundos. Reduce llamadas duplicadas, pero no convierte un tipo de referencia diario en uno intradía. Conserva source, market_session y data_updated_at.

Separa la moneda mostrada de la moneda de liquidación

Una tienda puede mostrar un precio local aproximado con un tipo indicativo. El cobro final debe venir del proveedor de pagos porque comisiones, spreads, redondeo y hora de liquidación pueden cambiar el importe.

• Mantén la clave en el servidor.
• Almacena respuestas correctas, no errores 401 o 429.
• Muestra la fuente y la hora de observación cuando importe la frescura.
• Conserva el precio y la moneda originales como verdad de liquidación.