NextJs _app의 지속적인 탐색

제시 윈튼

next.js 앱을 빌드하는 중이며 내 PrismicAPI 서버 측에 탐색 콘텐츠를 요청 하고 결과를 가져 와서 내 Header구성 요소에 전달 하여 영구적 인 탐색을 할 수 있도록해야합니다. 메뉴. 모든 페이지 구성 요소에 헤더를 포함하고 싶지 않으며 모든 페이지에서 문서를 쿼리 할 필요도 없습니다. I가 액세스 할 수있어하는 방법이 있나요 getServerSideProps, getStaticProps또는 getInitialProps내 안에 _app.js그래서 나는 그 지속적인 탐색을 가질 수? 여기에 내 _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;

미리 감사드립니다.

줄리오 말 베스

당신은 추가 할 수 있습니다 getInitialProps사용자에 사용자 정의 _app페이지 ( getServerSidePropsgetStaticProps지원되지 않음).

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

이렇게하면 정적 생성이없는 페이지에서 자동 정적 최적화 가 비활성화됩니다 .

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

NextJS 탐색 문제

분류에서Dev

헤더 구성 요소의 상태를 잃지 않고 nextjs에서 탐색하는 방법

분류에서Dev

qtextStream의 탐색 라인

분류에서Dev

QML의 페이지 탐색

분류에서Dev

OData-비 탐색 속성의 탐색 속성에 대한 $ expand

분류에서Dev

기본 키로서의 탐색 속성

분류에서Dev

모델의 과적 합 탐색

분류에서Dev

Angular 2의 매직 라인 탐색?

분류에서Dev

탐색 속성의 열 이름을 명시 적으로 선언

분류에서Dev

NextJS의 정적 페이지 매김

분류에서Dev

WPF Modern UI의 페이지 탐색

분류에서Dev

탐색에서 ul의 위치 지정

분류에서Dev

Phonejs의 사용자 지정 탐색

분류에서Dev

Google지도 활동의 탐색 창

분류에서Dev

Xamarin Forms의 페이지 간 탐색

분류에서Dev

NextJs의 이미지 용 Blob

분류에서Dev

EF Core 3 : 탐색 속성의 지원 필드 구성

분류에서Dev

C # WPF의 지속적인 단추 색상 변경

분류에서Dev

탭 페이지 및 하단 탐색의 정적 헤더?

분류에서Dev

프로세스의 모든 물리적 페이지 탐색

분류에서Dev

탐색 모음의 색상을 독립적으로 변경

분류에서Dev

Breeze 탐색 속성

분류에서Dev

내 작업 메서드 내 탐색 속성의 특정 속성 만 바인딩

분류에서Dev

탐색 창의 LinearLayout

분류에서Dev

의도로 탐색

분류에서Dev

Catel의 창 탐색

분류에서Dev

탐색 속성의 "개체 참조가 개체의 인스턴스로 설정되지 않음"

분류에서Dev

낮은 Z- 색인의 높은 Z- 색인-특수 탐색 메뉴

분류에서Dev

탐색 속성이있는 엔터티에 대한 C #의 ODATA 게시 요청, 새 탐색 속성 생성