无法在 _app.js 中使用 getStaticProps

Question

我正在使用 next.js 并尝试执行以下操作：

获取_app.js中用户数据相关的基础数据。数据包括标题（用于导航栏）和一些社交链接（用于页脚）。
在构建时将该数据传递给其他组件，例如页脚和导航栏（用于生成静态站点）。

为此，我从 app.js 文件中导出了 getStaticProps。但这似乎不起作用。这是我的 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 用于它的 parent 组件，即 .感谢任何帮助。

Answer 1

上面已经提到了 _app.js 不支持 getStaticProps 或 getServerSideProps ，你只能在 _app.js[=14= 中使用 getInitialProps ]


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 };
};

无法在 _app.js 中使用 getStaticProps

Unable to use getStaticProps in _app.js

javascript

reactjs

next.js