Bring existing nextjs page 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
c94cfb0493294414ab999ff

What are you trying to accomplish
I am actually trying to build the integration for a web3 Solana application (Candy Machine 2.0) but that is a little broader. Just want to take some existing pages from a pre-built nextjs app and incorporate them into the builder.io front end. is there a way to import an entire nextjs page into builder? I dont think it will be possible to import all of the stuff that i need as components (there really is no matching components) and Im not sure if I can import everything as a plugin or not. its my first rodeo with nextjs as well… would love to get some feedback as Ive searched through here and haven’t found anyone doing anything with web3 atm.

Screenshots or video link
Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing

Code stack you are integrating Builder with
Nextjs, Solana, Web3, CandyMachine 2.0

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

2

Hi @chief_mcconnell, welcome to the forum! There are a few beta features for importing existing page content that you can try. These are not intended to be perfect but they can be a good starting point and cut out a lot of work from having to rebuild a page from scratch.

The first one I would suggest is Import from Web which allows you to enter a URL and select which sections to import into Builder. This works well if your webapp is deployed somewhere (but it didn’t quite work for me when I tried to import from my localhost).

Import Your Existing Site Content Into Builder

You could also try importing HTML which will transform your HTML code into Builder blocks with children.

Import HTML in Builder.io

Last you can try using a custom code block which does not break down your code into Builder blocks but will retain access to the original HTML code for editing.

Custom Code Block Type in Builder.io

After that, you may want to look into symbols and/or templates if you don’t want to create custom components in your codebase. Hope this helps!

Symbols vs Templates in Builder.io

3

I will check these out. my code all sits in the same repo as I built out the main part with nextjs and then i connected builder.io and build essentially on top of what I already had… which left me with two seperate things not connected to each other (and really overlapping). we shall see. thank you