Comment utiliser getStaticProps dans _app.js pour afficher les données récupérées de l'API dans chaque page de Next.js ?

Question

Pour être plus précis, j'affiche des données sur la barre de navigation à partir du point de terminaison de l'API. Et je veux utiliser getStaticProps pour obtenir ces données sur toutes les pages. Mais le problème est que je dois faire getStaticProps sur toutes les pages.

Peut-on faire quelque chose comme ça et obtenir des données sur toutes les pages en tant que 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;

Quelle pourrait être l'autre façon de procéder ? Existe-t-il un moyen de gérer un état global, afin qu'il soit utilisé par toutes les pages ? Je ne pense pas que nous puissions utiliser l'API Contexte pour fournir des données à toutes les pages également.

Answer 1

Problème

NextJS ne prend actuellement pas en charge les méthodes de cycle de vie dans le cadre de l'application _app.js .

Solution

Puisque l'option ci-dessus n'est pas encore prise en charge, vous devez créer un fichier réutilisable. getStaticProps et l'exporter à partir de toutes les pages . Malheureusement, cela implique un peu de code WET ; toutefois, vous pouvez réduire le nombre d'éléments passe-partout en créant un fichier de type HOC qui enveloppe la page et exporte également une fonction getStaticProps.

Alternatives

Vous pouvez utiliser getInitialProps au sein de la _app.js fichier. Malheureusement, cela désactive l'optimisation statique automatique sur l'ensemble de l'application .

Démo

Code

composants/Navigation

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;

composants/UsersList

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;

conteneurs/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;

pages/_app.js

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

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

export default App;

pages/à propos

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

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

export { getStaticProps };

export default withUsersList(AboutPage);

pages/aide

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

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

export { getStaticProps };

export default withUsersList(HelpPage);

pages/index

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

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

export { getStaticProps };

export default withUsersList(IndexPage);