page.js in Next JS

Next JS is said to be the production-grade framework for React as it can handle both backend and frontend. One of the fundamental concepts is the ‘pages’. In this article, we will see about the pages and how we can dynamically manipulate them.

Prerequisites:

• JavaScript/TypeScript
• ReactJS Basics
• NextJS

In Next.js, a page is a React Component exported from a file in the pages directory. Pages are associated with a route 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:

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”.

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
}

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.

Enter the details to create your next app

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

npm run dev

Folder structure:

folder structure of our application

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”

Javascript

// 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:

Output of example 1 of page.js Next.js

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.

Javascript

// 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.

Output of example 2 of page.js Nextj.js

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.

Javascript

// 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.

Output of example 3 of page.js Next.js