Skip to content

Latest commit

 

History

History
150 lines (91 loc) · 7.25 KB

README.md

File metadata and controls

150 lines (91 loc) · 7.25 KB
Raw

🏗️ Experimental

This example is EXPERIMENTAL, and you most likely don't want to use it if you are integrating Builder.io with a Next.js project. Instead, if you are using the app router in Next.js we suggest that you follow the steps outlined in the quickstart by selecting the app router tab. Or, you may see an example project here.

Next.js experimental app directory + Builder.io starter

This example walks you through using Builder.io with an experimental version of Next.js >= 13 application and the gen two Builder react SDK.

This starter includes the app folder structure which of you can find more details here

Prerequisites

Before using this example, make sure you have the following:

  • A Builder.io account. Check out the plans, which range from our free tier to custom.
  • npm

A basic understanding of the following is helpful too:

NOTE: This example's next.config.mjs includes specific configurations needed for Builder.io to work with Next.js 13.

Overview

To use this project, you need to do three things:

  1. Get a copy of this repo.
  2. Create a corresponding space in your account on Builder.io.
  3. Connect the two.

The next sections walk you through each step.

Clone this project

This example provides you with a ready-made application that you can copy locally and configure for use with your Builder.io account.

  1. At the command line, run the following command to create a local copy of the Builder.io repo:

    git clone https://github.com/BuilderIO/builder.git

  2. Change into the example application by using the cd command:

    cd builder/examples/next-js-sdk-gen-2-experimental-app-directory

  3. Open this directory in your favorite code editor. You'll come back here when you're ready to connect your application to your Builder space.

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.

Builder.io Welcome screen for creating a new Organization

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.

Organization icon with two people standing together

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

Menu options for creating a new space

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

  2. When Builder asks you which ecommerce platform you use, select None.

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

Dialogue for creating a new space

Now that you have a new space, the next step is connecting "My Next.js App" with your application.

Connecting Builder.io to your application

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

Setting the model preview URL

To enable Builder to open your site in the visual editor, you will need to provide a URL that we can open which has the Builder rendering component in it.

Go to the /models page in Builder and choose your page model.

Then, set the Preview URL to http://localhost:3000. Be sure to include the http://.

Image showing where to put the Preview URL

Note: once you deploy your updates, you will want to update this to a public URL, such as your live site or your staging site (e.g. https://your-site.com), so anyone on your team can connect to your site for visual editing

Getting your API Key

In the Account settings, copy your Public API Key. We're going to paste the API Key into your Next.js app in the next section.

Image showing where to get your API Key

In your code editor, configure ./src/builderConfig.js with the Public API Key by replacing the value of API_KEY.

Running your application

To serve your application locally, install dependencies, serve, and view your preview.

  1. Install dependencies by entering the follw\owing at the command line.

    npm install

  2. Serve your application by running the following at the command line:

    npm run dev

  3. In your browser, go to http://localhost:3000 to see your application.

Experimenting

Now that you have a configured Builder.io application, you can try different features, such as creating a page. Create a new page entry, assign any URL, publish and preview. For more detail and ideas on creating pages, see Creating a landing page in Builder .

Deploy

You can deploy anywhere you like, but for this project we recommend Vercel. Deploy with Vercel

Next steps