Previews with custom types and Next.js App Router

Hi! I'm working to integrate Prismic into a Next.js application that uses the new App Router. My application uses Custom Types fetched via the prismic client library. Is it possible to achieve preview functionality when editing custom types? From reading the documentation, it seems that previewing is only available when editing a page type. Is that assumption correct? If previewing with custom types isn't available out of the box, do you have any guidance for developing my own preview functionality with the custom types API and Next's draft mode feature?

Hi @april.feirman

For development, slicemachine is great for previewing slices, but when you're working with custom types (not page types), you need to consider where these custom types will be used. My guess is that you'd use custom types as a content relationship field either in a page type or in a slice. You can't at the moment simulate content relationships in the simulator. So...

I would create an unpublished page and begin adding the custom type data to it and then use the development preview at first. You can then switch to production preview if you need to show a client.

Thanks for such a quick response @nf_mastroianni! I want to make sure we both understand the goal. What I want to achieve is this.

  • A member of the implementation team can edit custom types with prismic
  • Then, they can preview the live app with the unpublished data.
  • When they confirm that the content update looks correct, they publish.

Can I achieve this with your suggestion?

These custom types you speak of would probably be used in a page type, so as long as the people who are editing your custom types can also edit the page types. They can use the preview functionality of the page type before publishing.

Let me use an example.
In my NextJS + Prismic projects, I have a custom type called settings. I use this to control things like:

  1. The site title
  2. the site domain
  3. the fallback site/page metadescription
  4. the fall back site meta image
  5. the site navigation

I can edit the site title, and then click the preview button (I have two preview environments dev/prod) and I can see the changes in the preview.

That example makes sense, thanks. In our current data model, we're not using any page types. Is it possible to achieve the preview functionality without a page type?

I can’t see how you could get a preview without making use of the prismic preview component. Are you including it in your layout file along with with API routes?

I am using the preview component. We're misunderstanding each other. I was asking if I have to use page types to be able to preview. I discovered that I can initiate a preview for an entire release. This issue can be closed. Thank you!

I apologize for misunderstanding you.

As far as closing the post, I believe you are in control of that. You solved your own issue so I suppose you'd click solution on your most recent reply. :wink:

1 Like