用 React 构建货币转换器

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

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