Import Existing Nextjs Pages into Builder.io

Technical Questions
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key
2b2378e44d724a7f8056a83e3b2d7fc9

What are you trying to accomplish
I want to import pages from an existing Nextjs site or repo into Builder.io

Screenshots or video link

Code stack you are integrating Builder with
Nextjs

Reproducible code example

I have an existing Nextjs website. I want to import the pages from it into Builder.io. When found instructions for importing Nextjs pages into Builder.io, it says that importing existing pages has been deprecated and that I need to use the Visual Copilot. But I can’t find the procedure for doing so in the documentation for Visual Copilot. The only information on this topic in the forum is over a year old.

2

Ok, I found this post which may answer my question. I’ll have to try it. What I’d like to find out is if there is something that will programmatically convert Nextjs pages to the JSON format Builder.io expects?

3

Hello @lsankey,

There isn’t a tool that will programmatically convert Next.js pages to the JSON format expected by Builder.io out-of-the-box. However, you can write custom scripts to achieve this. Here are the general steps:

  1. Export your content to JSON: First, you need to export your Next.js content in a JSON format. This involves extracting your page’s structure and components into a JSON representation. Here’s a simplified approach:

    {
  "tag": "div",
  "className": "title",
  "style": {
    "paddingTop": "8px"
  },
  "children": [...]
}

  2. Define Custom Components: Convert your exported content into custom components registered in Builder.io. For example, if you have a Hero component:

    import React from 'react'
import MyCustomButton from './components/MyCustomButton'

export function Hero({ title, subTitle, hasButton, buttonLink }) {
  return (
    <div>
      <h1>{title || 'Default hero title'}</h1>
      <h3>{subTitle || 'Default hero subtitle'}</h3>
      {
        hasButton && (
          <MyCustomButton link={buttonLink} />
        )
      }
    </div>
  )
}

  3. Register Components with Builder.io: You need to register these components in Builder.io so you can use them within the Visual Editor.

    import { Builder } from '@builder.io/react';
import { Hero } from './Hero';

Builder.registerComponent(Hero, {
  name: 'Hero',
  inputs: [{ name: 'title', type: 'text' }, { name: 'subTitle', type: 'text' }]
});

  4. Script to Add Entries to Builder.io: Use the Builder.io Write API to programmatically create new entries with your exported JSON content.

    const axios = require('axios');
const contentJson = require('./content.json');

async function postData(body) {
  const res = await axios({
    method: 'post',
    url: `https://builder.io/api/v1/write/${MODEL_NAME}`,
    headers: {
      'Authorization': 'Your private space key',
      'Content-Type': 'application/json',
    },
    data: body,
  });
  return res;
}

async function main() {
  console.log('starting...', contentJson.title);

  const blocks = contentJson.body.map(layoutItem => ({
    "@type": "@builder.io/sdk:Element",
    "component": {
      "name": layoutItem.layoutType,
      "options": layoutItem.props,
    }
  }));
  
  const res = await postData({
    name: contentJson.url.replaceAll('/', ''),
    data: {
      title: contentJson.title,
      url: contentJson.url,
      blocks: blocks,
    }
  });

  console.log('new entry added', res.status, res.statusText);
}

main().catch(err => {
  console.log(err);
});

These steps involve extracting the content and converting it into the expected JSON structure for Builder.io, then using the Builder.io Write API to add this JSON as entries in Builder.io.

For a more detailed guide, you can refer to the Builder.io documentation.