In the last post, through some code metamorphosis, I converted our humble little caterpillar of a text editor into a beautiful butterfly of a code editor.

There is one problem with the project: it only has one page. Obviously, there’s a need to have hundreds or thousands of pages.

I could just copy and paste the same page repeatedly, but that will become difficult to scale and maintain. I need to take the common aspects of the page and then abstract it into a template.

Dynamic Routing in NextJS

NextJS has a fancy-schmancy way of dynamic routing via a file naming convention. To take advantage of this, I’ll move my ~/pages/JavaScript/String/index.tsx file to ~/pages/JavaScript/[...path].tsx.

Notice that the new file uses square brackets and an ellipsis. This is the naming convention that I mentioned. I’ll get into how this file name becomes relevant a little later.

The file name is just the first requirement. There are two methods that we need to export for dynamic routing to work:

• getStaticPaths: determines which paths will need to be created.
• getStaticProps: determines which props will be passed to the page template.

Note that each of these has their corresponding type: GetStaticPaths and GetStaticProps.

#javascript #webdev #nextjs #typescript #react