NextJS route shows [slug] in url-CodePudding

I have a NextJS app with the folder structure:

- pages
  - docs
   - [slug]
     - index
     - [id]
       - index

These pages are supposed to be dynamic based on the data that appear in the UI. Meaning a user can go to /docs/payments/introduction (where payments and introduction are dynamic pages too).

However everything works fine when the user is one level deep in the nesting eg (docs/payments), but when the user goes 2 level deep (eg docs/payments/introduction), all the links begin showing [slug] in their url. Let's say there's a link in the sidebar that's supposed to go to /docs/payments/faq it then starts showing /docs/[slug]/faq in the url. Here's a screenshot of an example url

I have no idea how its happening.

CodePudding user response：

You need to use [...slug].tsx to be able to use multiple slugs.

- pages
  - docs
   - [...slug].tsx

If you want more info, click here.

CodePudding user response：

Are you sure you are using Links and router.pushes correctly? When using dynamic slugs, you should use as prop. Like this:

<Link as="/page/docs/getting-started/creating-an-account" to="/page/docs/[slug]/[id]">
  <a>Link</a>
</Link>

or if you are using router, like this:

const router = useRouter();

router.push('/page/docs/[slug]/[id]', '/page/docs/getting-started/creating-an-account');