create-brainerce-store 1.65.0 → 1.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.65.0",
+  "version": "1.66.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

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

@@ -8,6 +8,7 @@ import { decodeSlug } from '@/core/lib/utils';
 import { ProductJsonLd } from '@/components/seo/product-json-ld';
 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 = {
@@ -181,6 +182,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/components/seo/product-json-ld.tsx

@@ -1,5 +1,5 @@
 import type { Product, ShippingSummaryEntry } from 'brainerce';
-import { buildProductJsonLd, buildBreadcrumbJsonLd } from 'brainerce';
+import { buildProductJsonLd, buildBreadcrumbJsonLd, buildProductFaqJsonLd } from 'brainerce';
 import { getNonce } from '@/core/lib/nonce';
 import { resolveCurrency } from '@/core/lib/resolve-currency';
 
@@ -42,6 +42,11 @@ export async function ProductJsonLd({ product, url, currency, shipping }: Produc
     { name: product.name, url },
   ]);
 
+  // FAQPage from the product's Q&A — null (no script) when the product has
+  // none. The visible FAQ section on the PDP renders the SAME pairs; this is
+  // corroboration for engines, never a substitute for visible text.
+  const faqJsonLd = buildProductFaqJsonLd(product);
+
   return (
     <>
       <script
@@ -56,6 +61,14 @@ export async function ProductJsonLd({ product, url, currency, shipping }: Produc
         suppressHydrationWarning
         dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
       />
+      {faqJsonLd ? (
+        <script
+          type="application/ld+json"
+          nonce={nonce}
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: serializeJsonLd(faqJsonLd) }}
+        />
+      ) : null}
     </>
   );
 }

package/templates/nextjs/base/src/ui/product/faq-section.tsx.ejs

@@ -0,0 +1,46 @@
+import type { Product } from 'brainerce';
+<% if (i18nEnabled) { %>import { getMessages, defaultLocale } from '@/i18n';<% } else { %>import { defaultLocale, messages } from '@/i18n';<% } %>
+
+type FaqStrings = Record<string, string>;
+
+<% if (i18nEnabled) { %>async function getFaqStrings(locale: string): Promise<FaqStrings> {
+  return ((await getMessages(locale)).faq ?? {}) as FaqStrings;
+}<% } else { %>async function getFaqStrings(_locale: string): Promise<FaqStrings> {
+  return ((messages as Record<string, unknown>).faq ?? {}) as FaqStrings;
+}<% } %>
+
+interface ProductFaqSectionProps {
+  product: Product;
+  locale?: string;
+}
+
+/**
+ * Visible product Q&A — the extractable question/answer format AI answer
+ * engines cite. The SAME pairs are emitted as FAQPage JSON-LD by
+ * <ProductJsonLd> (both read product.faq, so they can never drift). Server
+ * component on purpose: the pairs must be in the initial HTML payload — AI
+ * crawlers don't run JavaScript. Content inside a closed <details> is still
+ * present in the HTML, so the accordion costs nothing for extraction.
+ */
+export async function ProductFaqSection({
+  product,
+  locale = defaultLocale,
+}: ProductFaqSectionProps) {
+  const pairs = (product.faq ?? []).filter((item) => item?.q && item?.a);
+  if (pairs.length === 0) return null;
+  const t = await getFaqStrings(locale);
+
+  return (
+    <section className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+      <h2 className="mb-6 text-2xl font-semibold">{t.title ?? 'Frequently asked questions'}</h2>
+      <div className="divide-y rounded-xl border">
+        {pairs.map((item) => (
+          <details key={item.q} className="px-5 py-4">
+            <summary className="cursor-pointer text-base font-medium">{item.q}</summary>
+            <p className="mt-2 text-sm leading-relaxed opacity-80">{item.a}</p>
+          </details>
+        ))}
+      </div>
+    </section>
+  );
+}