Builder content for home page ("/") missing content when navigating via Next Link

I’ve encountered an odd issue in two different NextJS + Builder.io projects, one using the App router and one using the Pages router. For each project, I have the home page configured using “/” for the URL. In NextJS, the home page is rendered using a catch-all route, [[…path.tsx]]. If I navigate to the site home page (“/”), the content page is successfully retrieved from Builder and the page renders fine. However, if I navigate to a page that is not using the catch-all route and then use a Next Link to navigate to the home page, the Builder content page is missing, and the page renders empty. This also happens if I navigate back to the home page using the back button.

The only workaround I’ve found that can bypass the issue is if I assign the Builder content entry for the home page to “/index” instead of “/” and then in the catch-all route, server-side, I determine if the page path is “/” and instead fetch the content using “/index” for the urlPath. This worked for my project using the App router but for my project using the Pages router I got it to work by completely eliminating my middleware.tsx file which wasn’t ideal but necessary at the time. That was before I discovered the workaround I used for the App router project.

In both projects, I don’t have this issue for any other pages, only the root page “/”. The workaround is sufficient for now but I’d ultimately like to better understand the issue.

1 Like

This could be related to a similar bug I had with routes not updating properly. In my case, the content wasn’t updating because I wasn’t including a key prop for the pages so that when Next went to re-render the content, it treated it the same as what was already in the Next cache.

You might try setting the key prop to path. You’d want to pass path in as a prop from getStaticProps/getServerSideProps.

Hey, appreciate this. Unfortunately it didn’t help me in my particular case (assuming I implemented your solution correctly) but I did learn a few things along the way.

FWIW, due to some differences with how we want our homepage to work compared to other landing pages, we use an index.tsx file + [uid].tsx and it works great that way. This may not help at all, but perhaps it could help you discover what’s going on with the routing?

Good thought, I may try going that route.