NextJs _app 中的持久导航

Posted 2023-02-22

【中文标题】NextJs _app 中的持久导航

【英文标题】：Persistent navigation in a NextJs _app

【发布时间】：2021-04-13 14:02:02

【问题描述】：

我正在构建 Next.js 应用程序，我需要向我的 Prismic API 服务器端请求导航内容，获取结果，并将它们传递给我的 Header 组件，所以我可以有一个持久的导航菜单。我不想在每个页面组件中都包含标题，也不想在每个页面中都查询文档。

有没有一种方法可以让我在我的_app.js 中访问getServerSideProps、getStaticProps 或getInitialProps，这样我就可以获得持久的导航？

这是我的 _app 组件，以及我的 Prismic 客户端和我的 index 页面组件，所以您对我正在使用的代码有所了解。

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

prismic-client.ts

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

index.tsx

import React from 'react';

import  Header  from 'components/header/Header';
import  SEO  from 'components/seo/SEO';
import  SliceZone  from 'components/slice-zone/SliceZone';
import  client  from 'lib/prismic';
import  RichText  from 'prismic-reactjs';

const Index = ( document : any) => 
  const slices = document;
  if (!slices) return null;

  return (
    <>
      <SEO
        title=RichText.asText(document.page_title)
        description=document.meta_description
        banner=document.social_image.url
      />

      <SliceZone slices=slices />
    </>
  );
;

export const getServerSideProps = async () => 
  const options = 
    lang: 'en-us',
  ;
  const  data: document  = await client.getSingle('homepage', options);

  return 
    props: 
      document,
    ,
  ;
;

export default Index;

【参考方案1】：

您可以将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。

【讨论】：

太棒了，这对我有用。 getInitialProps 的工作方式是否与 getServerSideProps 类似，即它是否呈现在服务器端？

与getServerSideProps不同的是，它在初始加载时也会呈现服务器端，但在导航到不同的路由（客户端转换）时会在客户端上运行。

class="comcopy">跨度>

更多详情：github.com/vercel/next.js/discussions/11211.