Next.js Discord

Discord Forum

Dynamic paths help

Unanswered
Chinese perch posted this in #help-forum
Open in Discord
Chinese perchOP
next: 14.0.4

Objective:

final url: /x/[y]/[z]

- users can go to /x and click on item
- after clicking on item user is redirected to /x/1
- inside /x/1 the user can click on items belonging to 1
- after clicking on item user is redirected to /x/1/2
- no more redirects from here


current folder strucutre

personalities
   | page.tsx
   v
  [personality]
      | page.tsx
      v
     [subPersonality]
        | page.tsx


I have tried [...personality], [[...personality]]..

I'm able to get /personality/john and render john

but I can't get /personality/john/doe

7 Replies

qoobes
I recommend reading this first, if it's still an issue after that ping me https://reacthustle.com/blog/next-js-nested-dynamic-routes
Also off the top of my head, try putting a route in between the two dynamic bits, that may help
ReverseGem7
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments
app/personalities/[[...slug]]/page.tsx

export default function Page({ params }: { params: { slug?: string[] } }) {
  return <h1>My Page</h1>
}
Now y can check 
params.slug
and render different components
Black Vulture
isn't there a typescript type to cover the props?
something like PageProps<{slug: string}>
Chinese perchOP
Went with another solution due to time rush, but thanks for the help, all solutions here gave a 404 at the end.

Probably had some badly configured file or other, thanks for the help