我是第一次使用Nextjs。
我正在尝试创建由<Header><different-layouts-for-each><Footer>
结构组成的多个布局。
我面临的问题是getStaticProps或getServerProps只能在页面级别运行。
由于导航中需要SEO,我想我应该使用上述两种方法之一在每个页面文件上获取它的道具。
这里的问题是我必须在每个页面上都获得菜单道具,但是要使用不同的模板,我必须在所有页面上重复我自己,以便静态或预先呈现内容并成为SEO可读。
在<MainNav>
组件上获得菜单道具将是理想的情况。
我尝试在组件上进行asnyc / await:
<Header>
组件
import Logo from "../components/header/logo";
import MainNav from "../components/header/mainnav.js";
function Header() {
return (
<div className="headwrapper container mx-auto py-8 flex items-center">
<Logo />
<MainNav/>
</div>
);
}
export default Header;
<MainNav>
组件
import Link from "next/link";
import { WpHeader } from "../../lib/wpapi";
import React, { useEffect, useState } from "react";
function MainNav() {
const [nav, setNav] = useState(0);
useEffect(() => {
const fetchData = async () => {
const wp = new WpHeader();
const call = await wp.getAxiosMenu();
console.log(call);
setNav(call);
};
fetchData();
}, []);
return (
<div className="navigation text-right w-3/4">
<ul className="main-navigation">
{nav
? nav.map(item => (
<li key={item.id} className="inline-block mx-2">
<Link href={item.path}>
<a>{item.label}</a>
</Link>
</li>
))
: "loading"}
</ul>
</div>
);
}
export default MainNav;
这里的问题是,这将返回一个承诺,并且html将显示“正在加载”,而不是实际的菜单html。
在这方面有什么帮助或文章可以帮助我吗?
谢谢。