# Import Existing Nextjs Pages into Builder.io

**URL:** <https://forum.builder.io/t/import-existing-nextjs-pages-into-builder-io/6099>\
**Category:** Technical Questions\
**Tags:** nextjs\
**Created:** [August 9, 2024, 3:32pm UTC](https://forum.builder.io/t/import-existing-nextjs-pages-into-builder-io/6099 "2024-08-09T15:32:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![lsankey](https://avatars.discourse-cdn.com/v4/letter/l/a3d4f5/32.png) [@lsankey](https://forum.builder.io/u/lsankey)\
**Post date:** [August 9, 2024, 3:32pm UTC](https://forum.builder.io/t/import-existing-nextjs-pages-into-builder-io/6099/1 "2024-08-09T15:32:53Z")

</div>

_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.io: Visual Development Platform](https://builder.io/content/c937efcce7c34647bf6296c22e94da96)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

**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](http://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](http://Builder.io). When found instructions for importing Nextjs pages into [Builder.io](http://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.

---

<div class="post-metadata">

**Author:** ![lsankey](https://avatars.discourse-cdn.com/v4/letter/l/a3d4f5/32.png) [@lsankey](https://forum.builder.io/u/lsankey)\
**Post date:** [August 9, 2024, 4:41pm UTC](https://forum.builder.io/t/import-existing-nextjs-pages-into-builder-io/6099/2 "2024-08-09T16:41:53Z")

</div>

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](http://Builder.io) expects?

> [@Bulk loading of pages into builder.io](https://forum.builder.io/t/bulk-loading-of-pages-into-builder-io/6038):
>
> I am using [builder.io](http://builder.io) with Next.js 14. We are porting our site to use [builder.io](http://builder.io) as the CMS. I have a component vocabulary that I have re-created with [builder.io](http://builder.io)’s custom components. Is there a way to bulk load my pages (I have 100+ of them) from my .js files as entries into builder so that my team can edit them using the visual editor?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 9, 2024, 5:14pm UTC](https://forum.builder.io/t/import-existing-nextjs-pages-into-builder-io/6099/3 "2024-08-09T17:14:31Z")

</div>

> [@lsankey](#):
>
> What I’d like to find out is if there is something that will programmatically convert Nextjs pages to the JSON format [Builder.io](http://Builder.io) expects?

Hello @lsankey,

There isn’t a tool that will programmatically convert Next.js pages to the JSON format expected by [Builder.io](http://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:

2. **Define Custom Components:** Convert your exported content into custom components registered in [Builder.io](http://Builder.io). For example, if you have a Hero component:

3. **Register Components with [Builder.io](http://Builder.io)**: You need to register these components in [Builder.io](http://Builder.io) so you can use them within the Visual Editor.

4. **Script to Add Entries to [Builder.io](http://Builder.io)**: Use the [Builder.io](http://Builder.io) Write API to programmatically create new entries with your exported JSON content.

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

For a more detailed guide, you can refer to the [Builder.io documentation](https://www.builder.io/c/docs/integrating-builder-pages).
