Product detail page

// app/products/[slug]/page.tsx
import {
  createClient,
  createProductSelectionCodec,
  resolveProductSelection,
  ProductSelectionCodecError,
} from '@01.software/sdk'
import { notFound } from 'next/navigation'

export const dynamic = 'force-dynamic'

export default async function ProductPage({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>
  searchParams: Promise<Record<string, string | string[] | undefined>>
}) {
  const { slug } = await params
  const query = new URLSearchParams()
  for (const [key, value] of Object.entries(await searchParams)) {
    if (typeof value === 'string') query.set(key, value)
  }
  const client = createClient({
    publishableKey: process.env.NEXT_PUBLIC_SOFTWARE_PUBLISHABLE_KEY!,
    apiUrl: process.env.SOFTWARE_API_URL,
  })
  const result = await client.commerce.product.detailCatalog({ slug })
  if (!result.found) return notFound()
  const detail = result.product
  const codec = createProductSelectionCodec(detail, { emit: 'canonical-id' })
  let normalized: ReturnType<typeof codec.parse>
  try {
    normalized = codec.parse(query.toString())
  } catch (error) {
    if (!(error instanceof ProductSelectionCodecError)) throw error
    // Stale/ambiguous URL input is not a catalog transport failure.
    normalized = codec.parse('')
  }
  const selection = resolveProductSelection(detail, normalized)
  const selectionQuery = codec.stringify(normalized)
  const href = `/products/${encodeURIComponent(slug)}${selectionQuery ? `?${selectionQuery}` : ''}`
  return (
    <main>
      <h1>
        {typeof detail.product.title === 'string'
          ? detail.product.title
          : (detail.product.title.en ?? detail.product.title.ko ?? 'Untitled')}
      </h1>
      <a href={href}>Selection link</a>
      <p>
        {selection.selectedVariant ? 'Variant selected' : 'Choose an option'}
      </p>
    </main>
  )
}