I want to change the data on the website created by Builder.io from Next.js

Hi, I would like to ask you, I created a website through Builer.io and connected it to Next.js.
But I have a problem now. I want to change the data on the homepage in Next.js. For example, text, image, button’s click function. But I don’t know how.

Is there a way to change values or functions such as button input or image on the website directly on Next.js other than custom action on Builder.io?

Hi @yjkim, could you explain your use case further? I think what you are asking is once you create a page or section within Builder, and import it into your app with our APIs/SDKs, can you then update or change that content directly in your app? Is there a reason you would want to do that as opposed to updating it within Builder?

All Builder content is essentially JSON. Using our APIs you are able to access and manipulate that JSON, and by passing the JSON to our SDKs, they will get rendered as html/css/js within your app. You don’t necessarily have access to the rendered content within your app, just the JSON that you have pulled from our API. Theoretically you could override the JSON inputs before rendering it on your page but that has potential to get buggy and messy.

You could also use the Write API to update content from within your app, as well, but that would update the content within Builder itself, not directly in your app.

If you could explain your use case more, or provide links to your builder.io/content pages I am happy to help explore further, but hopefully that clarifies a bit!

I mean when I create a page or section within Builder and bring it to my app with Builder’s API/SDKs, I update or change the content directly from my app.

The reason is that now I’m running on-click through New Event by adding a function to “context” through , and there’s data that comes through navigation bars or servers that I use the same for each page I made with Builder, but it’s hard to set through “new Event” every time.

my page is Builder.io: Drag and drop page builder and CMS.

If you look at my page, whenever a user adds a post, the data should be sent to the server, and the photo posted by the user, user ID, and title set by the user should be updated on the web page, but I don’t know if it’s possible within next.js. And is it possible to set the filter or sort within the builder?

I see…so it sounds like you want users to be able to add a post that will be saved as Builder content, and then also render on the page?

For this I think what you would want to do is use the Write API: Builder.io Write API - Builder.io

So whenever use clicks the add post button, within your app you would have something like:

const postData = async ('https://builder.io/api/v1/write/yourModelHere') => {
   const dataObject = {
       name: 'post',
       data: {
          ...
         // pulling data from your input form
       },
       published: 'published'
   }

    const response = await fetch(url, {
    body: JSON.stringify(dataObject),
    headers: {
        Authorization: "Bearer " + YOUR_PRIVATE_KEY, //starts with bpk-
        "Content-Type": "application/json"
    },
    method: "POST"
    })
    return response.json();
}
...
<button onClick={postData} />

And then as long as you are rendering your ‘yourModelHere’ on the page, it should update the rendering. Let me know if that answers your question and makes sense!

Otherwise try it out!