# Previews with custom types and Next.js App Router

**URL:** <https://community.prismic.io/t/previews-with-custom-types-and-next-js-app-router/15216>\
**Category:** Developing with Prismic\
**Tags:** nextjs, custom-types-api\
**Created:** [February 7, 2024, 9:19pm UTC](https://community.prismic.io/t/previews-with-custom-types-and-next-js-app-router/15216 "2024-02-07T21:19:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![april.feirman](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@april.feirman](https://community.prismic.io/u/april.feirman)\
**Post date:** [February 7, 2024, 9:19pm UTC](https://community.prismic.io/t/previews-with-custom-types-and-next-js-app-router/15216/1 "2024-02-07T21:19:00Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![nf\_mastroianni](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/nf_mastroianni/32/7071_2.png) [@nf\_mastroianni](https://community.prismic.io/u/nf_mastroianni)\
**Post date:** [February 7, 2024, 9:36pm UTC](https://community.prismic.io/t/previews-with-custom-types-and-next-js-app-router/15216/2 "2024-02-07T21:36:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![april.feirman](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@april.feirman](https://community.prismic.io/u/april.feirman)\
**Post date:** [February 7, 2024, 9:50pm UTC](https://community.prismic.io/t/previews-with-custom-types-and-next-js-app-router/15216/3 "2024-02-07T21:50:41Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![nf\_mastroianni](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/nf_mastroianni/32/7071_2.png) [@nf\_mastroianni](https://community.prismic.io/u/nf_mastroianni)\
**Post date:** [February 7, 2024, 10:11pm UTC](https://community.prismic.io/t/previews-with-custom-types-and-next-js-app-router/15216/4 "2024-02-07T22:11:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nf\_mastroianni](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/nf_mastroianni/32/7071_2.png) [@nf\_mastroianni](https://community.prismic.io/u/nf_mastroianni)\
**Post date:** [February 7, 2024, 10:59pm UTC](https://community.prismic.io/t/previews-with-custom-types-and-next-js-app-router/15216/5 "2024-02-07T22:59:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![april.feirman](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@april.feirman](https://community.prismic.io/u/april.feirman)\
**Post date:** [February 7, 2024, 11:20pm UTC](https://community.prismic.io/t/previews-with-custom-types-and-next-js-app-router/15216/6 "2024-02-07T23:20:44Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![nf\_mastroianni](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/nf_mastroianni/32/7071_2.png) [@nf\_mastroianni](https://community.prismic.io/u/nf_mastroianni)\
**Post date:** [February 8, 2024, 1:53am UTC](https://community.prismic.io/t/previews-with-custom-types-and-next-js-app-router/15216/7 "2024-02-08T01:53:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![april.feirman](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@april.feirman](https://community.prismic.io/u/april.feirman)\
**Post date:** [February 9, 2024, 12:18am UTC](https://community.prismic.io/t/previews-with-custom-types-and-next-js-app-router/15216/8 "2024-02-09T00:18:05Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![nf\_mastroianni](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/nf_mastroianni/32/7071_2.png) [@nf\_mastroianni](https://community.prismic.io/u/nf_mastroianni)\
**Post date:** [February 9, 2024, 12:47am UTC](https://community.prismic.io/t/previews-with-custom-types-and-next-js-app-router/15216/9 "2024-02-09T00:47:59Z")

</div>

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. 😉

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [February 9, 2024, 10:21am UTC](https://community.prismic.io/t/previews-with-custom-types-and-next-js-app-router/15216/10 "2024-02-09T10:21:19Z")

</div>


