How to Type a Page Component With Props in Next.js?

Next.js is a popular React framework used for building server-side rendered and static web applications. In many situations, we likely import the components wherever necessary in the project and pass the properties or props accordingly to the component. So, in this article, we will create a component that accepts the props and does something with the values to demonstrate how to type the page components with props in Next.js.

Prerequisites

• NodeJS NPM
• JS & ReactJS
• Next.JS

Steps to Create Next.JS application

Step 1: In vs Code Open the desired folder location where you want your application to exist. run the following command in the terminal to create next.js application.

npx create-next-app pagepropdemo
cd pagepropdemo

Step 2: create a mypgecomponent.js in project folder.

Folder Strucutre:

Creating a page Component and passing props

Step 1: Create a New Component

First, create a new React component that will serve as your page component. For example, you can create a file named mypagecomponent.js.

// mypagecomponent.js

import React from "react";

const MyPageComponent = ({ title, description }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
};

export default MyPageComponent;

Step 2: Pass Props to the Component

Next, you need to pass props to this component when you use it in your Next.js pages. For instance, in your page file (pages/index.js or any other page), you can import and use your mypagecomponent while passing the necessary props to it.

// pages/index.js

import React from "react";
import MyPageComponent from "./mypagecomponent";
const IndexPage = () => {
  const pageTitle = "Welcome to Geek For Geeks";
  const pageDescription = "Learn, Practice, and Excel";

  return (
    <div style={{ height: "100vh" }}>
      <MyPageComponent title={pageTitle} description={pageDescription} />
    </div>
  );
};

export default IndexPage;

Step 3: Access Props in the Component

Inside your MyPageComponent, you can access the passed props (title and description) directly, just like any other React component. This allows the component to be reusable with different sets of data.

Explanation:

• Creating the Component: We create a functional component MyPageComponent that accepts props (title and description).
• Passing Props: We import and use MyPageComponent in our IndexPage component, passing it the pageTitle and pageDescription props.
• Rendering Props: Inside MyPageComponent, we use the props to dynamically render the content.

Step 4: run the application using following command in terminal.

npm run dev

Step 5: Access the application using url http://localhost:3000/.

Conclusion

Creating page components with props in Next.js is straightforward. By following these steps, you can create reusable components that accept dynamic data through props. This enhances the modularity and maintainability of your Next.js applications. This approach helps in building scalable and maintainable web applications using Next.js, allowing you to efficiently manage and pass data between different components.