create-brainerce-store 1.66.0 → 1.68.0

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

@@ -1,11 +1,12 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import type { Product } from 'brainerce';
-import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
+import { BrainerceError } from 'brainerce';
+import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
 import { buildMetaDescription } from '@/core/lib/seo';
 import { sanitizeHtml } from '@/core/lib/sanitize';
 import { decodeSlug } from '@/core/lib/utils';
 import { CategoryJsonLd } from '@/components/seo/category-json-ld';
+import { getCanonicalSiteUrl } from '@/core/lib/site-url';
 import { Breadcrumbs } from '@/components/seo/breadcrumbs';
 import { ProductGrid } from '@/ui/product/product-grid';
 
@@ -27,7 +28,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const slug = decodeSlug(rawSlug);
   try {
     const [category, storeInfo] = await Promise.all([
-      getServerClient(locale).getCategoryBySlug(slug),
+      (await getServerClient(locale)).getCategoryBySlug(slug),
       fetchStoreInfo(locale),
     ]);
     const description =
@@ -42,7 +43,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     // emits, so the alternates always match real, crawlable URLs.
     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 hreflangLanguages =
       supportedLocales.length > 1
         ? Object.fromEntries([
@@ -76,26 +77,35 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
         images: category.image ? [category.image] : [],
       },
     };
-  } catch {
-    return { title: 'Category not found' };
+  } catch (err) {
+    if (err instanceof BrainerceError && err.statusCode === 404) {
+      return { title: 'Category not found' };
+    }
+    // Anything else (channel origin rejection, network failure) hits the page
+    // render below too and surfaces there — don't stamp a misleading title.
+    return {};
   }
 }
 
 export default async function CategoryPage({ params }: Props) {
   const { slug: rawSlug, locale } = await params;
   const slug = decodeSlug(rawSlug);
-  const client = getServerClient(locale);
+  const client = await getServerClient(locale);
 
-  const category = await client.getCategoryBySlug(slug).catch(() => null);
+  // Only a genuine 404 becomes a storefront 404; a 403 from the channel's
+  // origin check or a network failure must surface as the error it is, not
+  // masquerade as a missing category (or an empty one).
+  const category = await client.getCategoryBySlug(slug).catch((err: unknown) => {
+    if (err instanceof BrainerceError && err.statusCode === 404) return null;
+    throw err;
+  });
   if (!category) notFound();
 
   // The listing endpoint owns pagination/FX/publish gating — reuse it rather
   // than duplicating a product query here.
-  const { data: products } = await client
-    .getProducts({ categories: [category.id], limit: 48 })
-    .catch(() => ({ data: [] as Product[] }));
+  const { data: products } = await client.getProducts({ categories: [category.id], limit: 48 });
 
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+  const baseUrl = await getCanonicalSiteUrl();
   const url = `${baseUrl}/category/${category.slug || slug}`;
   const localePrefix = locale ? `/${locale}` : '';
   const breadcrumbItems = [

package/templates/nextjs/base/src/app/error.tsx.ejs

@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect } from 'react';
+import Link from 'next/link';
+
+/**
+ * Error page — rendered when a page render throws. Kept deliberately separate
+ * from the 404 page: an API failure (a rejected Origin, a network error, a
+ * 5xx) is NOT "product not found", and dressing it up as a 404 sends the
+ * merchant hunting for a slug bug that isn't there. The full error is in the
+ * server log; this page only needs to say "temporary" and offer a retry.
+ */
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // The server log has the full error; the digest printed here links the two.
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="mx-auto flex max-w-2xl flex-col items-center justify-center px-4 py-24 text-center">
+      <p className="text-sm font-medium text-muted-foreground">
+        <%- language === 'he' ? 'שגיאה' : 'Error' %>
+      </p>
+      <h1 className="mt-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+        <%- language === 'he' ? 'משהו השתבש' : 'Something went wrong' %>
+      </h1>
+      <p className="mt-4 text-muted-foreground">
+        <%- language === 'he' ? 'זו תקלה זמנית בטעינת העמוד — לא עמוד חסר. נסו שוב בעוד רגע.' : 'This is a temporary problem loading the page — not a missing page. Please try again in a moment.' %>
+      </p>
+      <div className="mt-8 flex gap-4">
+        <button
+          type="button"
+          onClick={reset}
+          className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
+        >
+          <%- language === 'he' ? 'לנסות שוב' : 'Try again' %>
+        </button>
+        <Link
+          href="/"
+          className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted"
+        >
+          <%- language === 'he' ? 'לדף הבית' : 'Go home' %>
+        </Link>
+      </div>
+    </div>
+  );
+}

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

