Next.js : File System-based Routing (Dynamic Routing )

Dynamic Routing

pages/product/first-item

pages/category/[slug].js => /category/:slug (ex. /category/food )

pages/[username]/info.js => /:username/info (ex. /youjun/info )

pages/cart/[...slug].js => /cart/* (ex. /cart/2022/06/24 )

useRouter / query

Multiple Slug

pages/[username]/[info].js

const { username, info } = router.query

 

pages/cart/[...slug].js

const { slug } = router.query

=> array

 

Optional Slug

pages/cart/[]...slug.js => Accessing '/cart' results in 404.

pages/cart/[[...slug]].js => It is received even if the slug does not exist. The default page is displayed.