How to implement and use routes in Next.js
Next.js Tutorial : Static and Dynamic Routing
Why you should use Next.js and the basic concepts of routing
Hello everyone! Around one month ago I wanted to start building SSR and SEO Friendly Websites using React and started looking for a nice tutorial for Next.js — One of the best available tools — of this purpose. But I couldn’t find one. So I decided to create one of my own, which turned into this article.
Why SSR?
I don’t want to dive deep into the basic comparisons of SSR and CSR but in summary, we’re covering some different and concepts of SSR web applications.
SSR — server-side rendering — and CSR — client-side rendering — are both types of rendering your pages for your clients and customers. In CSR, the server sends a blank HTML file to the client and the responsibility of filling it with JS files is on the client’s browser’s shoulders. When you create a React application with CRA, or your boilerplate and deploy it on the server, you create a CSR web application! So, if you open your page source in the browser, you find your div with root id EMPTY!
But in SSR web applications, you will render your HTML file on your server, then send it to the client browser. This approach has two benefits:
1. Faster page loading and better experience for clients (The horrible blank loading page!). It’s faster because your servers are a lot more powerful than most of your clients!
2. It’s SEO friendly and google crawlers have everything in Page Source.
You can read about CSR and SSR in the great article of Alex Grigoryan here in The Benefits of Server Side Rendering Over Client Side Rendering!
Why Next.js?
Honestly, you can create your SSR React Web Application without using any framework or tools. But it’s so hard and complex and you have to spend a lot of time to fix its bugs! There are some tools that can help you to overcome mentioned challenges like Razzle, After JS, Next JS, and Gatsby. But the most powerful and featured framework is Next.js!
Here are some of Next.js’s benefits:
1. Zero Config: Like CRA, you can use Next easily without diving into webpack and babel configurations.
2. Built-in CSS libraries: So you want to use CSS-in-JS or SCSS? Don’t worry! Next provides them for you.
3. Powerful in pre-rendering.
4. Easy and simple configuration
5. Hot reloading: Develop, save, and see your changes instantly!
So, why recreate the wheel? Let’s start using Next.js!
Prerequisites
If you want to understand everything in this article (and the next articles), you should have a good understanding and experience in React. Obviously, you should have a great understanding of JavaScript, HTML, and CSS too. I’m using functional programming and it’ll be good if you will be familiar with functional components and React Hooks. You can read about hooks in my 2 articles:
React Hooks for beginners, Sweet and a little complex
React Hooks: How to use useEffect()
And you should have Nodejs and Node package manager or yarn installed on your machine.
Repo Link: https://github.com/hosseinAMD/next-playground
Creating our Next.js project
Like CRA, you have a very simple way to create your application with Next.js. open your bash and type this command:
npx create-next-app [your-project-name]or
yarn create next-app [your-project-name]At the beginning of the installation, you will be asked to choose a template and you can choose the basic starter template.
Finally, you can run your project in development mode by typing in your project directory:
yarn devnpm run dev
Static Routing
Routing system in Next.js is different from what you have been used to in React by react-router. Routing is directory-based and there is no need to type any code to create your routes. If you look up in your project root, you can find a folder named “pages”. The routing of your application is completely related to this folder and files inside it.
The “index.js” file in this folder is your “/” route. So, if you open your browser and type http://localhost:3000 you will see the index.js contents. Consider that we want to create a “/about” route in our application. Simply create a new file in “pages” directory named “about” and create a functional component like this in it:
Tip: There is no need to import React. Next.js will import it for you!
And now open http://localhost:3000/about in your browser and you can see your about page rendering nice and our routing works perfectly. If you want to create a route like “/contact/map” for example, you can easily create a directory named “contact” and then a “map.js” file!
Navigating between routes
In Next.js we don’t have any NavLink components to navigate between our routes. And we should not use <a> tag because this will refresh your page completely and you can’t use high performance or the benefits of React’s Virtual DOM! So how do we navigate between our routes in a smooth and modern way?
Next.js has a nice API called “next/link” which you can import “Link” from this API and wrap everything you want with it to act as a link for you. First, you should import Link and then wrap your <a> tag with it. Required property of this component is “href”. Let’s create a link to our about page in index.js:
And if we test it:
Awesome! We created some routes and navigated between them perfectly!
Dynamic Routing
But what if you have an array of cities and you want to show a description for every city in your app? How do we implement a dynamic routing in our Next.js application? Dynamic routing in Next is very simple too! If you wrap your file name with [ ], its behavior will be like “:var” in react-router. For example, if you create a directory named “cities” and inside it create a file named “[city].js”, you can type anything instead of city in your route and your [city].js component will be shown.This approach works for folders too.
Let’s test it. Consider we have an array of country and cities in our index.js:
We want to show a simple sentence like “City is placed in Country” when we click on every city. Create a directory named “[country]” and a file “[city].js” inside it. Our city component can be like this:
We can access the values of our query parameters in our route by useRouter hook, imported from “next/router”. useRouter returns an object of your current route in the location bar and you can access its variables easily!
Now we should change our index.js to be able to navigate to our dynamic route:
Awesome! But if you open your developer tools and look into your inspect tab, you see that all of the codes are changing. This is the bad behavior of <a> tag! To avoid this happening in dynamic routing you should pass your route template in “href” property, and the exact route in “as” property. So, change your index.js file like this:
Let’s test it:
Awesome! Everything is working great.
Tip: you can create an “index.js” file in your directories so you will have your nested routes root page too. For example you can create “index.js” in your [country] folder so the http://localhost:3000/italy is a valid route too and renders your “index.js” file’s content.
Final Words
We successfully implemented static and dynamic routing in our first Next.js application. The routing system is the first and most important concept of Next applications.
In the following articles we will dive into more complex concepts of Next.js. Feel free to contact me at “hossein.ahmadi98@outlook.com” or contribute to our playground repository!
