How to work of dynamic routes in next.js

Answer

Defining routes by using predefined paths is not always enough for complex applications. In Next.js
you can add brackets to a page ([param]) to create a dynamic route (a.k.a. url slugs, pretty urls, and others).

Consider the following page pages/post/[pid].js:

import { useRouter } from 'next/router'

const Post = () => {
const router = useRouter()
const { pid } = router.query

return <p>Post: {pid}</p>
}

export default Post