BigCommerce Catalyst SEO: Next.js Storefront Best Practices

Catalyst is BigCommerce's headless reference storefront. It is a Next.js application built on the App Router, talks to BigCommerce over the GraphQL Storefront API, and is the platform's official path forward for merchants who want a modern, React-based front end while keeping BigCommerce as the commerce engine. It replaces the role that Stencil — the legacy Handlebars-based theme platform — played for the previous decade.

We have been an Elite BigCommerce Partner since 2012, which means we have shipped commerce work on this platform longer than most agencies have existed. We have shipped both Stencil and Catalyst builds. This post is the SEO checklist for shipping a Catalyst storefront without losing any of the indexing, structured data, and crawl-friendliness that a well-built Stencil theme had by default.

Why Catalyst is a different SEO surface than Stencil

Stencil rendered every page server-side. The Handlebars templating engine produced HTML, BigCommerce served it from its CDN, and Googlebot received the full document on the first byte. SEO on Stencil was mostly about whether the theme had been built correctly — meta tags, canonical, schema, sitemap — not about whether the platform itself was getting in the way.

Catalyst is different. It is a Next.js App Router application that you, the merchant, deploy and operate. The hosting choice (Vercel, Netlify, your own infrastructure) determines the rendering mode, the caching behavior, the edge geography, and the build-vs-runtime split. All of those choices have SEO implications that did not exist on Stencil.

For the head-to-head, see Stencil vs Catalyst SEO impact compared.

App Router, RSC, and what Googlebot sees

Catalyst is built on the Next.js App Router with React Server Components (RSC). The default rendering mode is server rendering, which is good — but the term "server rendering" in App Router context covers several distinct behaviors:

• Static rendering at build time. Routes with no dynamic data are pre-rendered and served from the CDN.
• Dynamic rendering at request time. Routes that opt into dynamic behavior (via dynamic = "force-dynamic", calling headers() or cookies(), or using a dynamic data fetch) are rendered per-request.
• Streaming with Suspense. Slow portions of a route can be streamed in via <Suspense> while the shell ships immediately.

For commerce, the rendering matrix on a Catalyst app should look like this:

• Static for /, /about, /contact, and other low-mutation content routes (consider Incremental Static Regeneration for content that changes occasionally).
• Dynamic SSR for /category/[slug] and /product/[slug]. These need fresh inventory, pricing, and merchandising data. Cache aggressively at the edge but render at request time.
• Streaming only where the indexable content can be resolved before the stream begins. The product, price, and JSON-LD must be in the synchronous portion.

The Catalyst data layer — GraphQL Storefront API

Catalyst fetches data over the BigCommerce GraphQL Storefront API. This is fast, well-typed, and supports pagination, filtering, and faceting natively. From an SEO standpoint, the GraphQL layer is mostly invisible — the relevant question is whether your route handlers consume it correctly.

The patterns that matter:

• generateMetadata for every PDP and PLP. This is the Next.js App Router primitive for emitting title, description, and Open Graph in the SSR response. Use the GraphQL query result, not a client-side fetch, to populate these fields.
• JSON-LD as a literal <script> tag in the route, dangerously-set from the GraphQL result. Do not depend on a client-side library to inject schema after hydration.
• Canonical tag via the App Router's alternates.canonical metadata field. Emit it from generateMetadata.

URL structure and the BigCommerce slug story

BigCommerce supports custom URLs at the product and category level. The platform's defaults are sensible (/category/, /product/, no trailing slash), but Catalyst gives the developer freedom to remap. A few rules:

• Do not change established URLs on a Stencil-to-Catalyst migration. Every product, category, and content URL should match the legacy structure exactly, or you need a complete 301 redirect map covering every changed path. Catalyst is a great excuse to clean up URLs; it is also a great way to lose six months of ranking authority if you do it without a redirect plan.
• Use the BigCommerce canonical URL field on products. The platform-level canonical lets merchandisers correct duplicate-content issues on multi-category products without a code change.
• Avoid query-string product variations unless you have explicit canonical handling. BigCommerce's variant URLs (?sku=...) can leak into the index if a sloppy theme or app injects them into anchor tags.

B2B Edition, customer groups, and price visibility

If the Catalyst storefront is also serving B2B Edition customers, an additional set of SEO concerns appears. B2B Edition supports customer groups, quote-only catalogs, and pricelist-based visibility. The crawler is, by definition, anonymous — it sees the B2C view. That is correct behavior. But it means:

• Product pages must render a price (or a "request a quote" CTA) for the anonymous view. A blank price field is a red flag for Merchant Center and for ranking.
• Quote-only products need either an indexable B2C-equivalent page or a noindex directive. Catalogs that are entirely behind login should be noindex site-wide.
• JSON-LD Offer.price must match what the anonymous user sees. Do not emit a B2B pricelist value in schema if the visible page shows a B2C price.

The deep dive is BigCommerce B2B Edition SEO for quote-only catalogs.

Image handling on Catalyst

Catalyst uses Next.js's <Image> component, which means responsive variants and lazy loading happen automatically. The catch: the <Image> component requires explicit width and height props to avoid layout shift. BigCommerce's GraphQL API returns image URLs at fixed sizes — confirm that the size your component requests is one the BigCommerce CDN actually serves, or you will be paying for Vercel image-optimization compute on every product page.

Set the image domain in next.config.js:

images: {
  remotePatterns: [
    { protocol: 'https', hostname: 'cdn11.bigcommerce.com' },
  ],
}

Sitemap, robots, and the Catalyst preview deploy problem

Catalyst projects deployed on Vercel get a unique preview URL per branch and per commit. Every one of those preview URLs is publicly accessible by default. Without explicit blocking, Googlebot will eventually find them — usually through an inadvertent link from a Slack message indexed via a different surface, or through a shared review URL — and start indexing them.

Two fixes:

• Vercel password protection on every non-production deployment.
• X-Robots-Tag: noindex header on any non-production hostname, controlled via next.config.js headers config or a middleware function.

The production sitemap should be generated dynamically from a route handler (app/sitemap.ts) that queries the BigCommerce GraphQL API at request time, with appropriate caching.

Common Catalyst SEO regressions

In Catalyst audits we have run, these are the recurring failures:

• generateMetadata returns a client-only fallback because the GraphQL query was thrown to a client component.
• Canonical tags missing on PLPs because pagination state was not factored into the metadata function.
• Product JSON-LD emitted twice — once from a custom component, once from a third-party app — producing schema warnings and occasional rich-result suppression.
• Preview deployments indexed by Googlebot.
• Vercel image optimization running on every product page, ballooning Edge Function compute costs without an SEO benefit (BigCommerce's CDN already serves optimized variants).

Key takeaways

• Catalyst is a Next.js App Router app — the rendering mode (static, dynamic SSR, streaming) is your choice, not the platform's.
• Use generateMetadata and SSR-emitted JSON-LD for every PDP and PLP. Do not rely on client-side schema injection.
• Migrating from Stencil to Catalyst requires a complete 301 redirect map. Do not skip this.
• B2B Edition catalogs need explicit decisions about price visibility for anonymous crawlers.
• Block preview deployments from indexing. Vercel preview URLs are public by default.

For the Catalyst-specific cornerstone, see our Catalyst SEO practice. The broader BigCommerce SEO agency and BigCommerce experts practices apply across both Stencil and Catalyst surfaces. For enterprise B2B builds, BigCommerce Enterprise covers the strategic side. The general headless commerce SEO overview applies here too. When you are ready, let's talk.