Are there any updated docs coming for static-site generation and App Dir?

Developing with Prismic
1

Hey, I'd like to statically generate pages and blogs that don't have much need for always fetching the latest. I can't seem to make that happen with the App Dir and Prismic as I get build errors such as Error: No documents were returned in my dynamic routes.

Can you let us know when the updated Define Paths with Next.js - Documentation - Prismic will be ready?

Or does anyone have any tips?

Thanks!

4

I’m using the app router so getStaticPaths isn’t available.

Looks like I need generateStaticParams - I’ll have a play

5

Gosh, yes, that’s what I meant. Here’s my usage:

export async function generateStaticParams() {
  const pages = await client.getAllByType('page')
  return pages.map((page: PageDocument) => {
    const {
      data: { subdirectory },
    } = page
    if (subdirectory) {
      return { uid: [subdirectory, page.uid] }
    }
    return { uid: [page.uid] }
  })
}
6

So does that render your sub pages too?

I thought I'd have to do generateStaticParams in both page.tsx - can that happen just in the [uid] directory page.tsx?

My app directory is like this:

  • [uid]
    • [slug]
      • page.tsx
    • page.tsx
7

Hey @frags

My page type has a key text field where I specify a subdirectory if needed. This comes in handy when migrating a client from a different system. So if the subdirectory is widgets, and the uid is product-1, the url would be: domain/widgets/product-1

App/
  […uid]
    page.ts
8

Hey @frags and @nf_mastroianni,

Yes, updated documentation is coming! We are still figuring out best practices for the Next.js App Router, but we are close to a set of recommendations.

Please note that Prismic Previews in the App Router are currently not documented, and once it is documented, it will be treated as experimental. Previews will only work using dynamic rendering, not when using static rendering (i.e. with generateStaticParams()).

Although we don't have published documentation to share right now, here is a draft version you can refer to:



Dynamic routes

In the App Router’s file-system-based routing, dynamic route segments are defined inside square brackets: app/[uid]/page.tsx. This route handles any URL with a single path segment, such as /apples or /carrots. The square brackets around [uid] act as a wildcard.

When used in combination with static rendering, dynamic routes can be statically generated to optimize page speed. To do so, Next.js must know what pages to render. generateStaticParams() tells Next.js what pages to render for a dynamic route.

:speech_balloon: Previews in the App Router

Prismic Previews in the App Router are currently experimental and only supported using dynamic rendering. All Prismic API requests are cached at request time, resulting in performance similar to static rendering.

If you prefer static rendering, remove Prismic Preview support or use the Pages Router.

generateStaticParams() should be omitted when using experimental Prismic Previews.

Here is an example:

// src/app/[uid]/page.tsx

import { createClient } from '@/prismicio'

export default async function Page({ params }) {
  const client = createClient()

  const page = await client.getByUID('page', params.uid)

  return <h1>{page.data.title}</h1>
}

// Not supported when using experimental Prismic Previews!
export async function generateStaticParams() {
  const client = createClient()

  const pages = await client.getAllByType('page')

  return pages.map((page) => ({
    uid: page.uid,
  }))
}

Here, generateStaticParams() tells Next.js to render a page for every Page document from Prismic.

In the set up step, you defined a route resolver (the routes option). Next.js will generate a route for every document specified with your route resolver.

Here is the route resolver for the above example:

// prismicio.ts

const routes = [
  {
    type: 'page',
    path: '/:uid',
  },
]
9

I’m so glad this is coming! And that what I’ve just done in my app is what you’re recommending!

I’ve managed to statically generate as you describe but also subpages like I mentioned above Are there any updated docs coming for static-site generation and App Dir? - #6 by frags

1 Like