Persistent navigation in a NextJs _app
I'm in the middle of building a Next.js app, and I need to make a request for the navigation content to my Prismic API server-side, get the results, and pass them to my Header
component so that I can have a persistent navigation menu. I don't want to include the header in every page component, nor do I want to have to query the document in every page.
Is there a way that I'm able to access getServerSideProps
, getStaticProps
, or getInitialProps
within my _app.js
so that I can have that persistent nav?
Here is my _app
component, as well as my Prismic client, and my index
page component, so you have an idea of the code I'm working with.
_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;
You can add getInitialProps
to your custom _app
page (getServerSideProps
and getStaticProps
are not supported).
// _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;
Keep in mind that doing so will disable Automatic Static Optimization in pages without Static Generation.