Web Development

Understanding Routing in Next.js

February 28th, 2023 | By Jay Raj | 9 min read

In this comprehensive guide, you'll learn the basics of how to route pages in your Next.js application. In other words, you will understand routing in Next.js.

I will explain the different types of routing available in Next.js and how to use them with the help of an example. So, let's get started by creating your Next.js app.

Creating the Next.js App


In order to properly integrate Jscrambler into your Next.js build process, there are two things we need to do first:

  1. Creating a Next.js app.

  2. Configuring Jscrambler. Let's go through those steps.

Creating Your Next.js Application


If you are not very experienced with Next.js yet, feel free to check out Jscrambler's blog articles regarding the Next.js topic, including "Working with Redux in Next.js" and "Understanding Data Fetching in Next.js".

We will actually be using this example app in our integration tutorial, so let’s install it.

Teste

To get started with creating your Next.js app you'll be requiring Node.js >= 10.13. Type in the following command to check the Node version installed,

import { useRouter } from 'next/router' 

   const Brand = () => { 
   const router = useRouter() 
   const { brandId } = router.query 
   return <h3>Brand: {brandId}</h3> 
   }
 
export default Brand

The above command should output something as shown.

To get started with creating your Next.js app, you'll need Node.js >= 10.13. Type in the following command to check the Node version installed,

node -v


The above command should output something as shown:

C:\Users\Jay>node -v
v18.12.1


If your Node version is above 10.13 you can use the following command to create your Next.js app.

npx create-next-app next-route-app


The above command would ask a couple of questions as shown. For the following, you can select the respective answers:

  • Would you like to use TypeScript with this project? Yes

  • Would you like to use ESLint with this project? Yes

  • Would you like to use src/ directory with this project? Yes

  • Would you like to use the experimental app/ directory with this project? No

  • What import alias would you like configured? Press Enter


Once this is done you will have your Next.js app created. Navigate to the project directory and start the app.

cd next-route-app
npm run dev


The above command will start the project in development mode and you will have the app running at http://localhost:3000.

Jscrambler

The leader in client-side Web security. With Jscrambler, JavaScript applications become self-defensive and capable of detecting and blocking client-side attacks like Magecart.

View All Articles

Must read next

Javascript

Routing your Angular 2 Application

By the end of this tutorial, we'll have taken a look at the core-concepts behind routing in Angular 2.0.

November 18, 2016 | By Thomas Greco | 6 min read

Web Development

Svelte Routing with Page.js

Svelte is the up-and-coming framework in the JavaScript ecosystem. Let's learn how to set up routing using the handy Page.js library.

June 9, 2020 | By Ahmed Bouchefra | 4 min read

Section Divider