如何解决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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。