nextjs 参数在构建期间不可用

Question

I'm using nextjs 13 with experimental app directory. My app uses dynamic routing like so:

https://app.domain/[itemid]/[slug]

In my [slug] directory, if I create pages.jsx , a server site route, with the following:

export default async function pageComponent ({ params, ...props }) {

    console.log('params': params);
    const data = await afunction(params.itemid);
    ...

The app works as expected when I run as dev . A url such as:

https://app.domain/44/pagetitle

Outputs params.itemid = '44' and params.slug = 'pagetitle' in the console, as I expected.

Problem

I can't build the app for production. If I run npm run build , it attempts to compile page.jsx and finds that afunction on pageComponent is undefined as it had no params.itemid . A user never targeted a specific url, so no params were generated when it's building. The params come from dynamic values set in a growing database. The various values in the database may be edited so I don't want an entirely static page.

Research

Based on the documentation , I'm unsure of how else I'm supposed to handle this. I feel I'm missing a step here but I don't feel I need to generateStaticParams but perhaps I'm wrong on this one?

Answer 1

In my situation, the solution was to add a generateStaticParams function, after all. There is a light reference to it in the documentation, under dynamic segments, which I read as an optional preference. Although I wasn't interested (yet) in having static pages created at build time, I was unable to get params working at all without using it, once building and using server side components.

For my use case, I attempted to create a single static page, using it:

export async function generateStaticParams() {

    const staticParams = [
        { 
            itemid: '4214', 
            slug: 'apagetitle'
        }
    ]
    return staticParams;
}

Which allowed the app to build successfully. Note, this was just for testing purposes and trying to better understand the issue. From the examples, this is intended to generate static pages for entire, or large sections of a database and the examples in the documentation illustrate this fine.