我正在使用 NextJs 13 和 Strapi,我想使用 getStaticProps 制作一个 Menu.js 组件。
我在 _app.js 中创建了一个添加的 Layout 组件。 以及 Layout 中的 Menu 组件。
我测试了 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>
)
}
Layout.js
import Menu from './Menu'
import Footer from './Footer'
export default function Layout({ children}) {
return (
<>
<Menu />
<main>{children}</main>
<Footer />
</>
)
}
菜单.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() 我未定义的 dataMenu 数据时。
有人能告诉我为什么我期待这个问题吗? 谢谢。
只有页面可以导出getStaticProps、serverSideProps等not组件。