Next.js Integration

Simple static image

For a fixed image, render an ordinary img. No remote host configuration is needed:

export default function Page() {
  return (
    <img
      src="https://softhoursdiary-emojis.pages.dev/[emojis/svg/1f632.svg"
      alt="Surprised face"
      width={36}
      height={36}
      loading="lazy"
    />
  );
}

Resolve a dynamic asset on the server

Call the JSON resolver from a Server Component and render its returned URL:

const CDN = "https://softhoursdiary-emojis.pages.dev";

async function resolveAsset(type: string, id: string, quality: string) {
  const params = new URLSearchParams({ type, id, quality });
  const response = await fetch(
    CDN + "/api/v1/asset?" + params,
    { next: { revalidate: 86400 } }
  );
  const result = await response.json();

  if (!response.ok || !result.ok) {
    throw new Error(result.error?.message || "Asset lookup failed.");
  }

  return result.data.url as string;
}

export default async function Page() {
  const src = await resolveAsset("emoji", "1f632", "svg");
  return <img src={src} alt="Surprised face" width={36} height={36} />;
}

The resolver returns the URL only. The browser still makes a separate image request to the CDN.

Using next/image

If you prefer Next.js image optimisation, allow the CDN host in next.config.ts:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "softhoursdiary-emojis.pages.dev",
        pathname: "/**"
      }
    ]
  }
};

export default nextConfig;

A plain img element does not require remotePatterns.

Production notes

• Set descriptive alt text for informative images.
• Provide width and height to reduce layout shift.
• Use the direct URL for fixed assets and the resolver for dynamic IDs.
• Do not assume a generated URL confirms that the image file exists.

See the REST API guide for parameter and response details.