create-brainerce-store 1.88.1 → 1.89.0

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

@@ -13,6 +13,7 @@ import { resolveRegion } from '@/core/lib/region.server';
 import { getDirection, getMessages, supportedLocales } from '@/i18n';
 import { getNonce } from '@/core/lib/nonce';
 import { getCanonicalSiteUrl } from '@/core/lib/site-url';
+import { getServerNamespace } from '@/core/lib/server-messages';
 import { resolveStoreName, buildTitleTemplate } from '@/core/lib/store-name';
 import { buildMetaDescription } from '@/core/lib/seo';
 import '../globals.css';
@@ -43,9 +44,6 @@ export async function generateMetadata({
     template: buildTitleTemplate(storeName),
   },
   description: buildMetaDescription(storeInfo?.metaDescription) || storeName,
-  alternates: {
-    canonical: '/',
-  },
   openGraph: {
     siteName: storeName,
     type: 'website',
@@ -57,15 +55,6 @@ export async function generateMetadata({
   };
 }
 
-function buildOrganizationJsonLd(baseUrl: string, storeName: string) {
-  return {
-    '@context': 'https://schema.org',
-    '@type': 'Organization',
-    name: storeName,
-    url: baseUrl,
-  };
-}
-
 export function generateStaticParams() {
   return supportedLocales.map((locale) => ({ locale }));
 }
@@ -80,7 +69,6 @@ export default async function RootLayout({
   const { locale } = await params;
   const dir = getDirection(locale);
   const nonce = await getNonce();
-  const baseUrl = await getCanonicalSiteUrl();
 
   // Merchant-driven layout chrome — fetched server-side. Each call falls back
   // to null/[] on 404 so the layout never crashes when the merchant hasn't
@@ -116,21 +104,17 @@ export default async function RootLayout({
   // One resolved name for the JSON-LD, the header and the footer. Live data
   // first; the scaffold-time literal is only the last fallback.
   const storeName = resolveStoreName(storeInfo);
+  // Feed title in the request locale (a literal "Blog" was every language's).
+  const seoStrings = await getServerNamespace('seo', locale);
 
   return (
     <html lang={locale} dir={dir}>
       <head>
-        <script
-          type="application/ld+json"
-          nonce={nonce}
-          suppressHydrationWarning
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(buildOrganizationJsonLd(baseUrl, storeName))
-              .replace(/</g, '\\u003c')
-              .replace(/>/g, '\\u003e')
-              .replace(/&/g, '\\u0026'),
-          }}
-        />
+        {/* No Organization JSON-LD here. This layout wraps EVERY page, and the
+            homepage already emits the full Organization + WebSite block
+            (components/seo/organization-json-ld.tsx); a second, thinner
+            Organization on the same page is a duplicate entity, not a reinforcement.
+            Organization data belongs on the homepage only. */}
         {/* Google Search Console verification — token set by the merchant in
             the dashboard (channel settings → Google site verification). Also
             what the Merchant Center website claim checks for. Renders nothing
@@ -140,7 +124,7 @@ export default async function RootLayout({
         ) : null}
         {/* RSS autodiscovery — feed readers and aggregators find the blog feed
             from any page. The route itself lives at /blog/rss.xml. */}
-        <link rel="alternate" type="application/rss+xml" title="Blog" href="/blog/rss.xml" />
+        <link rel="alternate" type="application/rss+xml" title={seoStrings.blog ?? ''} href="/blog/rss.xml" />
         {/* Brainerce cookieless traffic analytics — auto-tracks pageviews +
             SPA route changes. Cookieless (no consent banner needed); the
             merchant can toggle it per sales channel in the dashboard. */}
@@ -194,6 +178,7 @@ import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
 import { resolveRegion } from '@/core/lib/region.server';
 import { getNonce } from '@/core/lib/nonce';
 import { getCanonicalSiteUrl } from '@/core/lib/site-url';
+import { getServerNamespace } from '@/core/lib/server-messages';
 import { resolveStoreName, buildTitleTemplate } from '@/core/lib/store-name';
 import { buildMetaDescription } from '@/core/lib/seo';
 import './globals.css';
@@ -219,9 +204,6 @@ export async function generateMetadata(): Promise<Metadata> {
     template: buildTitleTemplate(storeName),
   },
   description: buildMetaDescription(storeInfo?.metaDescription) || storeName,
-  alternates: {
-    canonical: '/',
-  },
   openGraph: {
     siteName: storeName,
     locale: '<%= ogLocale %>',
@@ -234,22 +216,12 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-function buildOrganizationJsonLd(baseUrl: string, storeName: string) {
-  return {
-    '@context': 'https://schema.org',
-    '@type': 'Organization',
-    name: storeName,
-    url: baseUrl,
-  };
-}
-
 export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   const nonce = await getNonce();
-  const baseUrl = await getCanonicalSiteUrl();
 
   // Merchant-driven layout chrome — fetched server-side. Each call falls back
   // to null/[] on 404 so the layout never crashes when the merchant hasn't
@@ -281,21 +253,17 @@ export default async function RootLayout({
   // One resolved name for the JSON-LD, the header and the footer. Live data
   // first; the scaffold-time literal is only the last fallback.
   const storeName = resolveStoreName(storeInfo);
+  // Feed title in the request locale (a literal "Blog" was every language's).
+  const seoStrings = await getServerNamespace('seo');
 
   return (
     <html lang="<%= language %>" dir="<%= direction %>">
       <head>
-        <script
-          type="application/ld+json"
-          nonce={nonce}
-          suppressHydrationWarning
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(buildOrganizationJsonLd(baseUrl, storeName))
-              .replace(/</g, '\\u003c')
-              .replace(/>/g, '\\u003e')
-              .replace(/&/g, '\\u0026'),
-          }}
-        />
+        {/* No Organization JSON-LD here. This layout wraps EVERY page, and the
+            homepage already emits the full Organization + WebSite block
+            (components/seo/organization-json-ld.tsx); a second, thinner
+            Organization on the same page is a duplicate entity, not a reinforcement.
+            Organization data belongs on the homepage only. */}
         {/* Google Search Console verification — token set by the merchant in
             the dashboard (channel settings → Google site verification). Also
             what the Merchant Center website claim checks for. Renders nothing
@@ -305,7 +273,7 @@ export default async function RootLayout({
         ) : null}
         {/* RSS autodiscovery — feed readers and aggregators find the blog feed
             from any page. The route itself lives at /blog/rss.xml. */}
-        <link rel="alternate" type="application/rss+xml" title="Blog" href="/blog/rss.xml" />
+        <link rel="alternate" type="application/rss+xml" title={seoStrings.blog ?? ''} href="/blog/rss.xml" />
         {/* Brainerce cookieless traffic analytics — auto-tracks pageviews +
             SPA route changes. Cookieless (no consent banner needed); the
             merchant can toggle it per sales channel in the dashboard. */}

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

@@ -1,75 +1,109 @@
-import type { Metadata } from 'next';
-import { Suspense } from 'react';
-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';
-import { ReferralGreeting } from '@/components/referral/referral-greeting';
-
-// 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}
-      {/* Referral landing. A referral link is `/?ref=<code>`, so it lands here.
-          Renders nothing without a valid `?ref=`, and nothing at all on a store
-          with referrals switched off. The Suspense boundary is required: the
-          component reads `useSearchParams()`, which would otherwise opt this
-          whole page out of static rendering. */}
-      <Suspense fallback={null}>
-        <ReferralGreeting className="mt-6" />
-      </Suspense>
-      <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 { Suspense } from 'react';
+import { getServerClient } from '@/core/lib/brainerce.server';
+import { getRegionId } from '@/core/lib/region.server';
+import { HOME_FEATURED_LIMIT } from '@/core/lib/listing-query';
+import { localePath } from '@/core/lib/locale-path';
+import { buildMetaDescription } from '@/core/lib/seo';
+import { OrganizationJsonLd } from '@/components/seo/organization-json-ld';
+import { getCanonicalSiteUrl } from '@/core/lib/site-url';
+import { ListingSeedProvider, type HomeSeed } from '@/core/providers/listing-seed';
+import { RichTextBlock } from '@/ui/layout/rich-text-block';
+import { HomeClient } from '@/ui/home/home-client';
+import { ReferralGreeting } from '@/components/referral/referral-greeting';
+
+// `locale` exists only on a multi-language storefront (the `[locale]` segment);
+// a single-language one has no params at all.
+type Props = { params: Promise<{ locale?: string }> };
+
+// 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.
+//
+// The canonical lives HERE, not in the root layout: a layout-level canonical is
+// inherited by every page that does not set its own, which told Google that the
+// FAQ, the blog and every other page were duplicates of the homepage.
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  try {
+    const { locale } = await params;
+    const storeInfo = await (await getServerClient(locale)).getStoreInfo();
+    const description = buildMetaDescription(storeInfo.metaDescription) || undefined;
+    return {
+      title: storeInfo.name,
+      description,
+      alternates: { canonical: localePath(locale, '/') },
+      // `openGraph` replaces the layout's object wholesale rather than merging
+      // into it, so `siteName` has to be repeated or the tag disappears.
+      openGraph: {
+        title: storeInfo.name,
+        description,
+        siteName: storeInfo.name,
+        type: 'website',
+      },
+      twitter: {
+        card: 'summary_large_image',
+        title: storeInfo.name,
+        description,
+      },
+    };
+  } catch {
+    return {};
+  }
+}
+
+export default async function HomePage({ params }: Props) {
+  const { locale } = await params;
+  // 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(locale);
+  const regionId = await getRegionId();
+  const [storeInfo, intro, featured] = await Promise.all([
+    client.getStoreInfo().catch(() => null),
+    client.content.richText.get('main').catch(() => null),
+    // The featured grid, fetched here so the initial HTML carries real
+    // products. Without it the page was a spinner until the browser ran
+    // JavaScript, which is all a non-rendering crawler ever saw of the
+    // homepage. A failure is non-fatal: the client hook fetches instead.
+    client
+      .getProducts({
+        limit: HOME_FEATURED_LIMIT,
+        sortBy: 'createdAt',
+        sortOrder: 'desc',
+        ...(regionId ? { regionId } : {}),
+      })
+      .catch(() => null),
+  ]);
+  const homeSeed: HomeSeed | null = featured ? { products: featured.data, regionId } : null;
+
+  const baseUrl = await getCanonicalSiteUrl();
+
+  return (
+    <>
+      {storeInfo && baseUrl ? <OrganizationJsonLd storeInfo={storeInfo} baseUrl={baseUrl} /> : null}
+      {/* Referral landing. A referral link is `/?ref=<code>`, so it lands here.
+          Renders nothing without a valid `?ref=`, and nothing at all on a store
+          with referrals switched off. The Suspense boundary is required: the
+          component reads `useSearchParams()`, which would otherwise opt this
+          whole page out of static rendering. */}
+      <Suspense fallback={null}>
+        <ReferralGreeting className="mt-6" />
+      </Suspense>
+      <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"
+      />
+      <ListingSeedProvider home={homeSeed}>
+        <HomeClient />
+      </ListingSeedProvider>
+    </>
+  );
+}

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

@@ -16,6 +16,7 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import { getServerClient } from '@/core/lib/brainerce.server';
+import { localePath } from '@/core/lib/locale-path';
 import { sanitizeHtml } from '@/core/lib/sanitize';
 import { decodeSlug } from '@/core/lib/utils';
 
@@ -33,6 +34,9 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
   return {
     title: seo.title ?? page.data.title,
     description: seo.description,
+    // Canonical per page: the root layout no longer sets one, and the one it
+    // used to set named the homepage as the canonical of every page without its own.
+    alternates: { canonical: localePath(locale, `/pages/${slug}`) },
     openGraph: seo.ogImage ? { images: [{ url: seo.ogImage }] } : undefined,
   };
 }
@@ -71,6 +75,9 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
   return {
     title: seo.title ?? page.data.title,
     description: seo.description,
+    // Canonical per page: the root layout no longer sets one, and the one it
+    // used to set named the homepage as the canonical of every page without its own.
+    alternates: { canonical: localePath(undefined, `/pages/${slug}`) },
     openGraph: seo.ogImage ? { images: [{ url: seo.ogImage }] } : undefined,
   };
 }