Estoy usando next.js y tratando de hacer lo siguiente:
Obtenga datos básicos relacionados con los datos del usuario en _app.js. Los datos incluyen un título (para la barra de navegación) y algunos enlaces sociales (para el pie de página).
Pase esos datos a otros componentes como el pie de página y la barra de navegación en el momento de la creación (para la generación de sitios estáticos).
Para eso, getStaticProps del archivo app.js. Pero no parece funcionar. Aquí está mi app.js.
import Layout from "../src/Layout"; import "../styles/globals.css"; import getAppData from "services/appData"; export default function App({ data, Component, pageProps }) { console.log(data, "data"); // data is undefined here return ( <> <Layout data={data}> <Component {...pageProps} /> </Layout> </> ); } export async function getStaticProps() { console.log("working on it dude"); // this message is not logged in console (terminal) let data = await getAppData(CLIENTID); console.log(data); // data is undefined here as well return { props: { data: data, }, revalidate: 60, }; }Y el diseño.js
import React, { useState } from "react"; import Head from "next/head"; import Footer from "./Footer"; import Navbar from "./Navbar"; // Contexts export const toggleMenu = React.createContext(); export default function Layout({ data, children }) { // States const [showNav, setShowNav] = useState(true); const [showFooter, setShowFooter] = useState(true); return ( <> <Head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </Head> <toggleMenu.Provider value={{ showNav, showFooter, setShowFooter, setShowNav }} > {showNav ? <Navbar data={data.navbar} /> : null} {children} {showFooter ? <Footer data={data.footer} /> : null} </toggleMenu.Provider> </> ); } data no están definidos incluso si paso una cadena simple como accesorios en getStaticProps.
export async function getStaticProps() { return { props: { data: "something", }, revalidate: 60, }; } Sabiendo el hecho de que no podemos usar getStaticProps en un archivo que no sea una página, tengo que usarlo solo en _app.js y pasarlo al componente <Layout data={data}/> (si no existe otra solución) .
También puedo usar getStaticProps en la página index.js, pero la barra de navegación y el pie de página se usan en su componente principal, es decir, . Cualquier ayuda es apreciada.
Como ya se mencionó anteriormente, _app.js no es compatible getStaticProps o getServerSideProps , solo puede usar getInitialProps dentro de _app.js
export default function App({ Component, pageProps }) { console.log(pageProps.data, "data"); return ( <> <Layout data={pageProps.data}> <Component {...pageProps} /> </Layout> </> ); } App.getInitialProps = async () => { let pageProps = {}; try { let data = await getAppData(CLIENTID); pageProps["data"] = data; } catch (error) {} return { pageProps }; };