Understanding Routing in Next.js

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.