In this tutorial, you will learn how to deal with routing and linking web pages within a NextJS application. At the time of writing NextJs is the worlds most used static-site generator. It is a great choice if you want to create a JAMStack website using ReactJS. NextJs comes with loads of really cool in-built features that make building a ReactJS powered website super simple. When building any website you will need to handle multiple web pages. This poses a problem in ReactJS applications, how do you deal with the routing so a web request loads the correct page component? Luckily, NextJs has this handled for you.
To get started with the in-built routing engine, within the root folder of your application, create a folder called pages. Any file you create here will create a valid route in your application. If you created a file called about.js with this code:
Whenever a site visitor tried to browse to www.your-website.com/about the NextJs router will automatically route the request to the about component to process the request. In NextJS when creating pages it is possible to organise them by folders. It is valid to create sub-folders within pages directory. By default, the NextJS routing engine will load a file called index.js first. To create a homepage component you would simply create a file called index.js in the root pages directory!
Dynamic Routing
Being able to link single pages is great. What happens if you have a blog powered by a headless CMS, like ContentFul. In this situation, how do you render these dynamic pages? Dynamic routing allows you to define routes that can be defined in code rather than by filename alone. To create a dynamic page, in the pages folder create a file wrapped in brackets, like this [news].js. These brackets tell NextJs to work in dynamic mode. In dynamic mode you will need to tell the component which URLs are valid. This is done using getStaticPaths():
Notice in getStaticPaths() I define which URLs are valid. If you are working with a headless CMS, like Contentful, this path data will need to be retrieved from the CMS. One thing to note, notice how the URLs are defined from the website root URL and not simply relative to the components folder location. With these two options, you now have a way to create static pages and dynamic pages within your applciation. The next step is to link them together!
Link Between Pages
If you want to link to another page hosted in NextJS you can use the NextJS Link component. This is done like this:
Link is a super simple component to get started with, however, it may look a little odd. You add the href as a prop to the component, however, you will put the <a> in the body of the component! Asides from this oddity the component will behave as you would expect it to. If you want to create a link in a function on an event handler, you will need to take a different approach. You can handle these situations using the NextJS router in your component directly. This is done in code by importing and registering the router, like this:
As you can see in this snippet we are redirecting a user when a button is clicked! With routing and dynamic routing, linking and route handling you now know enough to be a NextJs routing master. Happy Coding 🤘
