create-brainerce-store 1.65.0 → 1.67.0

package/templates/nextjs/base/src/app/page.tsx

@@ -1,64 +1,65 @@
-import type { Metadata } from 'next';
-import { getServerClient } from '@/core/lib/brainerce';
-import { buildMetaDescription } from '@/core/lib/seo';
-import { OrganizationJsonLd } from '@/components/seo/organization-json-ld';
-import { RichTextBlock } from '@/ui/layout/rich-text-block';
-import { HomeClient } from '@/ui/home/home-client';
-
-// Build homepage metadata server-side so Google, Facebook, WhatsApp etc.
-// see a real <meta name="description"> on first request. Falls back to the
-// store name when the merchant hasn't authored a meta description yet.
-export async function generateMetadata(): Promise<Metadata> {
-  try {
-    const storeInfo = await getServerClient().getStoreInfo();
-    const description = buildMetaDescription(storeInfo.metaDescription) || undefined;
-    return {
-      title: storeInfo.name,
-      description,
-      openGraph: {
-        title: storeInfo.name,
-        description,
-        type: 'website',
-      },
-      twitter: {
-        card: 'summary_large_image',
-        title: storeInfo.name,
-        description,
-      },
-    };
-  } catch {
-    return {};
-  }
-}
-
-export default async function HomePage() {
-  // Fetch store info server-side so the JSON-LD is in the initial HTML —
-  // crawlers and AI Overviews see it without needing to execute JavaScript.
-  // Failure here is non-fatal: the client component re-fetches via the
-  // StoreProvider so the page still renders.
-  //
-  // Also fetch the merchant's homepage intro (RICH_TEXT key='main'). When
-  // present, it renders as a sanitized HTML block above the product grid —
-  // typical use is brand introduction, value-prop copy, or a seasonal
-  // announcement that needs more formatting than the AnnouncementBar.
-  // When absent, RichTextBlock returns null cleanly so the layout collapses
-  // to just the product grid.
-  const client = getServerClient();
-  const [storeInfo, intro] = await Promise.all([
-    client.getStoreInfo().catch(() => null),
-    client.content.richText.get('main').catch(() => null),
-  ]);
-
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-
-  return (
-    <>
-      {storeInfo && baseUrl ? <OrganizationJsonLd storeInfo={storeInfo} baseUrl={baseUrl} /> : null}
-      <RichTextBlock
-        block={intro}
-        className="prose prose-sm dark:prose-invert mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8"
-      />
-      <HomeClient />
-    </>
-  );
-}
+import type { Metadata } from 'next';
+import { getServerClient } from '@/core/lib/brainerce.server';
+import { buildMetaDescription } from '@/core/lib/seo';
+import { OrganizationJsonLd } from '@/components/seo/organization-json-ld';
+import { getCanonicalSiteUrl } from '@/core/lib/site-url';
+import { RichTextBlock } from '@/ui/layout/rich-text-block';
+import { HomeClient } from '@/ui/home/home-client';
+
+// Build homepage metadata server-side so Google, Facebook, WhatsApp etc.
+// see a real <meta name="description"> on first request. Falls back to the
+// store name when the merchant hasn't authored a meta description yet.
+export async function generateMetadata(): Promise<Metadata> {
+  try {
+    const storeInfo = await (await getServerClient()).getStoreInfo();
+    const description = buildMetaDescription(storeInfo.metaDescription) || undefined;
+    return {
+      title: storeInfo.name,
+      description,
+      openGraph: {
+        title: storeInfo.name,
+        description,
+        type: 'website',
+      },
+      twitter: {
+        card: 'summary_large_image',
+        title: storeInfo.name,
+        description,
+      },
+    };
+  } catch {
+    return {};
+  }
+}
+
+export default async function HomePage() {
+  // Fetch store info server-side so the JSON-LD is in the initial HTML —
+  // crawlers and AI Overviews see it without needing to execute JavaScript.
+  // Failure here is non-fatal: the client component re-fetches via the
+  // StoreProvider so the page still renders.
+  //
+  // Also fetch the merchant's homepage intro (RICH_TEXT key='main'). When
+  // present, it renders as a sanitized HTML block above the product grid —
+  // typical use is brand introduction, value-prop copy, or a seasonal
+  // announcement that needs more formatting than the AnnouncementBar.
+  // When absent, RichTextBlock returns null cleanly so the layout collapses
+  // to just the product grid.
+  const client = await getServerClient();
+  const [storeInfo, intro] = await Promise.all([
+    client.getStoreInfo().catch(() => null),
+    client.content.richText.get('main').catch(() => null),
+  ]);
+
+  const baseUrl = await getCanonicalSiteUrl();
+
+  return (
+    <>
+      {storeInfo && baseUrl ? <OrganizationJsonLd storeInfo={storeInfo} baseUrl={baseUrl} /> : null}
+      <RichTextBlock
+        block={intro}
+        className="prose prose-sm dark:prose-invert mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8"
+      />
+      <HomeClient />
+    </>
+  );
+}

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

