我正在使用 next.js 并尝试执行以下操作：
-
获取_app.js中与用户数据相关的基本数据。该数据包括标题（用于导航栏）和一些社交链接（用于页脚）。
-
在构建时将该数据传递给其他组件，例如页脚和导航栏（用于静态站点生成）。
为此我已经导出了getStaticProps来自 app.js 文件。但这似乎不起作用。这是我的 app.js。
import Layout from "../src/Layout";
import "../styles/globals.css";
import getAppData from "services/appData";
export default function App({ data, Component, pageProps }) {
console.log(data, "data"); // data is undefined here
return (
<>
<Layout data={data}>
<Component {...pageProps} />
</Layout>
</>
);
}
export async function getStaticProps() {
console.log("working on it dude"); // this message is not logged in console (terminal)
let data = await getAppData(CLIENTID);
console.log(data); // data is undefined here as well
return {
props: {
data: data,
},
revalidate: 60,
};
}
和 Layout.js
import React, { useState } from "react";
import Head from "next/head";
import Footer from "./Footer";
import Navbar from "./Navbar";
// Contexts
export const toggleMenu = React.createContext();
export default function Layout({ data, children }) {
// States
const [showNav, setShowNav] = useState(true);
const [showFooter, setShowFooter] = useState(true);
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Head>
<toggleMenu.Provider
value={{ showNav, showFooter, setShowFooter, setShowNav }}
>
{showNav ? <Navbar data={data.navbar} /> : null}
{children}
{showFooter ? <Footer data={data.footer} /> : null}
</toggleMenu.Provider>
</>
);
}
data即使我在 getStaticProps 中传递一个简单的字符串作为 props ，也是未定义的。
export async function getStaticProps() {
return {
props: {
data: "something",
},
revalidate: 60,
};
}
知道我们不能在页面以外的文件中使用 getStaticProps，我必须仅在 _app.js 中使用它并将其传递给<Layout data={data}/>组件（如果不存在其他解决方案）。
我也可以在 index.js 页面中使用 getStaticProps，但在其父组件中使用 Navbar 和 Footer，即 .任何帮助表示赞赏。
