shopify-template/app/policies/[handle]/page.tsx

import { notFound } from 'next/navigation';
import { getShopPolicy, POLICY_HANDLES } from '@/hooks/use-shopify-policies';

export function generateStaticParams() {
  return POLICY_HANDLES.map((handle) => ({ handle }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ handle: string }>;
}) {
  const { handle } = await params;
  const policy = await getShopPolicy(handle);

  return {
    title: policy ? `${policy.title} — Shop` : 'Policy — Shop',
  };
}

export default async function PolicyPage({
  params,
}: {
  params: Promise<{ handle: string }>;
}) {
  const { handle } = await params;
  const policy = await getShopPolicy(handle);

  if (!policy) {
    notFound();
  }

  return (
    <main className="max-w-screen-2xl mx-auto w-full px-5 lg:px-10 py-16">
      <div className="max-w-2xl mx-auto">
        <h1 className="text-3xl md:text-4xl font-normal text-foreground">
          {policy.title}
        </h1>

        <div
          className="policy-body mt-8 text-[15px] leading-7 text-foreground"
          dangerouslySetInnerHTML={{ __html: policy.body }}
        />
      </div>
    </main>
  );
}