0

私は初めて Nextjs を使用しています。

構造で構成される複数のレイアウトを作成しようとしています<Header><different-layouts-for-each><Footer>。

私が直面している問題は、getStaticProps または getServerProps がページ レベルでしか実行できないことです。

ナビゲーションに SEO が必要なので、前述の 2 つの方法のいずれかを使用して、すべてのページ ファイルでその小道具を取得する必要があると思います。

ここでの問題は、ページごとにメニュー プロパティを取得する必要があることですが、さまざまなテンプレートを使用すると、コンテンツを静的またはプリレンダリングして 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;

ここでの問題は、これが promise を返し、html が実際のメニュー html ではなく「読み込み中」と表示されることです。

これについて私を助けることができるヘルプや記事はありますか?

ありがとう。

4

0 に答える 0