`generateStaticParams` not Passing Parent Params to Child in Nested Dynamic Routes

nikolailehbrink commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:08:47 PST 2022; root:xnu-8792.61.2~4/RELEASE_X86_64
    Binaries:
      Node: 18.12.1
      npm: 9.7.1
      Yarn: 1.22.19
      pnpm: 8.6.6
    Relevant Packages:
      next: 13.4.14-canary.0
      eslint-config-next: 13.4.13
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router

Link to the code that reproduces this issue or a replay of the bug

https://github.com/nikolailehbrink/generateStaticParams-Bug

To Reproduce

Clone the GitHub repository that contains the bug.
Install the necessary dependencies with npm install or yarn install.
Start the development server with npm run dev or yarn dev.
Navigate to a nested route such as http://localhost:3000/12314/iasd in your browser.
Observe that the child page is accessible and the slug parameter is not available in the child's generateStaticParams.

Describe the Bug

I encountered a bug when using the generateStaticParams function with nested dynamic routes in Next.js. The parent's parameters are not being passed to the child's generateStaticParams, causing unexpected behavior in the generated static pages. According to the your documentation, the expected behavior is to "Generate the parent segments first and use the result to generate the child segments." However, in the provided example, the behavior is not consistent with this documentation, and the slug parameter from the parent route does not get passed to the child.

Expected Behavior

Expected Behavior: The slug parameter generated in the parent's generateStaticParams should be available in the child's generateStaticParams.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1509

yuki-yamamura commented 1 year ago

This problem also happened in my project which has the following environment.

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:52 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.13
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
    Next.js Config:
      output: N/A

What I want to do is like this:

// app/tags/[tag]/page.tsx
export const generateStaticParams = async (): Promise<{ tag: string }[]> => {
  const tags = await getTags();  // ['tagA', 'tagB', 'tagC']
  return tags.map((tag) => ({ tag }));
};

// app/tags/[tag]/page/[pageNumber]/page.tsx
export const generateStaticParams = async ({
  params: { tag },
}: {
  params: { tag: string };
}): Promise<{ pageNumber: string }[]> => {
  // Since tag is always undefined, getting articles by tag is to fail.
  const articles = await getArticlesByTag(tag);
  // ...
  }));
};

rustairov commented 1 year ago

Same issue.

I've also tried to add generateStaticParams in layout.tsx and it didn't pass static params into child pages/layouts.

oliverkidd commented 1 year ago

Can we get any updates on a temporary workaround on this issue? I'm having the same issue

viktorronnback commented 1 year ago

I found a workaround, which is to use generateStaticParams in the layout-file instead of page in the parent folder (template file does not work either). See this repo for an example: https://github.com/viktorronnback/generate-static-params-bug-53717

I'll keep looking into why this bug happens and try to make a PR. I assume it is a bug as, to my knowledge, it isn't stated in the docs that using layout in the parent is a requirement to pass params to child generateStaticParams functions. And even if it was a requirement, I think there should be some sort of build warning about using it.

yuki-yamamura commented 1 year ago

@viktorronnback Thanks. Using a layout in the parent folder works fine.

As far as I've been trying, the bottom up pattern has no problem.

Antonio-Laguna commented 8 months ago

Anyone that might be pulling their hair. the workaround introduces issues with @slots and intercepting routes.

R4F44L commented 1 month ago

For me, the workaround isn't working, next 14.1

gabrieletesser commented 1 week ago

Next 14.2.5 - pages in a nested route are not generated as well. Tried both bottom to top and top to bottom approaches - not a game stopper in my situation, but would be good if it would be actually working.

vercel / next.js