问题

NextJS 目前不支持_app.js.

解决方案

由于尚不支持上述功能，因此您需要创建一个可重用的getStaticProps函数并将其从所有页面导出。不幸的是，这确实意味着一些 WET 代码；但是，您可以通过创建一个包装页面并导出 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);