Skip to content
New: offer, price and checkout tests, each read from your Shopify orders. See what shipped
GROWTH DEPT.CRO

Next.js + Growth Dept CRO

For headless Shopify storefronts: middleware decides each visitor's group on the server, before any HTML is sent.

  • Split URL groups rewritten under the original address
  • Content and flag groups passed to server components in a header
  • Exposures sent from the server, so client scripts are optional
Book a callHeadless guide
The middleware reads your brand's published test set-up, keeps it cached in the server, picks the group and sets the visitor's cookie. Nothing reaches the browser until the decision is made, so there is nothing to flash.

At a glance

Does Growth Dept CRO work with Next.js?

Which Next.js setup?

App Router middleware, on the edge or the Node.js runtime.

How do split URL tests work?

The request is rewritten to the group's path. The address bar keeps the original URL, and the query string and referrer stay intact.

How do my components know the group?

Content and flag groups arrive in the x-cro-arms request header. Read them with armsFromHeaders(headers()).

How do orders carry the group?

croCartAttributes() adds the visitor's groups to the cart through the Storefront API, so the order carries them into Shopify checkout.

Can I send custom events?

Yes. croTrack(name, value) sends add-to-cart and custom goals, and window.CRO has the same shape as on a theme. For an add to cart, croTrack("atc", value, { productId, variantId }) names the product, so results can show add-to-cart rates per product.

How it works

How Next.js and Growth Dept CRO work together

Middleware decides

croMiddleware runs on each page request, skips assets and prefetches, and returns a rewrite or the next response with the cookie set.

Components render the group

Server components read the group from the header and render the right version.

Checkout carries it

Cart attributes take the groups into Shopify's checkout, where the pixel and the order sync read them.

Get started

To get started

  1. 01

    Add the package

    Install the runtime and add croMiddleware to middleware.ts with your brand's public key.

  2. 02

    Read the group

    Render each test's version from the header in your server components, and call croCartAttributes() when you create the cart.

  3. 03

    Check with QA links

    Open preview links for each group. They mark the visit as QA, so it never counts.

What it works with

Split URL testsContent testsFeature flagsMultivariate testsShipping, offers and prices in Shopify checkout

FAQ

Next.js questions

What if the set-up cannot be fetched?
The middleware keeps a short cache with a stale fallback, so a slow request to the platform never blocks a page.
Do template tests work headless?
No. Template tests use Shopify's theme templates, so they run on theme storefronts only.

More integrations

ShopifyCloudflare WorkersKlaviyoSlackGoogle Analytics 4Microsoft ClarityGrowth Dept MTAGrowth Dept ACRGrowth Dept agentsGrowth Dept CRO API

Find out what is worth testing on your store.

Book a 45-minute call with the Growth Dept team. We look at your store and your traffic, and tell you which tests to run first.

Book a call