@@ -1,92 +1,92 @@
-/**
- * Static page route — fully driven by the merchant's dashboard.
- *
- * The merchant creates pages in the Brainerce dashboard under
- *   Sell → Content → Page (one row per page, each with its own `slug`)
- *
- * This catch-all renders any PAGE by its `data.slug`. `/pages/about` →
- * fetches PAGE with slug='about'. Mounting under `/pages/` (rather than
- * the root) keeps the route from clashing with existing static routes
- * like /cart, /login, /products.
- *
- * Security: page HTML is sanitized via `sanitizeHtml` before injecting.
- */
-import * as React from 'react';
-import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-
-import { getServerClient } from '@/core/lib/brainerce';
-import { sanitizeHtml } from '@/core/lib/sanitize';
-import { decodeSlug } from '@/core/lib/utils';
-
-<% if (i18nEnabled) { %>
-type PageProps = {
-  params: Promise<{ locale: string; slug: string }>;
-};
-
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
-  const { locale, slug: rawSlug } = await params;
-  const slug = decodeSlug(rawSlug);
-  const page = await getServerClient(locale).content.page.getBySlug(slug, locale).catch(() => null);
-  if (!page) return { title: slug };
-  const seo = page.data.seo ?? {};
-  return {
-    title: seo.title ?? page.data.title,
-    description: seo.description,
-    openGraph: seo.ogImage ? { images: [{ url: seo.ogImage }] } : undefined,
-  };
-}
-
-export default async function StaticPage({ params }: PageProps) {
-  const { locale, slug: rawSlug } = await params;
-  const slug = decodeSlug(rawSlug);
-  const page = await getServerClient(locale).content.page.getBySlug(slug, locale).catch(() => null);
-  if (!page) notFound();
-  return (
-    <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">
-        {page.data.title}
-      </h1>
-      <div
-        className="prose prose-sm dark:prose-invert max-w-none"
-        dangerouslySetInnerHTML={{ __html: sanitizeHtml(page.data.html) }}
-      />
-    </article>
-  );
-}
-<% } else { %>
-type PageProps = {
-  params: Promise<{ slug: string }>;
-};
-
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
-  const { slug: rawSlug } = await params;
-  const slug = decodeSlug(rawSlug);
-  const page = await getServerClient().content.page.getBySlug(slug).catch(() => null);
-  if (!page) return { title: slug };
-  const seo = page.data.seo ?? {};
-  return {
-    title: seo.title ?? page.data.title,
-    description: seo.description,
-    openGraph: seo.ogImage ? { images: [{ url: seo.ogImage }] } : undefined,
-  };
-}
-
-export default async function StaticPage({ params }: PageProps) {
-  const { slug: rawSlug } = await params;
-  const slug = decodeSlug(rawSlug);
-  const page = await getServerClient().content.page.getBySlug(slug).catch(() => null);
-  if (!page) notFound();
-  return (
-    <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">
-        {page.data.title}
-      </h1>
-      <div
-        className="prose prose-sm dark:prose-invert max-w-none"
-        dangerouslySetInnerHTML={{ __html: sanitizeHtml(page.data.html) }}
-      />
-    </article>
-  );
-}
-<% } %>
+/**
+ * Static page route — fully driven by the merchant's dashboard.
+ *
+ * The merchant creates pages in the Brainerce dashboard under
+ *   Sell → Content → Page (one row per page, each with its own `slug`)
+ *
+ * This catch-all renders any PAGE by its `data.slug`. `/pages/about` →
+ * fetches PAGE with slug='about'. Mounting under `/pages/` (rather than
+ * the root) keeps the route from clashing with existing static routes
+ * like /cart, /login, /products.
+ *
+ * Security: page HTML is sanitized via `sanitizeHtml` before injecting.
+ */
+import * as React from 'react';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+import { getServerClient } from '@/core/lib/brainerce.server';
+import { sanitizeHtml } from '@/core/lib/sanitize';
+import { decodeSlug } from '@/core/lib/utils';
+
+<% if (i18nEnabled) { %>
+type PageProps = {
+  params: Promise<{ locale: string; slug: string }>;
+};
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale, slug: rawSlug } = await params;
+  const slug = decodeSlug(rawSlug);
+  const page = await (await getServerClient(locale)).content.page.getBySlug(slug, locale).catch(() => null);
+  if (!page) return { title: slug };
+  const seo = page.data.seo ?? {};
+  return {
+    title: seo.title ?? page.data.title,
+    description: seo.description,
+    openGraph: seo.ogImage ? { images: [{ url: seo.ogImage }] } : undefined,
+  };
+}
+
+export default async function StaticPage({ params }: PageProps) {
+  const { locale, slug: rawSlug } = await params;
+  const slug = decodeSlug(rawSlug);
+  const page = await (await getServerClient(locale)).content.page.getBySlug(slug, locale).catch(() => null);
+  if (!page) notFound();
+  return (
+    <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">
+        {page.data.title}
+      </h1>
+      <div
+        className="prose prose-sm dark:prose-invert max-w-none"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(page.data.html) }}
+      />
+    </article>
+  );
+}
+<% } else { %>
+type PageProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug: rawSlug } = await params;
+  const slug = decodeSlug(rawSlug);
+  const page = await (await getServerClient()).content.page.getBySlug(slug).catch(() => null);
+  if (!page) return { title: slug };
+  const seo = page.data.seo ?? {};
+  return {
+    title: seo.title ?? page.data.title,
+    description: seo.description,
+    openGraph: seo.ogImage ? { images: [{ url: seo.ogImage }] } : undefined,
+  };
+}
+
+export default async function StaticPage({ params }: PageProps) {
+  const { slug: rawSlug } = await params;
+  const slug = decodeSlug(rawSlug);
+  const page = await (await getServerClient()).content.page.getBySlug(slug).catch(() => null);
+  if (!page) notFound();
+  return (
+    <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">
+        {page.data.title}
+      </h1>
+      <div
+        className="prose prose-sm dark:prose-invert max-w-none"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(page.data.html) }}
+      />
+    </article>
+  );
+}
+<% } %>

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

