NextJs _app 中的持久导航

问题描述

我正在构建 next.js 应用程序，我需要向我的 Prismic API 服务器端请求导航内容，获取结果，并将它们传递给我的 { {1}} 组件，以便我可以有一个持久的导航菜单。我不想在每个页面组件中都包含标题，也不想在每个页面中查询文档。有没有办法让我能够在我的 Header 中访问 getServerSideProps、getStaticProps 或 getinitialProps，以便我可以拥有持久的导航？这是我的 _app.js 组件，以及我的 Prismic 客户端和我的 _app 页面组件，因此您对我正在使用的代码有所了解。

index

prismic-client.ts

**_app.js**

import React from 'react';

import { AppLayout } from 'components/app-layout/AppLayout';
import { client } from 'lib/prismic';
import { GetServerSideProps } from 'next';
import { AppProps } from 'next/app';

interface WithNavProps extends AppProps {
  navigation: any;
}

const App = ({ Component,pageProps }: WithNavProps) => {
  return (
    <AppLayout>
      <Header />
      <Component {...pageProps} />
    </AppLayout>
  );
};

export default App;

index.tsx

import Prismic from 'prismic-javascript';

export const apiEndpoint = process.env.PRISMIC_API_ENDPOINT as string;
export const accesstoken = process.env.PRISMIC_ACCESS_TOKEN;

export const client = Prismic.client(apiEndpoint,{ accesstoken });

export const linkResolver = (doc: any) => {
  switch (doc.type) {
    case 'homepage':
      return `/`;

    case 'landing':
      return `/${doc.uid}`;

    case 'legal':
      return `/${doc.uid}`;

    case 'locator':
      return `/${doc.uid}`;

    case 'promos':
      return `/${doc.uid}`;

    case 'product':
      return `/products/${doc.uid}`;

    default:
      return `/`;
  }
};

提前致谢。

解决方法

您可以将 getInitialProps 添加到您的 custom _app page（不支持 getServerSideProps 和 getStaticProps）。

// _app.jsx

// Other imports..
import NextApp,{ AppProps } from 'next/app';

interface WithNavProps extends AppProps {
  navigation: any;
}

const App = ({ Component,pageProps,navigation }: WithNavProps) => {
  console.log(navigation); // Will print your nav contents
  return (
    <AppLayout>
      <Header />
      <Component {...pageProps} />
    </AppLayout>
  );
};

App.getInitialProps = async (appContext) => {
  const appProps = await NextApp.getInitialProps(appContext);
  const navigation = ["nav"]; // Add your own logic to retrieve the data here
  return { ...appProps,navigation };
};

export default App;

请记住，这样做会在没有静态生成的页面中禁用 Automatic Static Optimization。