Next.js Pages

The Next.js Pages are the components used to define routes in the next application. Next.js uses a file-based routing system that automatically maps files in the pages directory to application routes, supporting static, dynamic, and nested routes for efficient web development.

Types of Routing

Each file with the js, ts, jsx, tsx extensions automatically renders as a route in Next.js.

• Static Pages: the code files inside /pages directory having some name and the above mentioned types create static pages.
• Dynamic Pages: The files with names in single square brackets create dynamic routes in Next.js application e.g., /pages/users/[user].js
• API Routes: Next.js allows us to create API endpoints in the project within the pages/api directory. It is directly mapped to /api/... route and is treated as api.

Creating Your First Next.js Page

You can create a new NextJS project using the below command:

npx create-next-app gfg

After creating your project folder (i.e. gfg), move to it by using the following command.

cd gfg

Project Structure:

It will look like this.

Creating a Static Page

We can create static pages without using router in next.js

Approach:

• Create a new file inside the pages directory.
• Export a React component from that file.
• (Optional) Use getStaticProps if you want to fetch data at build time.
• To view the static page in production mode, build and start the project : npm run build and npm start to serve the static page.

Example: This example demonstrate creating static page on /gfg route.

Now we can easily access both pages in our app by running the app in the browser.

Step to Run Application: Run the application using the following command from the root directory of the project.

npm run dev

Output:

In this Example:

• pages/gfg.js creates a static route at /gfg, showing the message “Welcome to the GFG Page!”.
• pages/index.js represents the home page (/) and displays “Welcome to the Home Page!”.
• Because of Next.js file-based routing, these files automatically become routes without any extra configuration.

Creating Dynamic Pages

For this, we are going to create a new folder with the name route and inside this folder, we are going to create our dynamic file with the name [gfg].js.

We have 2 approaches for dynamic pages in next js mentioned below:

• with useRouter
• with usePathname

using useRouter from next/router:

create a dynamic page in Next.js, use useRouter from next/router to display the current route dynamically.

using usePathname from next/navigation:

Create a dynamic page in Next.js, use usePathname from next/navigation to display the current route dynamically.

Step to Run Application: Run the application using the following command from the root directory of the project.

npm run dev

Output:

In this Example:

• The file pages/route/[gfg].js defines a dynamic route where [gfg] acts as a placeholder (e.g., /route/123).
• In the first example, useRouter() is used to access the current path via router.asPath.
• In the second example, usePathname() (App Router API) is used to display the current route directly.
• Both approaches show the current dynamic route on the screen.