Odd Slice Previews | How to edit Slice Preview

Developing with Prismic
, ,
1

Describe your question/issue in detail

Hey working with Prismic's new page builder for the first time. Loved Alex's Next.js tutorial on YouTube.

In the Next.js App Router / layout.ts file, I have a Navbar, {children} & Footer. This is almost the same setup as Alex's tutorial but for some reason, inside the Slice Preview, I see the slice and the Navbar. Not the footer under it. Just the navbar with every slice. Really odd. Commenting out the Navbar makes it go away but idk why the Navbar is being picked up in the slice's preview and why the Footer isn't

Image:
image

Github Repo: GitHub - NeeshSamsi/felixexpeditions: Unforgettable Driving Expeditions Across India. Curated by Aniket Sengupta

Now when I was trying to style the preview by adding a className to the SliceSimulator in the slice-simulator/page.tsx, I noticed that adding a div around the SliceSimulator seems to remove the Navbar and show only the slices correctly. Please let me know if this is a bug or intentional.

return (
    <div>
      <SliceSimulator>
        <SliceZone slices={slices} components={components} />
      </SliceSimulator>
    </div>
  )

As a follow-up, as you can see in the image, the Navbar has a nice beige background. How can I add a background to the Slices being previewed? According to Alex's tutorial, you can add a background-color to the SliceSimulator in the slice-simulator page. However this doesn't seem to work for me. I even tried adding a div around the slice zone and styling that. Still didn't work for me

2

I have an update. I believe the Navbar is coming through into the preview because it's set to sticky? That may have something to do with it. Still don't know how or why adding a div wrapping SliceSimulator fixes it but well.

The update on styling the preview is that className on the SliceSimulator works however background-color is not respected. It needs to be the specific background prop instead.
But then I added a block padding for the preview since I handle Slice spacing from the layout rather than inside each slice. And I can see the Nav peaking out under the Slice where the padding should be. So for now I'm keeping a div wrapped around SliceSimulator and not adding any y or block padding.

1 Like