javascript - Next.js页面如何设置pageProps属性？

Question

考虑到 .../pages/_app.js 中的代码，Component 是从当前页面导出的组件。

所以假设您访问 https://yourdomain.com/about , .../pages/about.js 中的导出组件将是 .../中的 Component 的值页面/_app.js

现在，当您在控制台记录 pageProps 时，会显示一个空对象。

我的问题是如何在 .../pages/about.js 中设置 pageProps 值。

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

Answer 1

How To Set pageProps Property In Next.js Page

当您使用 getStaticProps 或 getServerSideProps 获取数据时，您将传递 props 即可能是来自 api 调用的数据。然后通过 props 将其传递给您的 Page Component。该 Prop 在 _app.js 中表示为 pageProps。

在此处的代码中，您没有使用数据获取 getStaticProps 或 getServerSideProps 并将函数的返回值作为 props 传递。所以你得到空对象作为 pageProps

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

export default About

Belowtodos 作为 props 传递给 Page Component。当您在 _app.js 中执行 console.log(pageProps) 时，您将获得 api 调用结果作为 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.com/todos"
  ).then((response) => response.json());

  return {
    props: { todos }
  };
}

Sandbox Link