×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Developers

GET STARTED

PROJECTS

Builder

Builder SDKs, examples, starters, and plugins

Mitosis

Universal component compiler. Write components once and compile to Vue, React, Svelte, Angular, and more

Qwik

Extreme high speed frontend framework

Builder

Builder SDKs, examples, starters, and plugins

Qwik

Extreme high speed frontent framework

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Made in Builder

‹ Back to blog

Setting up visual drag-and-drop page building with Next.js

By Kapunahele Wong

If you have a Next.js application, you can build, edit, and add pages by dragging and dropping elements within Builder.io. This means that a developer can create the basic structure of an app by generating a Next.js application and then other team members, such as content creators, marketers, and sales specialists can autonomously iterate and update pages on the fly.

Goals

To build pages visually with Next.js, this tutorial guides you through:

  • Creating a Next.js app
  • Connecting the Builder.io drag-and-drop page building UI to your new app

Creating a Next.js app

Before following these steps to generate a Next.js app, make sure you have Node.js 12.0 or later on your computer.

At the command line, run the following command to generate a Next.js app with TypeScript:

When you're prompted for your permission to install create-next-app, say yes.

For this example, name your project my-app.

Change directory with the cd command:

Open this directory in your favorite code editor.

Adding Builder as a dependency

To use drag-and-drop, add Builder as a dependency.

At the command line, use npm to install Builder:

Start the development server with npm:

Keep your editor open because we'll come back after some set up in Builder.

For more detailed information on Next.js, check out the official Next.js Getting Started.

Icon for Next.js

If you'd rather use a ready-made app, try Builder's Next.js starter with step-by-step instructions.

Configuring your Next.js app

In the pages directory, rename the default index.tsx to [[...page]].tsx . The double square brackets, [[]], are how Next.js creates dynamic routes, which means you can create pages with different names in Builder and Next.js can see them all.

Replace the code in [[...page]].tsx with the following, making sure to add your Public API Key to the builder.init() method.

Understanding the code in [[...page.tsx]]

This section explains what the code in [[...page]].tsx is doing at a high level. For more detailed information, see the Next.js documentation.

At the top of the file, the import statements make all the Next.js and Builder resources available that the code in this file needs.

After the imports, you specify the Builder Public API Key and, with builder.init(), initialize connect your app to Builder.

Building paths with getStaticProps()

The getStaticProps() function tells you what paths the app is building. Here, Builder gets the page and creates the URL, otherwise, if there's no page, you'll get null and a 404.

revalidate: 5 means that Next.js attempts to re-generate the page under these conditions:

  • When a request comes in
  • At most once every 5 seconds
  • To check if Builder has updates to the page

Getting a list of pages with getStaticPaths()

The getStaticPaths() function returns a list of pages, omits unnecessary data for creating the list, and with fallback: true, checks Builder for any new pages you might have added.

A look at the React component

The last section is a regular React component called Page(). It gets the page data and checks that Builder is present. If there's no page and no Builder, Next.js returns a 404. Otherwise, you get your Builder page.

Adding drag-and-drop

Builder adds the ability for your team members–even those who don't code–to create pages and iterate on ideas with a drag-and-drop interface.

Head over to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.

If you're new to Builder, you'll see the following screen when you first login.

If you don't have the introductory prompt for creating a space, here's how you get it:

Step 1

Click on the Organization icon on the bottom left.

Step 2

Hover over Builder.io and choose + New Space.

Goal!


Click Add Builder to an existing site or app.

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

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

Getting your API Key and setting your URL

To connect your Builder.io space to your application, set the site URL and get the API key as follows. Go to your Account settings by clicking on the Account icon in the left sidenav.

In the Account settings, change your Site URL to http://localhost:3000 and copy the Public API Key. We're going to paste the API Key into your Next.js app in the next section.

Tip: When you change your Site URL to http://locahost:3000, be sure to include the http://.

Creating a default page

Currently, when you go to http://localhost:3000, you should see a 404 page. This is because your app is ready for you to provide a page to render.

To give your app something to work with, click on the Content icon in the left sidenav:

Click the +New button near the top right of the screen.

Create a new page in Builder and name it /.

When you are prompted to choose a starting template, choose Blank. The editor for your new page loads automatically.

In your new page, click the +Add Block button.

Select the text icon to add a text block.

Click Edit and add something like, "I did it!!".

Click the green Publish button in the upper right of the browser.

Go to http://localhost:3000 and check out your work. Well done!

To make more pages, follow the same steps outlined here but name your pages with descriptive names such as "About Us" or "Current Projects" as in the following example.

Notice that Builder creates a URL from the page name. So "Current Projects" becomes current-projects.

Next steps

Icon for Next.js

Follow the next step in this series by learning How to drag+drop to build pages visually with your React components to this app.

Add custom React components

With Next.js and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.

Learn how to use your React components in our visual editor.

Try creating a landing page, or if you're ready to handover some page building, check out the ways you can get the whole team involved in application development with different roles and permissions.

Read more on the blog
$14m to build faster together
Using Contentful data in Builder's Visual Editor
Connecting dynamic data in Builder's Visual Editor

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.
Get Started
Log in

DEVELOPERS

Builder for Developers

Developer Docs

Open Source Projects

INTEGRATIONS

All Integrations

Shopify

React

Angular

Next.js

Gatsby

RESOURCES

User Guides

Blog

Community Forum

Templates

Partners

PRODUCT

Features

Pricing

© 2021 Builder.io, Inc.

Security

Privacy Policy

Terms of Service