How to retrieve and pass dynamic route segment between components in Next.js & React

In Next.js is easy to play with dynamic route segments. We need to create a directory with the name [slug] and the last segment in the url for that route will be dynamic. We can get the dynamic route slug in the component from the directory [slug] by distructuring the component's object received as parameter.

I'm using Next.js 14.2.20 and App Router.

Gist URL: https://gist.github.com/InterTuts/e4a202316382c1e320ee74e4441e7f9e