How to Build a Fitness App in Next.js

import { YMoveClient } from 'ymove-exercise-api';

// Read on the server only, so the key never reaches the browser. Get a key in the docs at https://ymove.app/exercise-api
const apiKey = process.env.YMOVE_API_KEY;
if (!apiKey) throw new Error('Missing YMOVE_API_KEY , get a key at https://ymove.app/exercise-api');

export const ymove = new YMoveClient(apiKey);

import type { GetServerSideProps } from 'next';
import type { Exercise, MuscleGroupSlug, EquipmentSlug, Difficulty } from 'ymove-exercise-api';
import { ymove } from '../lib/ymove';

interface Filters { muscleGroup?: MuscleGroupSlug; equipment?: EquipmentSlug; difficulty?: Difficulty }
interface Props { initialExercises: Exercise[]; total: number; filters: Filters }

export const getServerSideProps: GetServerSideProps<Props> = async ({ query }) => {
  const filters: Filters = {
    muscleGroup: typeof query.muscleGroup === 'string' ? (query.muscleGroup as MuscleGroupSlug) : undefined,
    equipment:   typeof query.equipment === 'string'   ? (query.equipment as EquipmentSlug)     : undefined,
    difficulty:  typeof query.difficulty === 'string'  ? (query.difficulty as Difficulty)       : undefined,
  };

  const result = await ymove.exercises.list({ ...filters, hasVideo: true, pageSize: 30 });

  return {
    props: {
      initialExercises: result.data,
      total: result.pagination.total,
      filters: Object.fromEntries(Object.entries(filters).filter(([, v]) => v !== undefined)),
    },
  };
};

<p className="tabular-nums text-ink-400">{total.toLocaleString()} Movements</p>

<ul className="divide-y divide-ink-800">
  {initialExercises.map((ex) => (
    <li key={ex.id} className="py-4 flex gap-4 items-center">
      <img src={ex.thumbnailUrl} alt="" className="h-14 w-14 rounded object-cover" loading="lazy" />
      <div className="min-w-0 flex-1">
        <h2 className="font-medium truncate">{ex.title}</h2>
        <p className="text-sm text-ink-400 truncate">{ex.muscleGroup}{ex.equipment ? ` · ${ex.equipment}` : ''}</p>
      </div>
      {ex.hasVideo && <span className="text-xs text-lime-500 tabular-nums">{ex.videoDurationSecs}s</span>}
    </li>
  ))}
</ul>

// portrait container so a 9:16 clip fills the frame
<div className="aspect-[9/16] w-full overflow-hidden rounded-xl bg-ink-800">
  <video src={ex.videoUrl} className="h-full w-full object-cover" controls playsInline />
</div>

function FilterSection({ label, options, current, param }: {
  label: string; options: string[]; current?: string; param: string;
}) {
  return (
    <section className="mb-6">
      <h4 className="text-xs uppercase tracking-widest text-ink-400 mb-3">{label}</h4>
      <div className="flex flex-wrap gap-2">
        {options.map((opt) => {
          const active = current === opt;
          const next = new URLSearchParams();
          if (!active) next.set(param, opt);   // clicking the active chip clears it
          return (
            <Link key={opt} href={`/?${next.toString()}`}
              className={active ? 'bg-ink-200 text-ink-950 rounded-full px-3 py-1.5 text-sm'
                               : 'bg-ink-800 text-ink-200 rounded-full px-3 py-1.5 text-sm'}>
              {opt}
            </Link>
          );
        })}
      </div>
    </section>
  );
}

YMOVE_API_KEY=ym_your_key_here
npm run dev   # http://localhost:3000

<form method="GET" action="/" className="space-y-5">
  <Selector label="Muscle group"  name="muscleGroup"  options={MUSCLE_GROUPS}    current={params.muscleGroup} />
  <Selector label="Equipment"     name="equipment"    options={EQUIPMENT_OPTIONS} current={params.equipment ?? 'any'} />
  <Selector label="Difficulty"    name="difficulty"   options={DIFFICULTIES}     current={params.difficulty} />
  <Selector label="Exercises"     name="exerciseCount" options={COUNTS.map(String)} current={String(params.exerciseCount)} />
  <button type="submit" className="w-full rounded-lg bg-lime-500 text-ink-950 font-semibold py-3">Generate workout</button>
</form>

export const getServerSideProps: GetServerSideProps<Props> = async ({ query }) => {
  const params = {
    muscleGroup: (typeof query.muscleGroup === 'string' ? query.muscleGroup : 'chest') as MuscleGroupSlug,
    equipment: typeof query.equipment === 'string' && query.equipment !== 'any'
      ? (query.equipment as EquipmentSlug) : undefined,
    difficulty: (typeof query.difficulty === 'string' ? query.difficulty : 'intermediate') as Difficulty,
    exerciseCount: typeof query.exerciseCount === 'string' ? parseInt(query.exerciseCount, 10) : 6,
  };
  try {
    const workout = await ymove.workouts.generate(params);
    return { props: { workout, params, error: null } };
  } catch (e: any) {
    return { props: { workout: null, params, error: e?.message ?? 'Failed to generate' } };
  }
};

{workout.exercises.map((we, i) => (
  <li key={we.exercise.id ?? i} className="p-5">
    <h3 className="font-medium">{we.exercise.title}</h3>
    <table className="mt-3 w-full text-sm tabular-nums">
      <thead><tr className="text-xs uppercase text-ink-400">
        <th className="text-left">Set</th><th className="text-left">Reps</th><th className="text-right">Rest</th>
      </tr></thead>
      <tbody>
        {Array.from({ length: we.sets }).map((_, s) => (
          <tr key={s}><td>{s + 1}</td><td>{we.reps}</td><td className="text-right">{we.restSeconds}s</td></tr>
        ))}
      </tbody>
    </table>
  </li>
))}