How do I use an exercise API in a Next.js app?
In Next.js, call WorkoutDB from a Server Component or Route Handler so your X-API-Key never reaches the browser, then cache the response with fetch options or use cache. The @workoutdb/client TypeScript SDK gives you typed results out of the box.
Where to call it
Keep the key on the server. Fetch directly inside an async Server Component, or proxy through a Route Handler if a client component needs the data. Either way the X-API-Key header stays out of the bundle. Because exercise content changes rarely, cache aggressively — a revalidate window of a day or tag-based invalidation keeps pages fast and your request count low.
For typing, install @workoutdb/client; it mirrors the OpenAPI 3.1 spec so search results, filters, and the envelope are fully typed. If you prefer raw fetch, the response shape is stable: { data, meta, requestId }.
- Server Components / Route Handlers keep your API key private.
- Cache exercise data — it is effectively static; long revalidation is safe.
- Typed end to end with @workoutdb/client or the OpenAPI spec.
- Localize per request with ?lang= to drive locale-aware pages.
Related questions
- Should I call the API from the client or the server?
- From the server. Calling from a Server Component or Route Handler keeps your X-API-Key secret and lets the App Router cache responses.
- How should I cache exercise data in Next.js?
- Exercise content rarely changes, so cache it with a long revalidate or use cache and invalidate on demand. This keeps pages fast and stays well within your monthly request quota.
Build it on WorkoutDB
~873 exercises with demo video, ranked search, and four languages — over a clean REST API. Start free: 5,000 requests/month, no credit card.