RepDB
Web example
Build an exercise catalog with Next.js
A searchable, filterable exercise catalog with static detail pages, built from the public RepDB snapshot.
Public repository · No API key required · Commercial in-app use with attribution
Integration walkthrough
How to load RepDB in a Next.js exercise database
The example imports the JSON bundle into the server build, derives typed helpers for localization and image paths, and generates one static route per exercise. Filters stay in URL search parameters, so the catalog remains shareable and indexable without a database.
- 1 Import exercises.json at build time and expose a typed EXERCISES collection.
- 2 Resolve localized names, instructions, taxonomy labels, and WebP image variants in one bundle helper.
- 3 Filter the catalog from URL search parameters for body part, equipment, and difficulty.
- 4 Use generateStaticParams to pre-render every exercise detail route.
Key files in the repository
- src/data/exercises.json — Bundled public exercise snapshot
- src/lib/bundle.ts — Types, localization, filters, and image helpers
- src/app/page.tsx — Searchable exercise catalog
- src/app/[slug]/page.tsx — Statically generated detail routes
import bundle from '@/data/exercises.json';
export const EXERCISES = (bundle as Bundle).exercises;
export function generateStaticParams() {
return EXERCISES.map((exercise) => ({
slug: exercise.id,
}));
}What it demonstrates
A practical starting point, not a toy snippet
The app reads the dataset and images from the repository at build time. It is a useful starting point for a statically generated fitness directory or an authenticated product shell.
- Search and filter the catalog by muscle, equipment, and category
- Static exercise detail pages with no runtime API dependency
- English, German, and Spanish exercise content
- Responsive layouts built for desktop and mobile
Sample vs full dataset
Prototype publicly. Ship with the complete library.
The repository deliberately uses a limited public snapshot. It shows the integration without publishing the full paid RepDB catalog.
Included in the public example
- 400 exercise records
- Flat 512px WebP images
- English, German, and Spanish content
- One paid-animation preview
Available in paid RepDB plans
- The complete, growing exercise catalog
- Classic and flat images up to 1024px
- Transparent assets and exercise animations on Standard
- SQLite, TypeScript, embeddings, and integration templates on Standard
Need another stack?
Browse the other examples or use the same local-data pattern in your own framework.