Next.js Tutorial : Static and Dynamic Routing

Next.js Tutorial : Static and Dynamic Routing

An easy and simple routing system in Next.js tutorial for beginners. How to implement static and dynamic routing in Next.js applications.

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.

Image for post

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!

Image for post

Empty page source in CSR web applications

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!

javascript routing nextjs react-ssr react-js-tutorials react

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React JS Tutorial For Beginners In Hindi | What Is React JS | React JS Training

Great Learning brings you this React JS Tutorial For Beginners in Hindi Session. React JS is a JavaScript library that is developed and maintained by Facebook developers. If you want to build any sort of single page application, then React should be your go-to language. React also provides a way to reuse our UI components.

React JS Tutorial | What is React JS? | React JS Project

React JS Tutorial will provide you with a detailed and comprehensive knowledge about React. In this React JS Tutorial for Beginners you will learn React concepts from scratch and also how to create your first project in React.

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? Also, we will see the react hooks example.