Blank page with next js app router

[PhilGarb]

Describe the bug Published pages are blank when using next js app router. They show up fine in the preview.

To Reproduce Steps to reproduce the behavior:

1. Please see the following codesandbox
2. Edit the url to include: /home at the end.
3. See that the page is blank without any errors.

Expected behavior I expect the page not to be blank or tell me what I have misconfigured.

Additional context I understand that the main examples of integrating next js are using the pages directory. I do however not see why this should not work. It does work fine for the preview.

[mitchuman]

I've also tried setting up under app/builder/[[...page]]/page.tsx but am getting the error below (screenshot)

I've followed all the steps provided in the official docs (Next App Router)

[JABvzla]

I found that if you add query param '?builder.preview=page' in the URL it show up.

[FutureFutureTo]

any insight on this? I've noticed the same as well. I get a 404 unless i place ?builder.preview=page at the end of the url

[samijaber]

Hey folks, we have updated our docs on using the App router. Take a look here: https://www.builder.io/c/docs/integrating-builder-pages#add-a-builder-component-to-your-app

These new docs should get your app working properly without the need for a query param change.

[hamatoyogi]

So I've checked the sandbox, and to get it working, all that's need to be done is update theses packages to their latest versions:

“@builder.io/react”: “^3.0.8",
“@builder.io/sdk”: “^2.0.5",
“next”: “^13.4.12",

Here's a link to a working SandBox: https://codesandbox.io/p/sandbox/strange-snow-84njm7

[HypernovaTX]

I am using @builder.io/react on version 3.1.1 with React 17 and followed the documentations posted above. Unfortunately the issue persists.

After some digging and trial-n-error, I have found a workaround that worked for me:

Instead of

<BuilderComponent model="page" content={content} />

I used:

<BuilderComponent model="page" data={content?.data} />

[samijaber]

Closing as I believe this is fixed now. We have also updated all of our docs around the App Router, and they should all be in working order.