page.js in Next JS

In Next.js, page.js is a file commonly used to define individual pages of your application. Each page is a React component that represents a route in your application. The page.js file is crucial for routing and rendering content in your Next.js project.In this article, we will see about the pages and how we can dynamically manipulate them.

Prerequisites:

• JavaScript/TypeScript
• ReactJS Basics
• NextJS

Page.js File In Next.js

The page.js file in Next.js is used to create and manage different pages within your application. Each file in the pages directory corresponds to a route, and page.js files are key to defining what gets rendered for each route.

Pages are associated with the routes based on their file name. For example, in development:

• pages/index.js is associated with the / route.
• pages/posts/first-post.js is associated with the /posts/first-post route.

To create the pages in Next.js, we are introduced to the "page.js" file by the new app router in Next.js. Basically, while using the app router, whenever you want to create a new page, you can create a folder and inside that folder, create a file named "page.js" which exports your page and Next.js will render that page whenever somebody hits that route. The page inside the app folder serves as the homepage of the application.

Syntax:

For static Page:

To create a new page, create a folder (which will tell the route for which the page would be rendered) and inside that folder export a function rendering your component as shown below:

export default function YourPage(){
    return (
         // your code...
    )
}

Whenever user hits the route of the folder, the user is presented with the UI in the "page.js".

For Dynamic Pages:

To create a dynamic page, you can create a folder with square brackets (for example: [user_id]) and then create a page.js file inside that folder. Then you can get the user_id from the props inside the page component as shown below:

export default function Page({params}){
    const user_id = params.user_id
    return // your component0
}

For page with search parameter:

To get the search parmas (/?name=123&age=5) from the user, you can also add another prop, in your component, named "searchParams" which would return a javascript object containing all the search params for that page.

export default function Page({searchParams}){
    const name = searchParams.name
    return // your component0
}

Steps to create the project

Step 1: Open your terminal and type the following command:

npx create-next-app@latest

Step 2: Enter the details about your project and continue further.

Step 3: Get inside the folder and run the npm script to start your application.

npm run dev

Folder structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.0"
},
"devDependencies": {
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.1.0"
}

Example 1: Let us create an about page for our application by creating a folder named "about" in our app directory and then exporting our component inside "page.js"

// inside src/app/about/page.js

export default function AboutPage() {
	return (
		<div className="p-5">
			<h1 className="text-2xl font-bold text-green-500">
            	GeeksforGeeks
			</h1>
			<h3 className="text-lg font-bold">
            	page.js Next.js
			</h3>
			<p>This is our About Page</p>
		</div>
	);
}

Output: Now, when you go to the route "localhost:3000/about", you can see the about page as shown below:

Example 2: In this example, let's create a dynamic page using the square brackets and name the folder as "[id]" and then print this id entered by the user in our page. For this, create this folder inside the "app" directory and then export the below component inside its "page.js" file.

// inside src/app/[id]/page.js

export default function IdPage({ params }) {
	return (
		<div className="p-5">
			<h1 className="text-2xl font-bold text-green-500">
            	GeeksforGeeks
            </h1>
			<h3 className="text-lg font-bold">
            	page.js Next.js
			</h3>
			<p>The id entered by user is: {params.id}</p>
		</div>
	);
}

Output: So, now if go to the route "localhost:3000/13", it will return "13" in "params.id" and will be shown on our page as shown in the below output.

Example 3: In this example, let us create a profile page by adding a new folder in our app directory named "profile" and inside it's "page.js" show the user name and user age retrieved through the search params.

// inside src/app/profile/page.js

export default function ProfilePage({ searchParams }) {
	return (
		<div className="p-5">
			<h1 className="text-2xl font-bold text-green-500">
            	GeeksforGeeks
            </h1>
			<h3 className="text-lg font-bold">
            	page.js Next.js
            </h3>
			<p>This is our Profile Page</p>
			<p className="mt-5">
				user name:
                <span className="font-bold">
                	{searchParams.name}
                </span>
			</p>
			<p>
				user age: 
                <span className="font-bold">
                	{searchParams.age}
                </span>
			</p>
		</div>
	);
}

Output: Now if we go to the route "localhost:3000/profile?name=Vikas&age=19", we can see the following output.

Summary

Next.js, page.js files define pages and routes in your application. Each file exports a React component that represents the content for a specific route. You can handle dynamic routes, static generation, server-side rendering, and API routes using the appropriate Next.js methods and conventions.

mycodenotein

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• Next.js