Next.js - Detect If Preview / Live Preview / Page Builder

Developing with Prismic
,
1

Hey,

I've got a kind of complicated slideshow component set up for my homepage which uses individual slices depending on what the user has selected. Unfortunately this means I can't use the on the frontend of my site, but I'd still like the content editor to get a preview of the image they've added in the Page Builder.

Is there a way to detect whether the user is viewing the site through the Page Builder, or through the live site (if that makes sense?).

Essentially, I'm hoping to do something like this:

{isPageBuilderPreview ? (
<SliceZone... />
) : (

)}

So the Page Builder view gets served the and the normal user on the website gets served the .

I'm running Next.js 14.1.3, but happy to upgrade to the latest version if needs be.

Thanks!

2

Hi Kieran,

I can't say I fully understand what you're suggesting here, can you illustrate a bit more what you want?

From what I think I understand my first thought is that isn't possible, but we'll see.

Thanks.

3

Hey Phil,

Thanks for getting back to me so quickly!

I think I've realised what my issue was – I wasn't fully understanding how the component worked. I thought it had to be present on the page.tsx file for the Page Builder / Live Preview to work. But I've just tried out a different approach and realised the slices are rendering in the Live Preview just fine.

Sorry for any confusion, feel free to close!

Thanks

1 Like
4

Hi @kieranstartup , glad to hear everything is working well. Let me know if there is anything else I can do to help.

Best,
Guy