Live Demo đ All Demo, No Pitch: Content & Commerce / Builder.io & Elastic Path on 12/13
Use Cases
Pricing
Blog
Ă
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â°
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 editors, marketers, and designers can autonomously iterate and update pages on the fly.
Tip: This article was written in 2021. For the most up-to-date instructions on using Next.js with Builder, refer to the Next.js instructions in the Integrating Pages official documentation.
To build pages visually with Next.js, this tutorial guides you through:
Before following these steps to generate a Next.js app, make sure you have Node.js 12.22.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.
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.
If you'd rather use a ready-made app, try Builder's Next.js starter with step-by-step instructions.
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.
You will get the Public API Key in a later section in this blog post.
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.
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:
The getStaticPaths()
function returns a list of page URLs, omits unnecessary data for creating the list, and with fallback: true
, checks Builder for any new pages you might have added.
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.
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.
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://
.
To connect your Builder.io space to your application, get your API key as follows. Go to your Account settings by clicking on the Account icon in the left sidenav.
In the Account settings, copy your Public API Key.
Now, head back to pages/[[...page]].tsx
and paste this key as the value for BUILDER_API_KEY
Currently, when you go to http://localhost:3000
, you should see a 404 page. This is because your app is not 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
.
If you're getting a 404 but aren't sure why, check these things:
Use your React components in the Editor
Follow the next step in this series by learning how to use your React components in Builder's Visual Editor.
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.