0

我是第一次使用 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。

有什么帮助或文章可以帮助我吗？

谢谢。

4

0 回答 0