Next.js: The "Versatile" React Framework That Can't Handle Dynamic Routes

1 day ago 3

@goerlitz starting step 3 and 4 I think you get confused:

  • move the code that needs "use client" into a separate file, for instance:
// app/datasets/[slug]/page.tsx export const generateStaticParams() export async function YourPage() { return <ClientPage /> } // app/datasets/[slug]/ClientPage.tsx "use client" export async function ClientPage() { const [someState] = useState("foo") return <div>{someState}</div> }
  • As for generating the page with a dummy parameter, I am not sure what cause this error specifically (might but just a bug?), but anyway I think this approach won't work as is.

The thing is that if you use a dummy static param, Next only knows the dummy "/datasets/foo" route. So "/datasets/bar" won't work. You could do an URL rewrite from "/datasets/bar" to "/datasets/foo", but then the route parameter is lost.

You could opt for a query parameter instead.

Sadly until Next.js supports exporting dynamic routes that are not statically rendered like it did in Next 12 pages dir, I don't think you can use a dynamic route and do a static export, you should prefer a query parameter, + optionally an URL rewrite from a route param to a query param.

Read Entire Article