Estoy cargando un montón de datos al cargar mi sitio a través de 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, }, }La declaración de devolución.
return ( <> <Head> <link rel="shortcut icon" href={getStrapiMedia(global.favicon.url)} /> </Head> <Layout> <Component {...pageProps} /> </Layout> </> )Mi pregunta ahora es cómo puedo acceder a los pageProbs en una página diferente. Por ejemplo, quiero acceder a los datos que cargué en _app.js en mi página index.js. Sin embargo, no tengo ni idea de cómo puedo hacer uso de ellos.
Salud.
Para cualquiera que se pregunte qué estaba buscando realmente, ya que podría ser útil:
La solución fue en realidad bastante simple.
Como se describe, tengo un archivo _app.js simple que se ve así:
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;El objetivo de mi pregunta era poder acceder a ...pageProbs en mi archivo index.js.
La solución después de leer los documentos fue bastante simple. Solo necesitaba definir los pageProbs como un parámetro en mi const IndexPage;
const IndexPage = (pageProps) => { global = pageProps.global; return ( <> <p>{global.id}</p> </> ) } export default IndexPage;simple como eso. Me siento un poco tonto ahora por preguntarlo. Todavía no estaba seguro de cómo formular mi pregunta, creo que ese fue el mayor problema