# How to fetch app/page data in Next13 **URL:** \ **Category:** Developing with Prismic\ **Tags:** nextjs\ **Created:** [May 17, 2023, 4:12pm UTC](https://community.prismic.io/t/how-to-fetch-app-page-data-in-next13/13134 "2023-05-17T16:12:09Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![luke1](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/luke1/32/5926_2.png) [@luke1](https://community.prismic.io/u/luke1)\ **Post date:** [May 17, 2023, 4:12pm UTC](https://community.prismic.io/t/how-to-fetch-app-page-data-in-next13/13134/1 "2023-05-17T16:12:10Z")
I am trying to setup Prismic with Next 13.4.2 and getting the following error: ```auto "getServerSideProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching ``` When using ```auto export async function getServerSideProps({ previewData }: IndexProps) { const client = createClient({ previewData }); const page = await client.getSingle('homepage'); return { props: { page, }, }; } ``` The new Next docs are stating to use `fetch()` so I wondering how people are implementing this with Prismic? Any help/advice would be appreciated. ---
**Author:** ![frags](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/frags/32/5932_2.png) [@frags](https://community.prismic.io/u/frags)\ **Post date:** [May 17, 2023, 6:30pm UTC](https://community.prismic.io/t/how-to-fetch-app-page-data-in-next13/13134/2 "2023-05-17T18:30:05Z")
You don't need to use `getServerSideProps ` in the new app router. You should be doing something like this in your `page.tsx` ```auto import { createClient } from "@/prismicio"; import { SliceZone } from "@prismicio/react"; import { components } from "../slices"; const client = createClient(); export const revalidate = 0; export async function generateMetadata() { const page = await client.getSingle("homepage"); return { title: page.data.title, description: page.data.description, }; } export default async function Home() { const page = await client.getSingle("homepage"); return (
); } ``` Have to use `export const revalidate = 0` so that it fetches content each time. Was struggling with that. ---
**Author:** ![luke1](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/luke1/32/5926_2.png) [@luke1](https://community.prismic.io/u/luke1)\ **Post date:** [May 17, 2023, 7:00pm UTC](https://community.prismic.io/t/how-to-fetch-app-page-data-in-next13/13134/4 "2023-05-17T19:00:18Z")
@frags thats worked! Thanks for the pointer and also the note about `revalidate`. Just had to google that and thats something good to know for the future. ---
**Author:** ![angeloashmore](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/angeloashmore/32/2685_2.png) [@angeloashmore](https://community.prismic.io/u/angeloashmore)\ **Post date:** [May 17, 2023, 8:56pm UTC](https://community.prismic.io/t/how-to-fetch-app-page-data-in-next13/13134/5 "2023-05-17T20:56:36Z")
Hi @luke1 and @frags, Prismic's [Fetch Data Next.js documentation](https://prismic.io/docs/fetch-data-nextjs) includes examples of querying content in the App Router. The example is essentially equivalent to the one posted above: ```auto import { createClient } from "@/prismicio"; export default async function Page({ params }) { const client = createClient(); const page = await client.getByUID("page", params.uid); return

{page.uid}

; } ``` As of `@prismicio/client` v7.0.0 and v6.8.0, you can specify `cache: "force-cache"` or `cache: "no-store"` using the `fetchOptions` parameter. ```ts const client = prismic.createClient(repositoryName, { fetchOptions: { cache: "force-cache", // You can specify `next` options as needed: next: { revalidate: 0 }, }, }); const page = await client.getByUID("page", "home", { fetchOptions: { // These options can be specified for a specific query as well. cache: "force-cache", next: { revalidate: 0 }, } }) ``` ---
**Author:** ![frags](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/frags/32/5932_2.png) [@frags](https://community.prismic.io/u/frags)\ **Post date:** [May 17, 2023, 9:38pm UTC](https://community.prismic.io/t/how-to-fetch-app-page-data-in-next13/13134/6 "2023-05-17T21:38:38Z")
Thanks @angeloashmore - I hadn't noticed my client was old. Just upgraded to 7.0.0 and using the fetchOptions doesn't seem to pull the latest changes when in local dev. ```auto export default async function Home({ params }: { params: Params }) { const client = createClient(); const page = await client.getByUID("page", params.uid, { fetchOptions: { cache: "no-store", next: { revalidate: 0 }, }, }); //rest of code ``` ---
**Author:** ![angeloashmore](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/angeloashmore/32/2685_2.png) [@angeloashmore](https://community.prismic.io/u/angeloashmore)\ **Post date:** [May 17, 2023, 11:55pm UTC](https://community.prismic.io/t/how-to-fetch-app-page-data-in-next13/13134/8 "2023-05-17T23:55:45Z")
Could you clear your Next.js `fetch` cache and try again? You can clear the cache by deleting the cache directory: `.next/cache/fetch-cache`. Since you are using `no-store`, future requests shouldn't be added to the cache. We will be releasing a CLI that automatically clears Prismic requests from that cache, which we will recommend calling before `next dev` or `next build`. * * * By the way, `v7.0.0` and `v6.8.0` were just released today and 2 days ago respectively. We wouldn't have expected you to already be using the latest version. 🙂 In case you want a more detailed walkthrough of v7, check out this forum post: [@prismicio/client v7 is now available](https://community.prismic.io/t/prismicio-client-v7-is-now-available/13140) ---
**Author:** ![frags](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/frags/32/5932_2.png) [@frags](https://community.prismic.io/u/frags)\ **Post date:** [May 18, 2023, 7:46am UTC](https://community.prismic.io/t/how-to-fetch-app-page-data-in-next13/13134/9 "2023-05-18T07:46:39Z")
Working now, thanks @angeloashmore !!! 😁 I'm glad I wasn't being dumb about the latest releases too 😅 ---
**Author:** ![luke1](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/luke1/32/5926_2.png) [@luke1](https://community.prismic.io/u/luke1)\ **Post date:** [May 18, 2023, 9:02am UTC](https://community.prismic.io/t/how-to-fetch-app-page-data-in-next13/13134/10 "2023-05-18T09:02:15Z")
@angeloashmore when following your above example I get the following error? `Type '{ next: { revalidate: number; }; }' is not assignable to type 'RequestInitLike'. Object literal may only specify known properties, and 'next' does not exist in type 'RequestInitLike'.ts(2322) (property) revalidate: number` ```auto const page = await client.getByUID('homepage', params.uid, { fetchOptions: { next: { revalidate: 0 }, }, }); ``` Also can you use `fetchOptions` with `client.getSingle`? ---
**Author:** ![angeloashmore](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/angeloashmore/32/2685_2.png) [@angeloashmore](https://community.prismic.io/u/angeloashmore)\ **Post date:** [May 18, 2023, 4:37pm UTC](https://community.prismic.io/t/how-to-fetch-app-page-data-in-next13/13134/11 "2023-05-18T16:37:19Z")
Hi @luke1, Could You update to the latest version of `@prismicio/next`? The latest version includes a bit of code that adds support for the `next` property in `fetchOptions`. And yes, you can use `fetchOptions` when creating a Prismic client, which will apply those options to all queries, or you can use/override `fetchOptions` on a per-query basis. That includes `getSingle()` and all other methods that query for content. A post about the latest `@prismicio/next` updates will be out soon. 👍 But just so you can feel confident updating, the latest version (v1.1.0) does not include any breaking changes; it mainly adds support for the App Routes.