Tutorial/Crear un conversor de divisas con React Crear un conversor de divisas con React
Crear un conversor de divisas con React. Guía práctica con código, caché y metadatos de frescura.
Implementa esta integración en el servidor sin exponer credenciales y conserva la fuente y la hora de observación.
Puntos clave
Mantén la clave API en el servidor. Valida códigos de moneda e importes. Almacena en caché las respuestas correctas. Muestra la fuente y la hora de observación. Paso 1
Ejecuta este patrón en el servidor, valida las entradas y conserva los metadatos de la respuesta.
Ejemplo de códigocopy
import { NextRequest, NextResponse } from "next/server";
export async function GET(request: NextRequest) {
const { searchParams } = request.nextUrl;
const from = searchParams.get("from")?.toUpperCase();
const to = searchParams.get("to")?.toUpperCase();
const amount = Number(searchParams.get("amount"));
if (!from || !to || !Number.isFinite(amount) || amount < 0) {
return NextResponse.json({ error: "invalid_input" }, { status: 400 });
}
const response = await fetch(
`https://api.exchangerate.dev/v1/convert/${from}/${to}/${amount}`,
{
headers: { Authorization: `Bearer ${process.env.EXCHANGERATE_API_KEY}` },
signal: AbortSignal.timeout(5000),
next: { revalidate: 60 },
},
);
return NextResponse.json(await response.json(), { status: response.status });
}Paso 2
Ejemplo de códigocopy
"use client";
import { FormEvent, useState } from "react";
type ConversionResult = {
converted: string;
source: string;
data_updated_at: string;
};
export function CurrencyConverter() {
const [amount, setAmount] = useState("100");
const [result, setResult] = useState<ConversionResult | null>(null);
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
async function submit(event: FormEvent) {
event.preventDefault();
setLoading(true); setError("");
try {
const params = new URLSearchParams({ from: "USD", to: "EUR", amount });
const response = await fetch(`/api/convert?${params}`);
const body = await response.json();
if (!response.ok) throw new Error(body.error ?? "conversion_failed");
setResult(body);
} catch (caught) {
setError(caught instanceof Error ? caught.message : "conversion_failed");
} finally { setLoading(false); }
}
return <form onSubmit={submit}>
<input value={amount} onChange={(event) => setAmount(event.target.value)} inputMode="decimal" />
<button disabled={loading}>{loading ? "Converting…" : "Convert"}</button>
{error && <p role="alert">{error}</p>}
{result && <output>{result.converted} EUR · {result.source} · {result.data_updated_at}</output>}
</form>;
}Paso 3
- Mantén la clave API en el servidor.
- Valida códigos de moneda e importes.
- Almacena en caché las respuestas correctas.
- Muestra la fuente y la hora de observación.
Guía
Estos tipos son indicativos y no son precios de liquidación.
