Need to edit the existing NextJS pages created in the App not in builder

Already have a site developed in NextJS and want to edit the pages created in the NextJS site in Builder. I think we can create the pages from scratch in builder and customize them but couldn’t find any way to modify the existing NextJS pages. Would be great if there is any way to do this.

@dharmaraju You are correct, there is no way to edit the pages that already exist in your app outside of Builder. Depending on how your app is set up, you could register custom components for the various elements on your page to make it easier to import them across your pages/sections. There would be a bit of a lift to re build existing pages within Builder, but once it is done you would have the full ability to edit and update going forward.

There is also the ability to import HTML sections within the Visual Editor:
Screen Shot 2022-01-25 at 11.25.32 AM

but this feature is still in beta, and depending on how complicated your HTML is it will most likely still require polish and updating within Builder itself to have it look like the original.

Let me know if either of those options will help! If you ever get stuck with specific questions, just let us know and we can try to help further!

@TimG Thanks for the answer and really helpful. So we can use our react components by registering them in Builder but can we edit the registered react components in builder like adding some button to the components and by clicking that showing a popup (modal)?.

@dharmaraju yes! It is possible to add editing regions inside your custom components, you can see a walkthrough here: How to Add Dynamic Editing Regions to Custom Components

Though the coded parts of the component that are outside of the registered inputs or editing regions would not necessarily be editable. So for example, if you are registering a form component with a dynamic editing region, the form itself wouldn’t necessarily be editable, but the dynamic region would be editable and any registered inputs would be dynamic based on the input in builder.

Finally, you absolutely can pass methods and data from your app into builder, as shown in this section of our React SDK documentation. So in your example, if you want to have a component that will fire a modal based on an interaction, you could

  1. Create the element in your code
  2. Register it to Builder with a dynamic editing region
  3. Pass the method click handler to builder within state or context
  4. Within Builder, add a button to the dynamic section
  5. And tie the method to a click action on the button

That being said, if you are passing the click method to Builder, you wouldn’t necessarily even need to add a dynamic editing region within your custom component, as that method would be available to any element on the page from either state or context. It just depends on how exactly you want your pages set up!

Hopefully that helps! As always let me know if you have any further questions!