Rename slug folder [slug] to [...slug] #450

Activity

1. mkalsi25 commented on May 6, 2023

   

   mkalsi25

   on May 6, 2023

   More actions

   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 👨🏻‍💻
2. contentlayerdev

   locked and limited conversation to collaborators on May 7, 2023
3. schickling

   converted this issue into a discussion #452 on May 7, 2023