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.
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