create-brainerce-store 1.28.13 → 1.28.17

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -1,76 +1,73 @@
-import type { Metadata } from 'next';
-import { headers } from 'next/headers';
-import { notFound } from 'next/navigation';
-import { getServerClient } from '@/lib/brainerce';
-import { ProductJsonLd } from '@/components/seo/product-json-ld';
-import { ProductClientSection } from './product-client-section';
-
-type Props = {
-  params: Promise<{ slug: string }>;
-};
-
-// Read the locale the middleware set on this request so the SDK can resolve
-// translated slugs (translations[locale].slug) in addition to the base slug.
-async function getRequestLocale(): Promise<string | undefined> {
-  return (await headers()).get('x-locale') ?? undefined;
-}
-
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { slug } = await params;
-  const locale = await getRequestLocale();
-
-  try {
-    const client = getServerClient();
-    const product = await client.getProductBySlug(slug, { locale });
-    const imageUrl = product.images?.[0]?.url;
-    const description = product.description?.substring(0, 160) || product.name;
-
-    return {
-      title: product.name,
-      description,
-      alternates: {
-        canonical: `/products/${slug}`,
-      },
-      openGraph: {
-        title: product.name,
-        description,
-        images: imageUrl ? [{ url: imageUrl, alt: product.name }] : [],
-        type: 'website',
-      },
-      twitter: {
-        card: 'summary_large_image',
-        title: product.name,
-        description,
-        images: imageUrl ? [imageUrl] : [],
-      },
-    };
-  } catch {
-    return {
-      title: 'Product not found',
-    };
-  }
-}
-
-export default async function ProductDetailPage({ params }: Props) {
-  const { slug } = await params;
-  const locale = await getRequestLocale();
-
-  let product;
-  try {
-    const client = getServerClient();
-    product = await client.getProductBySlug(slug, { locale });
-  } catch {
-    notFound();
-  }
-
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-  const productUrl = `${baseUrl}/products/${slug}`;
-  const currency = process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
-
-  return (
-    <>
-      <ProductJsonLd product={product} url={productUrl} currency={currency} />
-      <ProductClientSection product={product} />
-    </>
-  );
-}
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { getServerClient } from '@/lib/brainerce';
+import { ProductJsonLd } from '@/components/seo/product-json-ld';
+import { ProductClientSection } from './product-client-section';
+
+type Props = {
+  params: Promise<{ slug: string; locale?: string }>;
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug, locale } = await params;
+
+  try {
+    const client = getServerClient(locale);
+    const product = await client.getProductBySlug(slug);
+    const imageUrl = product.images?.[0]?.url;
+    // Prefer merchant-authored SEO copy; fall back to the visible name/description.
+    // Both are served already locale-resolved by the backend.
+    const seoTitle = (product as { seoTitle?: string | null }).seoTitle || product.name;
+    const seoDescription =
+      (product as { seoDescription?: string | null }).seoDescription ||
+      product.description?.substring(0, 160) ||
+      product.name;
+
+    return {
+      title: seoTitle,
+      description: seoDescription,
+      alternates: {
+        canonical: `/products/${slug}`,
+      },
+      openGraph: {
+        title: seoTitle,
+        description: seoDescription,
+        images: imageUrl ? [{ url: imageUrl, alt: product.name }] : [],
+        type: 'website',
+      },
+      twitter: {
+        card: 'summary_large_image',
+        title: seoTitle,
+        description: seoDescription,
+        images: imageUrl ? [imageUrl] : [],
+      },
+    };
+  } catch {
+    return {
+      title: 'Product not found',
+    };
+  }
+}
+
+export default async function ProductDetailPage({ params }: Props) {
+  const { slug, locale } = await params;
+
+  let product;
+  try {
+    const client = getServerClient(locale);
+    product = await client.getProductBySlug(slug);
+  } catch {
+    notFound();
+  }
+
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+  const productUrl = `${baseUrl}/products/${slug}`;
+  const currency = process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
+
+  return (
+    <>
+      <ProductJsonLd product={product} url={productUrl} currency={currency} />
+      <ProductClientSection product={product} />
+    </>
+  );
+}