Web Development

Understanding Routing in Next.js

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

Context

In this tutorial, you'll learn the basics of how to route pages in your Next.js application. Throughout the course of this tutorial, I'll try to 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: creating a Next.js app and 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 their "Create a Next.js App” tutorial before moving forward. 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 be requiring 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

Subscribe to Our Newsletter