我用的是next.js并try 执行以下操作:
-
在_app中获取与用户数据相关的基础数据.js.数据包括标题(导航栏)和一些社交链接(页脚).
-
在构建时将该数据传递给其他组件，如页脚和导航栏(用于静态站点生成).
为此，我从应用程序中导出了getStaticProps.js文件.但它似乎不起作用.这是我的应用程序.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,
};
}
还有布局.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，所以我必须在_应用程序中使用它.只使用js，并将其传递给<Layout data={data}/>个组件(如果不存在其他解决方案).
我可以在索引中使用getStaticProps.js页面，但导航栏和页脚用于它的父组件，即.感谢您的帮助.