Dynamic Routing & Dynamic Import

Dynamic Routing

Dynamic Routing means we don’t want to specify static routes for the pages; it would be dynamically generated using data from API or other means. Consider you build a portfolio site it might have pages like about, contact, and home page we required to define routes for each page statically. Still, in the case of a blog, there would be a home page, category page, and detailed page for each post; this detailed page cannot be defined with a static router because there could find hundreds of blogs post, and it is not possible to define separate router for each post. We use a dynamic router for each post in this situation, and then a router is generated on run time for each post.

Implementing Dynamic Routing

We are going to implement dynamic routing with the help of an example project. The project will have to display a particular stock name and its price. In this example, each stock will have its corresponding page, which means if you navigate to this link http://localhost:3000/apple that page will show the stock name and price of the company Apple.

The initial step is to set up the project for that run the corresponding code on your terminal.

npx create-next-app

After that, you will have a Next.js boilerplate on your workspace. Inside the project’s file structure, you could see a folder named pages, and inside pages create a file with a name [stock].js. This newly created file would act as a dynamic router.

Copy the below snippet of code into the [stock].js file; you could see two functions, getStaticPaths and getAllStockPaths. The Next.js provide the function getStaticPaths for implementing dynamic routing, and the function getAllStockPaths get all the pathnames to display on the URL.

Add the below snippet of code into the [stock].js, and here there are two functions, getStaticProps and getStockData. The Next.js provide the function getStaticProps for calling a function during the initial page load itself, and here we call the function getStockData, which will fetch all the stock information.

Finally, we could add the render method and wrap all these code snippets into a single file. After compiling the code, when you visit http://localhost:3000/facebook you could see the stock price of Facebook, and on visiting http://localhost:3000/apple would see the stock price of the company Apple.

Dynamic Import

Typically, it is impossible to import modules based on the condition whenever a page has been loaded, all the imported modules on that particular page also get loaded.

The above snippet of code will produce some error while compiling, but with Next.js, it is possible to load modules based on conditions with the help of dynamic import. We have to import the module 'next/dynamic' to do the dynamic import.

Even though if the imported module is not default export, we could do the dynamic import.

In Next.js, HTML is produced on the server-side. Thus, situations like when a particular module requires a library that only works in the browser will break the code compilation. With dynamic import, we could load that particular module on the browser side only.

Dynamic import is also used to increase the website performance since we could stop loading all the files on the initial page load itself. But if you use this feature not correctly, it could also affect the site performance.

Conclusion

Thank you for reading. I hope you have found this useful and feel a bit better about knowing how to create dynamic routes and implement dynamic import in Next.js.