Next.js Discord

Discord Forum

Cant get Dynamic routes to work

Answered
Appenzeller Sennenhund posted this in #help-forum
Open in Discord
Appenzeller SennenhundOP
./app/[id]/page.tsx
type PropsType = {
  params: Promise<{ id: string }>;
};

export default async function Page( props: PropsType ) {
  await console.log({props});
  return <>hello</>
}


 ✓ Starting...
 ✓ Ready in 1687ms
 ✓ Compiled /middleware in 266ms (180 modules)
 ○ Compiling /[id] ...
 ✓ Compiled /[id] in 2.4s (1075 modules)
 ✓ Compiled in 163ms (421 modules)
{
  props: {
    params: Promise {
      <pending>,
      id: 'id',
      [Symbol(async_id_symbol)]: 46328,
      [Symbol(trigger_async_id_symbol)]: 46327,
      [Symbol(kResourceStore)]: undefined,
      [Symbol(kResourceStore)]: undefined,
      [Symbol(kResourceStore)]: undefined,
      [Symbol(kResourceStore)]: undefined,
      [Symbol(kResourceStore)]: [Object],
      [Symbol(kResourceStore)]: [Object]
    },
    searchParams: Promise {
      <pending>,
      [Symbol(async_id_symbol)]: 46265,
      [Symbol(trigger_async_id_symbol)]: 46260,
      [Symbol(kResourceStore)]: undefined,
      [Symbol(kResourceStore)]: undefined,
      [Symbol(kResourceStore)]: undefined,
      [Symbol(kResourceStore)]: undefined,
      [Symbol(kResourceStore)]: [Object],
      [Symbol(kResourceStore)]: [Object]
    }
  }
}
 GET /id 200 in 3621ms
 ✓ Compiled /_not-found in 400ms (1065 modules)
 GET /id/1 404 in 741ms
 GET /id/cat 404 in 184ms


http://localhost:3000/id/ works just fine and outputs hello but http://localhost:3000/id/cat leads me to a 404 page.

I've looked though the docs and a few other sources but cant find what I am wrong with. I should at least be getting hello on any of the sub-routes but that doesn't happen

what am I doing wrong?
Answered by Appenzeller Sennenhund
oh I thing I have it figured it out, http://localhost:3000/cat works instead of http://localhost:3000/id/cat so when using dynamic routes the folder itself is dynamic. should've thought about that
View full answer

3 Replies

Appenzeller SennenhundOP
oh I thing I have it figured it out, http://localhost:3000/cat works instead of http://localhost:3000/id/cat so when using dynamic routes the folder itself is dynamic. should've thought about that
Answer
Asian black bear
Correct. The variable in brackets is a placeholder.
Appenzeller SennenhundOP
{ id: undefined }