nextjs - dynamic route with [...mydynamicroute].tsx


Nextjs dynamic route are different from APP and PAGES. 

For example the following are setup for app router 


App Route definition 

/app/product/[slug]/page.tsx      

Request for:

 /product/a -> OK 

/product/b -> OK 

/product/a/b -> Not Ok - To support this your need to define route with something like this 

/app/product/[...slug]/pages.tsx

The test contents for file are shown here

export default function Page({ params }: { params: { slug: string } }) {
    return <div>My Post: {params.slug}</div>
  }


Page router 

Notice page router uses "useRouter" and catch all segment uses [..page].ts (file - not folder). 

So we place this under /page/shop/[slug].tsx - Not /pages/api/shop -> that's something else and the intention is for API. 

Our dynamic route definition is like this 

/page/shop/[slug].tsx  

Request for 

pages/shop/a --> Ok

pages/shop/b -> Ok

pages/shop/a/b -> Not Ok -> It returns 404. To accommodate this, then we do something like  /pages/shop/[...slug].tsx 






Comments

Post a Comment

Popular posts from this blog

The specified initialization vector (IV) does not match the block size for this algorithm

Image
If you're getting  exception when trying to assigned key to a symmetric key and getting error message below :- The specified initialization vector (IV) does not match the block size for this algorithm And your code probably look like something below :- Then you need to go into debug mode and start looking into the supported size for IV as shown in diagram below :- As you can see, IV is 16 bytes, so you need to provide 16 bytes. The same goes for Key field too, if you're adding anything to it. As long as you provide a valid key size, then we're good and you're code will be ready.
Read more