@@ -1,46 +1,46 @@
-/**
- * FAQ page — fully driven by the merchant's dashboard configuration.
- *
- * The merchant configures FAQs in the Brainerce dashboard under
- *   Sell → Content → FAQ
- *
- * This page fetches the merchant's *primary* FAQ (key='main'). For topical
- * FAQs (e.g. /faq/shipping), copy this route to `app/faq/[topic]/page.tsx`
- * and pass `params.topic` to `client.content.faq.get(topic, locale)`.
- */
-import * as React from 'react';
-import type { Metadata } from 'next';
-
-import { getServerClient } from '@/core/lib/brainerce';
-import { FaqSection } from '@/ui/layout/faq-section';
-<% if (i18nEnabled) { %>
-type PageProps = {
-  params: Promise<{ locale: string }>;
-};
-
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
-  const { locale } = await params;
-  const faq = await getServerClient(locale).content.faq.get('main', locale).catch(() => null);
-  return {
-    title: faq?.name ?? 'FAQ',
-  };
-}
-
-export default async function FaqPage({ params }: PageProps) {
-  const { locale } = await params;
-  const faq = await getServerClient(locale).content.faq.get('main', locale).catch(() => null);
-  return <FaqSection faq={faq} />;
-}
-<% } else { %>
-export async function generateMetadata(): Promise<Metadata> {
-  const faq = await getServerClient().content.faq.get('main').catch(() => null);
-  return {
-    title: faq?.name ?? 'FAQ',
-  };
-}
-
-export default async function FaqPage() {
-  const faq = await getServerClient().content.faq.get('main').catch(() => null);
-  return <FaqSection faq={faq} />;
-}
-<% } %>
+/**
+ * FAQ page — fully driven by the merchant's dashboard configuration.
+ *
+ * The merchant configures FAQs in the Brainerce dashboard under
+ *   Sell → Content → FAQ
+ *
+ * This page fetches the merchant's *primary* FAQ (key='main'). For topical
+ * FAQs (e.g. /faq/shipping), copy this route to `app/faq/[topic]/page.tsx`
+ * and pass `params.topic` to `client.content.faq.get(topic, locale)`.
+ */
+import * as React from 'react';
+import type { Metadata } from 'next';
+
+import { getServerClient } from '@/core/lib/brainerce.server';
+import { FaqSection } from '@/ui/layout/faq-section';
+<% if (i18nEnabled) { %>
+type PageProps = {
+  params: Promise<{ locale: string }>;
+};
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale } = await params;
+  const faq = await (await getServerClient(locale)).content.faq.get('main', locale).catch(() => null);
+  return {
+    title: faq?.name ?? 'FAQ',
+  };
+}
+
+export default async function FaqPage({ params }: PageProps) {
+  const { locale } = await params;
+  const faq = await (await getServerClient(locale)).content.faq.get('main', locale).catch(() => null);
+  return <FaqSection faq={faq} />;
+}
+<% } else { %>
+export async function generateMetadata(): Promise<Metadata> {
+  const faq = await (await getServerClient()).content.faq.get('main').catch(() => null);
+  return {
+    title: faq?.name ?? 'FAQ',
+  };
+}
+
+export default async function FaqPage() {
+  const faq = await (await getServerClient()).content.faq.get('main').catch(() => null);
+  return <FaqSection faq={faq} />;
+}
+<% } %>

package/templates/nextjs/base/src/app/indexnow-key.txt/route.ts

@@ -1,26 +1,25 @@
-/**
- * IndexNow key file — GET /indexnow-key.txt
- *
- * Brainerce's SEO Autopilot pings IndexNow (instant search-engine indexing)
- * whenever a blog post publishes. The ping includes
- * `keyLocation: https://<your-domain>/indexnow-key.txt`, and search engines
- * verify ownership by fetching this file and matching the key.
- *
- * The key comes from `getStoreInfo().seo.indexNowKey` — it is NOT a secret
- * (the file is public by protocol design). Returns 404 until the platform
- * generates a key for this sales channel, which is harmless.
- */
-import { getServerClient } from '@/core/lib/brainerce';
-
-export const revalidate = 3600;
-
-export async function GET() {
-  const info = await getServerClient()
-    .getStoreInfo()
-    .catch(() => null);
-  const key = info?.seo?.indexNowKey;
-  if (!key) return new Response(null, { status: 404 });
-  return new Response(key, {
-    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
-  });
-}
+/**
+ * IndexNow key file — GET /indexnow-key.txt
+ *
+ * Brainerce's SEO Autopilot pings IndexNow (instant search-engine indexing)
+ * whenever a blog post publishes. The ping includes
+ * `keyLocation: https://<your-domain>/indexnow-key.txt`, and search engines
+ * verify ownership by fetching this file and matching the key.
+ *
+ * The key comes from `getStoreInfo().seo.indexNowKey` — it is NOT a secret
+ * (the file is public by protocol design). Returns 404 until the platform
+ * generates a key for this sales channel, which is harmless.
+ */
+import { getServerClient } from '@/core/lib/brainerce.server';
+
+export const revalidate = 3600;
+
+export async function GET() {
+  const client = await getServerClient();
+  const info = await client.getStoreInfo().catch(() => null);
+  const key = info?.seo?.indexNowKey;
+  if (!key) return new Response(null, { status: 404 });
+  return new Response(key, {
+    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+  });
+}