javascript - How To Set pageProps Property In Next.js Page? - Stack Overflow

admin管理员组

文章数量:1289542

Considering the code below in .../pages/_app.js, Component is the ponent exported from the current page.

So assuming you visit , the exported ponent in .../pages/about.js will be the value of the Component in .../pages/_app.js

Now when you console log the pageProps, an empty object is displayed.

My question is how do you set the pageProps value in .../pages/about.js for example.

.../pages/about.js

const About = () => {
 return <p>About Page</p>
}

export default About

.../pages/_app.js

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Considering the code below in .../pages/_app.js, Component is the ponent exported from the current page.

So assuming you visit https://yourdomain./about, the exported ponent in .../pages/about.js will be the value of the Component in .../pages/_app.js

Now when you console log the pageProps, an empty object is displayed.

My question is how do you set the pageProps value in .../pages/about.js for example.

.../pages/about.js

const About = () => {
 return <p>About Page</p>
}

export default About

.../pages/_app.js

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

• javascript
• reactjs
• next.js

Share Improve this question Follow asked Apr 6, 2021 at 15:50 claOnlineclaOnline 1,05533 gold badges1111 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

How To Set pageProps Property In Next.js Page

When you fetch the data using getStaticProps or getServerSideProps then you pass props ie may be the data from api call . Then you pass it via props to your Page Component. That props is represented as pageProps in _app.js.

In your code here you have not not used data fetching getStaticProps or getServerSideProps and passed return value from function as props. So You are getting empty Object as pageProps

const About = () => {
 return <p>About Page</p>
}

export default About

Belowtodos is passed as props to Page Component. When you do console.log(pageProps) in _app.js then you will get api call result as pageProps

export default function IndexPage(props) {
  return (
    <div>
      Todos list
      <ul>
        {props.todos.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps() {
  const todos = await fetch(
    "https://jsonplaceholder.typicode./todos"
  ).then((response) => response.json());

  return {
    props: { todos }
  };
}

Sandbox Link

本文标签： javascriptHow To Set pageProps Property In Nextjs PageStack Overflow