Preview Not Showing When Soft Navigating in Next.js

[FedericoBonel]

Description

The Puck editor preview sometimes fails to load when navigating to it via a <Link /> in a Next.js app. However, if the page is loaded directly or navigated to using a regular <a /> tag, the issue does not occur. Resizing the window or changing the zoom sometimes fixes the problem.

Steps to Reproduce

1. Set up a Next.js project with Puck.
2. Create a dynamic route for the editor and render it using the following page builder:

export async function PageBuilderPage({ params }: { params: PageBuilderPageParams }) {
 const { page } = await params;
 // Asynchronously fetch the Puck data for the page
 const pageData = await getPage(Number(page));

 if (!pageData) return notFound();

 return (
   <div className="fixed left-0 top-0 z-50 h-full w-full text-black">
     <Builder data={pageData.data} />;
   </div>
 );
}

// Builder Component

'use client';

//...

export default function Builder({ data }: { data: Data }) {
 return <Puck config={config} data={data} />;
}

3. Use a <Link /> component to navigate to the editor from another page.
4. Observe that the editor preview may not render.
5. Open the editor directly via the browser’s address bar or navigate using a regular <a /> tag instead.

What happens

When navigating via <Link />, the editor preview sometimes fails to appear.

What I expect to happen

The editor should always render properly, regardless of whether the user navigates using <Link /> or loads the page directly.

Image of the issue