Mukhtar Bahadory

Dynamic Routes Overview

Dynamic routes require you to be in the mindset of catches or triggers of the same function for people visiting a multitude of paths on your website.

For example, you might define a dynamic route on your page's index route so /apples and /oranges both trigger it. However, routes such as /apples/taste or other extensions of the like are not intended to cause a trigger.

For the above case, you would have a pages directory structure that simply has a file named [fruit].js.

The concept of dynamic paths themselves is not very interesting or complex, but when paired with Static Site Generation and getStaticPaths then they become much more interesting.


In the case of Server Side Generation, dynamic routes are very simple and intuitive and that is solely because your getServerSideProps function will have access to the request from the client.

From the request object, you will have access to the absolute value for that dynamic route and can react appropriately.

Though, it is important to note that it is possible to achieve similar behavior with SSG with the use of getStaticPath's fallback property. TODO