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