nextjs-edge-personalization-ab-testing

KO | EN

gitlite — search

#javascript #python #react #ai #typescript #go #rust #deep-learning #windows #cli #pytorch #security #mcp #open-source

nextjs-edge-personalization-ab-testing

(★ 69)

High performance personalization & a/b testing example using Next.js, Edge Middleware, and Builder.io

nextjs-edge-personalization-ab-testing 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Next.js + Builder.io Personalization & A/B Testing with Edge Middleware

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FBuilderIO%2Fnextjs-edge-personalization-demo&project-name=nextjs-edge-personalization-builder-io&repository-name=nextjs-edge-personalization-builder-io&demo-title=Next.js%20Edge%20Personalization%20with%20Builder.io&demo-description=Visually%20build%20a%20personalized%20Next.js%20site%20using%20Edge%20Middleware%20and%20Builder.io&demo-url=https%3A%2F%2Fnextjs-edge-personalization-demo.vercel.app%2F&demo-image=https%3A%2F%2Fuser-images.githubusercontent.com%2F844291%2F187518010-ac87a42e-74de-46a0-b0c1-c8e2d97af547.gif&build-command=cd%20..%20%;%20yarn%20build&root-directory=site)

This is a fork of [Next.js Commerce](https://github.com/vercel/commerce) with [Builder.io](https://www.builder.io) integrated and using [Edge Middleware](https://vercel.com/docs/concepts/functions/edge-middleware) to personalize pages with targeting and a/b testing with great performance.

[Try it here](https://builder.io/demo/commerce?demoHost=nextjs-edge-personalization-demo-git-editor-demo-builder-io.vercel.app&demoModel=page)

![Video demo of personalized site](https://user-images.githubusercontent.com/844291/187516199-bd09d52b-f44e-4c41-8f00-2079ab8820bc.gif)

## Contents

- [Overview](#overview)
- [How this works](#how-this-works)
- [Get Started](#get-started)
- [Explore the code](#explore-the-code)
- [Next Steps](#next-steps)

## Overview

View an in depth overview of Builder.io + Vercel Edge Functions [here](https://www.youtube.com/watch?v=whn2o0LlJyA).

## How this works

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](site/middleware.ts) 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:

```js
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.

You can learn more about this technique [here](https://www.builder.io/blog/using-cookies-and-query-string-in-nextjs-static-pages).

Then, you can visually create and edit pages, sections, and data on your site with Builder.io'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 Builder.io](https://user-images.githubusercontent.com/844291/187518010-ac87a42e-74de-46a0-b0c1-c8e2d97af547.gif)

## Get Started

### Run Locally

#### Clone this repo

```bash
git clone https://github.com/BuilderIO/nextjs-edge-personalization-demo.git
cd nextjs-edge-personalization-demo
```

#### Run the dev server

Next, from the project root:

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

#### Connect Builder.io

To connect [Builder.io](https://www.builder.io), create a [free account](https://www.builder.io/signup), from your account settings copy your Public API Key and paste it into [site/config/builder.ts](site/config/builder.ts#L6:L6).

#### Set your Preview URL

Next, head to [builder.io/models](https://builder.io/models) and choose the `page` model and enter `http://localhost:3000` as the [preview URL](https://www.builder.io/c/docs/guides/preview-url), and then hit `save` at the top right of the page.

#### Configure personalization attributes

Now, in Builder.io add some [targeting attributes](https://www.builder.io/c/docs/custom-targeting-attributes) to begin personalizing your content on. Head to [builder.io/account](https://builder.io/account) and click on the pencil next to `Custom targeting attributes` and add some attributes; for instance as in this next image:

Above, we create an attribute called `returnVisitor` that is a boolean that we set [here](site/pages/_app.tsx#L19) 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 <a href="site/pages/product/%5Bslug%5D/%5B%5B...hash%5D%5D.tsx#L96:L104">here</a> via browsing history (could alternatively be set upon add to cart or other actions).

Note: generally `audiences` should come from a CDP, like

```js
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 [builder.io/content](https://builder.io/content) and choose the `+ new` button, choose `page`, and drag and drop to create a page on your Next.js site with your React components!

> :warning: **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](#run-the-dev-server)

#### Target and publish your page

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

### Deploy to Netlify

No work needed, just connect your repo to Netlify!

### Deploy to Vercel

To get your site live, you can [deploy it to Vercel](https://nextjs.org/learn/basics/deploying-nextjs-app/deploy). Be sure to use the following configuration:

- **Framework preset**: Next.js
- **Build command**: `cd .. && yarn build`

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 Builder.io.

For example, if your site is now live at `https://my-site.vercel.app`, you can go back to [builder.io/models](https://builder.io/models), choose the `page` model, and update your Preview URL to `https://my-site.vercel.app` and save.

## Explore the code

Some key places to look in the codebase:

- [site/config/builder.ts](site/config/builder.ts) is where we configure Builder.io custom components and settings.
- <a href="site/pages/[[...pages]].tsx">site/pages/[[...pages]].tsx</a> is where we integrate page building, including fetching data from Builder.io and rendering it.
- [site/middleware.ts](site/middleware.ts) is where we create and configure the edge middleware for personalizing pages.

## Next Steps

Learn more about:

- [Developing with Builder.io](https://www.builder.io/c/docs/developers)
- [Registering Custom Components with Builder.io](https://www.builder.io/c/docs/custom-components-intro)
- [Using Query Params and Cookies in Next.js Static Pages](https://www.builder.io/blog/using-cookies-and-query-string-in-nextjs-static-pages)
- [Next.js Middleware](https://nextjs.org/docs/advanced-features/middleware)
- [Next.js personalization utils](https://github.com/BuilderIO/builder/blob/main/packages/personalization-utils/README.md) used in this example

### Troubleshooting

Run into any issues? [Chat with us in discord](https://discord.gg/TjSStcmuWN)!

nextjs-edge-personalization-ab-testing

nextjs-edge-personalization-ab-testing 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

nextjs-edge-personalization-ab-testing

nextjs-edge-personalization-ab-testing 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README