Next.js + Edge Personalization Demo

This is a fork of Next.js Commerce with integrated and using Edge Middleware to personalize pages with great performance.

Dynamic at the speed of static ⚡

Video demo of personalized site

How this works

Diagram of the personalization strategy

In short, to personalize a page, we rewrite a basic path to a path + a hash of personalized attribtues.

For instance, if you have a pages/page.tsx, you can rename it to pages/page/[hash].tsx, and add it to be included into the rewriting middleware to add the personalized hash at the end.

You can now have your page return personalized content based on what is in the hash, and this is purely automatic via what personalization.* cookies are present

You can set them at any time to target off of, for instance:

Cookies.set('personalization.returnVisitor', 'true')

And now your /page will be rewritten to /page/returnVisitor=true when that cookie is present, and be handled accordingly

Then, you can visually create and edit pages, sections, and data on your site with’s visual editor, dragging and dropping with your React components and publish unlimited variations to your site without any code or deploys needed:

Example of editing in

Get Started

Run Locally

After you clone this repo, from the project root:

Run the dev server

yarn # run this command in root folder of the mono repo
yarn dev


To connect, create a free account, from your account settings copy your Public API Key and paste it into site/config/builder.ts

Screenshot of copying your API key

Set your Preview URL

Next, head to and choose the page model and enter http://localhost:3000 as the preview URL, and then hit save at the top right of the page.

Screenshot of adding your Preivew URL in

Configure personalization attributes

Now, in add some targeting attributes to begin personalizing your content on. Head to and click on the pencil next to Custom targeting attributes and add some attributes, for instance like you see here:

Screenshots of the targeting UI configuration

Above, we create an attribute called returnVisitor that is a boolean that we set here so it can be read by edge middleware, as well as an attribute called audience that is an enum of a couple made up segments like shirt-shipper and jacket-shopper that we set here via browsing history (could alternatively be set upon add to cart or other actions).

Note: generally audiences should come from a CDP, like

myCdp.getAudiences().then((audiences) => {
  // assuming audiences is an array of strings, like ['shirt-shipper', 'jacket-shopper']
  Cookies.set('personalization.audience', JSON.stringify(audiences))

Create a page

Now, go to and choose the + new button, choose page, and drag and drop to create a page on your Next.js site with your React components!

Image of creating a page and editing visually

⚠️ If you are having trouble connecting: be sure you are running your dev server on http://localhost:3000 by running yarn dev from this project root like shown above

Target and publish your page

At the top of the editor, you can configure which audiences should see this page variant, and publish.

Screenshots of targeting your page

Deploy to Vercel

To get your site live, you can deploy it to Vercel. Be sure to use the following configuration:

  • Framework preset: Next.js
  • Build command: cd .. && yarn build

Screenshot of the Vercel configuration

Once you deploy to vercel, you can update your Preview URL to use the live URL so now others on your team can create content on your new site with

E.g. if your site is now live at, you can go back to, choose the page model, and update your Preview URL to and save.

Screenshot of updating your Preview URL

Explore the code

Some key places to look in the codebase:

Diagram of the tech stack used

Next Steps

Learn more about


Run into any issues? Chat with us in discord!


View Github