Next.js Discord

Discord Forum

Trying to statically generate a dynamic route with the App Router

Answered
Vesper Sparrow posted this in #help-forum
Open in Discord
Vesper SparrowOP
Hi, I'm using the /app directory. I have a route /store/[id] that I'm trying to generate a static build of.

I've set my config
const nextConfig = {
  output: "export",
}


and I've added the following in the page component:
export const generateStaticParams = () => [{ id: "test" }]

export default function Page({ params }: { params: { id: string } }) {
  const id = params.id
  ...
}


However, it keeps building as a server-side route when I run next build:
λ /store/[id]


Note, trying to log the params variable gives:
{ id: '%5Bid%5D' } // which is basically [id], instead of getting substituted with the values I'm providing in generateStaticParams


Can you help me, please? What am I missing?
Answered by Vesper Sparrow
Turns out the issue was that I had "use client" on top of the page. Now that I turned the page back into a server component it works 🎉
View full answer

3 Replies