Next.js 13 App 目录中在 Layout 组件获取数据并传递给 Page 组件

Next.js 13 App 目录中在 Layout 获取数据并传给 Page 内容

在 Next.js 13 的 App 目录中，可以使用 getInitialProps 方法在 Layout 组件中获取数据，并将数据传递给 Page 组件。

步骤一：在 Layout 组件中获取数据

首先，在 Layout 组件中定义一个静态方法 getInitialProps，该方法可以使用 Next.js 提供的数据获取方法，例如 fetch 或 axios，获取所需数据并返回一个包含数据的对象。

import fetch from 'isomorphic-unfetch';

const Layout = (props) => (
  <div>
    <h1>My App</h1>
    {props.children}
  </div>
);

Layout.getInitialProps = async function() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { data };
};

export default Layout;

步骤二：在 Page 组件中获取数据

然后，在 Page 组件中，也可以使用 getInitialProps 方法来获取数据。在 getInitialProps 方法中，可以通过 Layout.getInitialProps 方法获取数据，并将其作为 props 传递给 Page 组件。

const Page = (props) => (
  <div>
    <h2>Page</h2>
    <p>{props.data}</p>
  </div>
);

Page.getInitialProps = async function() {
  const { data } = await Layout.getInitialProps();
  return { data };
};

export default Page;

解释

在上面的示例中，Layout 组件使用 getInitialProps 方法获取数据，并将数据作为 props 传递给 Page 组件。Page 组件也使用 getInitialProps 方法获取数据，并将数据作为 props 传递给自己的子组件。这样，就可以在 Layout 组件中获取数据，并将数据传递给 Page 组件和其他子组件。