我正在使用 next.js 并嘗試執行以下操作：
在 _app.js 中獲取與用戶資料相關的基本資料。資料包括標題（用于導航欄）和一些社交鏈接（用于頁腳）。
在構建時將該資料傳遞給其他組件，例如頁腳和導航欄（用于靜態站點生成）。
為此，我匯出了getStaticPropsfrom 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 中將一個簡單的字串作為道具傳遞也是未定義的。
export async function getStaticProps() {
return {
props: {
data: "something",
},
revalidate: 60,
};
}
知道我們不能在頁面以外的檔案中使用 getStaticProps 的事實，我必須僅在 _app.js 中使用它并將其傳遞給<Layout data={data}/>組件（如果不存在其他解決方案）。
我也可以在 index.js 頁面中使用 getStaticProps，但 Navbar 和 Footer 用于它的父組件，即 . 任何幫助表示贊賞。
uj5u.com熱心網友回復：
正如上面已經提到的 _app.js 不支持getStaticPropsor getServerSideProps，你只能getInitialProps在 _app.js 內部使用
export default function App({ Component, pageProps }) {
console.log(pageProps.data, "data");
return (
<>
<Layout data={pageProps.data}>
<Component {...pageProps} />
</Layout>
</>
);
}
App.getInitialProps = async () => {
let pageProps = {};
try {
let data = await getAppData(CLIENTID);
pageProps["data"] = data;
} catch (error) {}
return { pageProps };
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/468535.html
標籤：javascript 反应 下一个.js