尝试获取数据来创建菜单，getStaticProps 返回未定义

我正在使用 Next.js 13 和 Strapi，我想做一个Menu组件使用getStaticProps.

我创建并添加了一个Layout组件中的_app.js. And a Menu里面的组件Layout.

我测试了里面的代码getStaticProps，并且它返回预期的 json 响应。

_app.js:

import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.css'
import Layout from './components/Layout'

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

布局.js

import Menu from './Menu'
import Footer from './Footer'

export default function Layout({ children}) {

  return (
    <>
      <Menu />
      <main>{children}</main>
      <Footer />
    </>
  )
}

Menu.js:

const Menu = async ({ dataMenu }) => {

  console.log(dataMenu);

  const renderMenuItems = (items) => {
    return items.map((item) => (
      <li key={item.id}>
        <Link href={item.attributes.url}>
          <a>{item.attributes.title}</a>
        </Link>
        {item.attributes.children.data.length > 0 && (
          <ul>{renderMenuItems(item.attributes.children.data)}</ul>
        )}
      </li>
    ));
  };

  return (
    <nav>
      <ul>{renderMenuItems(dataMenu)}</ul>
    </nav>
  );
};

export async function getStaticProps() {
  const urlParamsObject = {
    nested: "",
    populate: "*",
  }
  const queryString = qs.stringify(urlParamsObject);
  const { data } = await api.get(`/menus/1${queryString ? `?${queryString}` : ""}`);
  const dataMenu = data.data;

  return { props: { dataMenu } };
}

当我尝试console.log() the dataMenu我有数据undefined。有人可以告诉我为什么我会遇到这个问题吗？ 谢谢。

getStaticProps仅适用于内部页面组件pages文件夹。 这是什么doc https://nextjs.org/docs/basic-features/data-fetching/get-static-props#where-can-i-use-getstaticprops says:

getStaticProps只能从page. You cannot从非页面文件导出它，_app, _document, or _error.

你可以做什么来保持你当前的结构，Menu调用一次，并在服务器上渲染是获取菜单数据_app using getInitialProps并将其作为道具传递给Layout，然后到Menu，如下所示。

_app.js:

import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.css'
import Layout from './components/Layout'
import App from "next/app";

export default function MyApp({ Component, pageProps, dataMenu }) {
  return (
    <Layout dataMenu={dataMenu}>
      <Component {...pageProps} />
    </Layout>
  )
}

MyApp.getInitialProps = async (context) => {
  const urlParamsObject = {
    nested: "",
    populate: "*",
  }
  const queryString = qs.stringify(urlParamsObject);
  const { data } = await api.get(`/menus/1${queryString ? `?${queryString}` : ""}`);
  const dataMenu = data.data;
  const pageProps = await App.getInitialProps(context);

  return { ...pageProps, dataMenu: dataMenu};
};

布局.js：

import Menu from './Menu'
import Footer from './Footer'

export default function Layout({ children, dataMenu}) {

  return (
    <>
      <Menu dataMenu={dataMenu} />
      <main>{children}</main>
      <Footer />
    </>
  )
}

Menu.js:

const Menu = async ({ dataMenu }) => {

  console.log(dataMenu);

  const renderMenuItems = (items) => {
    return items.map((item) => (
      <li key={item.id}>
        <Link href={item.attributes.url}>
          <a>{item.attributes.title}</a>
        </Link>
        {item.attributes.children.data.length > 0 && (
          <ul>{renderMenuItems(item.attributes.children.data)}</ul>
        )}
      </li>
    ));
  };

  return (
    <nav>
      <ul>{renderMenuItems(dataMenu)}</ul>
    </nav>
  );
};

⚠️：确保从正确的位置导入所有内容。