Use GymAssets with Next.js

Render GymAssets images with Next.js, configure the image host, and choose the correct origin policy for optimized requests.

Next.js can render GymAssets through next/image or a plain <img>. The important difference is where the request originates: the optimizer fetches from a Next.js server, while a plain image element fetches from the visitor’s browser.

1. Allow the image host

   Add the current GymAssets image hostname to remotePatterns.

   next.config.js

   /** @type {import('next').NextConfig} */
   module.exports = {
   images: {
     remotePatterns: [
       {
         protocol: 'https',
         hostname: 'cdn.gymassets.dev',
       },
     ],
   },
   };

2. Store the publishable key in a public environment variable

   The value is meant to appear in the image URL. Do not use the secret half here.

   .env.local

   NEXT_PUBLIC_GYM_ASSETS_KEY=pk_xxxxxxxxxxxx

3. Render the image

   Compose the stable URL from the figure, side, muscle ids, and display width.

   MuscleDiagram.tsx

   import Image from 'next/image';
   
   export function MuscleDiagram() {
   const key = process.env.NEXT_PUBLIC_GYM_ASSETS_KEY;
   const src =
     `https://cdn.gymassets.dev/v1/${key}/body/male/front.webp?primary=pectorals&w=320`;
   
   return <Image src={src} width={320} height={796} alt="Chest muscles highlighted" />;
   }

Keep data requests on the server

The secret half belongs in a server-only environment variable. Use it in Route Handlers, Server Components, or server actions—not in a component downloaded by the browser.