DEV Community

Daniel Igel
Daniel Igel

Posted on

Show prices in the user's local currency: live ECB exchange rates in your Next.js app

Showing prices in the user's local currency sounds simple until you hit three separate problems: sourcing reliable exchange rates, avoiding stale conversions in a cached SSR layer, and keeping your API key off the client.

One GET to /api/v1/convert handles the conversion — official ECB (European Central Bank) rates, cached hourly:

curl --request GET \
  --url 'https://api.sprytools.com/v1/currency/api/v1/convert?from=USD&to=EUR&amount=99.99' \
  --header 'x-api-key: YOUR_API_KEY'
Enter fullscreen mode Exit fullscreen mode

You get back { "from", "to", "amount", "result", "rate" } — the converted amount and the exchange rate used, rounded to six decimal places.

In a Next.js Server Component, set revalidate = 3600 to align with the API's 1-hour ECB cache — rates stay fresh without a per-request fetch:

// app/products/[id]/page.jsx
export const revalidate = 3600;

async function localPrice(usdAmount, targetCurrency) {
  const res = await fetch(
    `https://api.sprytools.com/v1/currency/api/v1/convert?from=USD&to=${targetCurrency}&amount=${usdAmount}`,
    { headers: { 'x-api-key': process.env.SPRYTOOLS_API_KEY } }
  );
  const data = await res.json();
  return data.result;
}
Enter fullscreen mode Exit fullscreen mode

Need to know which currencies are available? GET /api/v1/currencies returns the sorted list. Want a price-history chart? GET /api/v1/history?currency=USD&days=30 gives you up to 90 days of daily ECB rates.

Free key: 100 calls/day, no credit card — https://sprytools.com/apis/currency/

Which currency-related feature do your users ask for most?

Top comments (0)