Rename slug folder [slug] to [...slug]

[netlarico]

When I change the folder [slug] name from:

app/posts/[slug]/page.tsx
http://localhost:3000/posts/change-me Works!.

to:

app/posts/[...slug]/page.tsx
http://localhost:3000/posts/myfolder/test Doesn't Work!.

I've created mdx file in posts/myfolder/test.mdx

I got some errors:
Error: A required parameter (slug) was not provided as an array received string in generateStaticParams for /posts/[...slug]

I'm testing from: https://github.com/contentlayerdev/next-contentlayer-example/

Should i edit contentlayer.config.ts or app/posts/[slug]/page.tsx ?

[mkalsi25]

When I change the folder [slug] name from:

app/posts/[slug]/page.tsx http://localhost:3000/posts/change-me Works!.

to:

app/posts/[...slug]/page.tsx http://localhost:3000/posts/myfolder/test Doesn't Work!.

I've created mdx file in posts/myfolder/test.mdx

I got some errors: Error: A required parameter (slug) was not provided as an array received string in generateStaticParams for /posts/[...slug]

I'm testing from: https://github.com/contentlayerdev/next-contentlayer-example/

Should i edit contentlayer.config.ts or app/posts/[slug]/page.tsx ?

To use "catch all segment", you need to pass slug value in array format in generateStaticParams.

In your case, you need to edit your file app/posts/[...slug]/page.tsx something like that:

export const generateStaticParams = async () =>
  allPosts.map((post) => ({ slug: post._raw.flattenedPath.split("/") }));

To find data using slug.

const urlSlug = `${params.slug.join("/")}`;
  const post = allPosts.find((post) => post._raw.flattenedPath === urlSlug);

More info: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments

I hope it make sense. Happy coding 👨🏻‍💻

[netlarico]

Thanks! @mkalsi25

I've replaced like this:

export const generateStaticParams = async () =>
  allPosts.map((post) => ({ slug: post._raw.flattenedPath.split("/") }));

const PostLayout = ({ params }: { params: { slug: string[] } }) => {
  const urlSlug = `${params.slug.join("/")}`;

👏