I am loading a bunch of data at the loading of my site via getInitialProps.
MyApp.getInitialProps = async (appContext) => {
// Calls page's `getInitialProps` and fills `appProps.pageProps`
const appProps = await App.getInitialProps(appContext)
const globalLocale = await getGlobalData()
return {
...appProps,
pageProps: {
global: globalLocale,
},
}
The return statement.
return (
<>
<Head>
<link rel="shortcut icon" href={getStrapiMedia(global.favicon.url)} />
</Head>
<Layout>
<Component {...pageProps} />
</Layout>
</>
)
My question now is how I can access the pageProbs on a different page. For example I want to access the data I loaded in the _app.js on my index.js page. However I am absolutely clueless how I can make use of them.
Cheers.
For anyone wondering what I was actually looking for since it might be helpful:
The solution was actually quite simple.
As described I have a simple _app.js file looking like this:
const MyApp = ({ Component, pageProps }) => {
// Extract the data we need
const { global } = pageProps
if (global == null) {
return <p>404</p>
}
return (
<>
<Layout>
<Component {...pageProps} />
</Layout>
</>
)
}
MyApp.getInitialProps = async (appContext) => {
// Calls page's `getInitialProps` and fills `appProps.pageProps`
const appProps = await App.getInitialProps(appContext)
const globalData = await getGlobalData()
return {
...appProps,
pageProps: {
global: globalData,
},
}
}
export default MyApp;
The goal of my question was to be able to access the ...pageProbs in my index.js file.
The solution after reading the docs was quite simple. I just needed to define the pageProbs as a parameter in my const IndexPage;
const IndexPage = (pageProps) => {
global = pageProps.global;
return (
<>
<p>{global.id}</p>
</>
)
}
export default IndexPage;
simple as that. I do feel a little dumb now for asking it. Still was just not sure how to phrase my question, I think that was the biggest problem