@@ -1,13 +1,15 @@
 import type { Metadata } from 'next';
 import { notFound, permanentRedirect } from 'next/navigation';
 import { getProductPriceInfo } from 'brainerce';
-import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
+import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
 import { resolveCurrency } from '@/core/lib/resolve-currency';
 import { buildMetaDescription } from '@/core/lib/seo';
 import { decodeSlug } from '@/core/lib/utils';
 import { ProductJsonLd } from '@/components/seo/product-json-ld';
+import { getCanonicalSiteUrl } from '@/core/lib/site-url';
 import { Breadcrumbs } from '@/components/seo/breadcrumbs';
 import { ReviewsSection } from '@/ui/product/reviews-section';
+import { ProductFaqSection } from '@/ui/product/faq-section';
 import { ProductClientSection } from '@/ui/product/product-client-section';
 
 type Props = {
@@ -37,7 +39,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const slug = decodeSlug(rawSlug);
 
   try {
-    const client = getServerClient(locale);
+    const client = await getServerClient(locale);
     // Fetch product + store info in parallel; storeInfo gives us the live
     // currency for OG price tags (with env-var + USD fallbacks so we never
     // silently emit a wrong currency when the API is briefly unreachable).
@@ -69,7 +71,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     // Locales come from storeInfo.i18n — already fetched above, zero extra cost.
     const supportedLocales = storeInfo?.i18n?.supportedLocales ?? [];
     const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';
-    const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+    const baseUrl = await getCanonicalSiteUrl();
     const baseSlug = product.slug || slug;
     const localeSlugs = product.localeSlugs ?? {};
 
@@ -132,7 +134,7 @@ export default async function ProductDetailPage({ params }: Props) {
   const { slug: rawSlug, locale } = await params;
   const slug = decodeSlug(rawSlug);
 
-  const client = getServerClient(locale);
+  const client = await getServerClient(locale);
   let product;
   try {
     product = await client.getProductBySlug(slug);
@@ -152,7 +154,7 @@ export default async function ProductDetailPage({ params }: Props) {
     notFound();
   }
 
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+  const baseUrl = await getCanonicalSiteUrl();
   const productUrl = `${baseUrl}/products/${slug}`;
   // Reuse the cached storeInfo from generateMetadata's call — React cache()
   // collapses both into one backend request per render. resolveCurrency owns
@@ -181,6 +183,9 @@ export default async function ProductDetailPage({ params }: Props) {
         <Breadcrumbs items={breadcrumbItems} />
       </div>
       <ProductClientSection product={product} />
+      {/* Visible Q&A + the FAQPage JSON-LD above read the same product.faq —
+          the extractable format AI answer engines cite. */}
+      <ProductFaqSection product={product} locale={locale} />
       <ReviewsSection productId={product.id} />
     </>
   );

package/templates/nextjs/base/src/app/robots.ts

@@ -1,4 +1,5 @@
 import type { MetadataRoute } from 'next';
+import { getCanonicalSiteUrl } from '@/core/lib/site-url';
 
 /**
  * robots.txt with an explicit AI-crawler policy.
@@ -47,8 +48,8 @@ const AI_TRAINING_BOTS = [
   'Applebot-Extended',
 ];
 
-export default function robots(): MetadataRoute.Robots {
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
+export default async function robots(): Promise<MetadataRoute.Robots> {
+  const baseUrl = await getCanonicalSiteUrl();
 
   return {
     rules: [

package/templates/nextjs/base/src/app/sitemap.ts

@@ -4,7 +4,8 @@ import {
   getCategorySitemapEntries,
   getProductSitemapEntries,
 } from 'brainerce';
-import { getServerClient } from '@/core/lib/brainerce';
+import { getServerClient } from '@/core/lib/brainerce.server';
+import { getCanonicalSiteUrl } from '@/core/lib/site-url';
 
 /**
  * Storefront sitemap: static pages + every published product, category,
@@ -16,9 +17,9 @@ import { getServerClient } from '@/core/lib/brainerce';
  * The helper uses a dedicated lightweight endpoint with a 5000-product cap.
  */
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
+  const baseUrl = await getCanonicalSiteUrl();
 
-  const client = getServerClient();
+  const client = await getServerClient();
   const storeInfo = await client.getStoreInfo().catch(() => null);
   const supportedLocales = storeInfo?.i18n?.supportedLocales ?? [];
   const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';