next.js 앱을 빌드하는 중이며 내 Prismic
API 서버 측에 탐색 콘텐츠를 요청 하고 결과를 가져 와서 내 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
페이지 ( 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;
이렇게하면 정적 생성이없는 페이지에서 자동 정적 최적화 가 비활성화됩니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다