如何在 _app.js 中使用 getStaticProps 在 Next.js 的每个页面中显示从 api 获取的数据

Question

具体来说，我在导航栏上显示来自 API 端点的数据。我想使用 getStaticProps 来获取所有页面上的这些数据。但问题是我需要在所有页面上执行 getStaticProps 。

我们可以做这样的事情并获取所有页面上的数据作为 props 吗？

//pages/_app.js
function MyApp({ Component, pageProps, navs }) {
  return (
    <>
      <Component {...pageProps} navs={navs} />
    </>
  );
}
export async function getStaticProps() {
  const res = await api.get("/api/v1/navs");
  const navs = res.data;
  return {
    props: {
      navs,
    },
    // revalidate: 60, // In seconds
  };
}

export default MyApp;

这样做的替代方法是什么？有没有办法管理全局状态，以便所有页面都使用它？我不认为我们也可以使用 Context API 向所有页面提供数据。

Answer 1

问题

NextJS 目前不支持_app.js.

解决方案

由于尚不支持上述功能，因此您需要创建一个可重用的getStaticProps函数并将其从所有页面导出。不幸的是，这确实意味着一些 WE 代码；但是，您可以通过创建一个封装页面并导出 getStaticProps 函数的HOC来减少一些样板文件。

备择方案

getInitialProps您可以在文件内使用_app.js。不幸的是，这会禁用整个应用程序的自动静态优化。

演示

代码

组件/导航

import * as React from "react";
import Link from "next/link";
import { nav, navItem } from "./Navigation.module.css";

const Navigation = () => (
  <div className={nav}>
    {[
      { title: "Home", url: "/" },
      { title: "About", url: "/about" },
      { title: "Help", url: "/help" }
    ].map(({ title, url }) => (
      <div className={navItem} key={title}>
        <Link href={url}>
          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
          <a>{title}</a>
        </Link>
      </div>
    ))}
  </div>
);

export default Navigation;

组件/用户列表

import * as React from "react";
import isEmpty from "lodash.isempty";
import { noUsers, title, userList, user } from "./UsersList.module.css";

const UsersList = ({ error, users, retrieved }) =>
  !retrieved ? (
    <p>Loading...</p>
  ) : !isEmpty(users) ? (
    <div className={userList}>
      <h1 className={title}>Statically Optimized User List</h1>
      {users.map(({ name }) => (
        <div className={user} key={name}>
          {name}
        </div>
      ))}
    </div>
  ) : (
    <div className={noUsers}>{error || "Failed to load users list"}</div>
  );

export default UsersList;

容器/withUsersList

import * as React from "react";
import axios from "axios";
import UsersList from "../../components/UsersList";

/**
 * A HOC that wraps a page and adds the UserList component to it.
 *
 * @function withUsersList
 * @param Component - a React component (page)
 * @returns {ReactElement}
 * @example withUsersList(Component)
 */
const withUsersList = (Component) => {
  const wrappedComponent = (props) => (
    <>
      <UsersList {...props} />
      <Component {...props} />
    </>
  );

  return wrappedComponent;
};

export const getStaticProps = async () => {
  try {
    const res = await axios.get("https://jsonplaceholder.typicode.com/users");

    return {
      props: {
        retrieved: true,
        users: res.data,
        error: ""
      }
    };
  } catch (error) {
    return {
      props: {
        retrieved: true,
        users: [],
        error: error.toString()
      }
    };
  }
};

export default withUsersList;

页面/_app.js

import * as React from "react";
import Navigation from "../components/Navigation";

const App = ({ Component, pageProps }) => (
  <>
    <Navigation />
    <Component {...pageProps} />
  </>
);

export default App;

页面/关于

import withUsersList, { getStaticProps } from "../containers/withUsersList";

const AboutPage = () => <div>About Us.</div>;

export { getStaticProps };

export default withUsersList(AboutPage);

页面/帮助

import withUsersList, { getStaticProps } from "../containers/withUsersList";

const HelpPage = () => <div>Find Help Here.</div>;

export { getStaticProps };

export default withUsersList(HelpPage);

页数/索引

import withUsersList, { getStaticProps } from "../containers/withUsersList";

const IndexPage = () => <div>Hello World.</div>;

export { getStaticProps };

export default withUsersList(IndexPage);