Next.js + Builder.io Personalization Starter

This example walks you through personalizing Builder.io landing pages with Next.js.

Demo

https://nextjs-builder-edge-personalization.vercel.app

[hold ctrl + right click to show all the different personalization options from your space]

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy

After setting up your environment variables, deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/vercel/examples/tree/main/starter/personalization-builder-io
# or
yarn create next-app --example https://github.com/vercel/examples/tree/main/starter/personalization-builder-io

To run this project, you need to do the following:

1. Create a corresponding space in your account on Builder.io.
2. Connect the two using the space's private and public keys.

Generating your Builder.io space

If you've just created your Builder.io account and logged in for the first time, Builder prompts you to create a space with a new Builder site or add Builder to an existing application. For this example, click Add Builder to an existing site or app.

If you don't have the introductory prompt for creating a space, take the following steps. If you do have the prompt in the previous step, skip to step 4.

1. Click on the Organization icon on the bottom left.

1. Hover over Builder.io and choose + New Space.

1. Click Add Builder to an existing site or app.

2. When Builder asks you which e-commerce platform you use, select None.

3. Name your new space by entering "My Next.js App" and click Create.

Now that you have a new space, the next step is connecting this space with your next.js application.

Connecting Builder.io to your application

To connect your Builder.io space and your application, set the site URL and get the API key as follows:

1. In Builder.io, click on the Account icon on the left sidenav.

1. Change the Site URL to http://localhost:3000 and click to copy the Public API Key.

1. In your code editor, rename .env.production.example to .env.production.local and .env.development.local and update it with the Public API Key as follows, but using your Public API Key that you copied in the previous step. For example:

   BUILDER_PUBLIC_KEY=08837cee608a405c806a3bed69acfe2d <-- replace this with your API Key
   

   Do the same for your private key

   BUILDER_PRIVATE_KEY=xxx-xxxxx <-- replace this with your private API Key
   

Running your application

Next, run Next.js in development mode:

npm install
npm run dev

# or

yarn
yarn dev

Deploy it to the cloud with Vercel (Documentation).

Experimenting

Now that you have a configured Builder.io space and a running application, start by creating a page, assign any URL, publish and preview. For more detail and ideas on creating pages, see Creating a landing page in Builder.io.

Create custom targeting attributes, those targeting attributes can be used when creating new content specific for a target audience.

Next steps

• For more information on previewing your applications, see Editing and previewing directly on your site.
• See Getting started with the visual editor for an introduction to editing your pages without having to code.
• Check out Builder best practices for guidance on how to approach site development with Builder.