Hello, i use NextJs and i need to achieve url like page/[id]/[slug] from page

Question

I need to take the data as I had on the/[id] page, but in the URL I want to have the/[id]/[slug] page. Can I do this, and if I can, how?

Can you give a practical example of your case to understand it better? I assume you've read the docs here - https://nextjs.org/docs/routing/dynamic-routes — Gaurav, Sep 20 '21 at 10:29

ken · Answer 1 · 2021-09-20T10:57:39.487

Make another [slug] folder inside [id] folder.

So your file structure should be like this

|- pages
|-- [id]
|--- [slug] 
|---- index.js

Then you can direct your page like this:

<Link href="/post/MY-ID-VALUE/MY-SLUG">
    <a>Go to pages/post/[id]/[slug].js</a>
 </Link>

Then in your /pages/[id]/[slug]/index.js you can get back the value of id and slug like this:

const Post = () => {
  const router = useRouter()
  const { id, slug } = router.query

  return <p>MyId is: {id} Slug: {slug}</p>
}

1 Answers1