I am using next.js and trying to do the following:
Fetch basic data related to user data in _app.js. The data includes a title (for the navbar) and some social links (for the footer).
Pass down that data to other components like Footer and Navbar at the build time (for static site generation).
For that I've exported the getStaticProps from app.js file. But it doesn't seem to work. Here is my 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,
};
}
And the Layout.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 is undefined even if I pass a simple string as props in getStaticProps.
export async function getStaticProps() {
return {
props: {
data: "something",
},
revalidate: 60,
};
}
Knowing the fact that we can't use getStaticProps in a file other than a page, I have to use it in _app.js only and pass it down to <Layout data={data}/> component (if no other solution exists).
I can use getStaticProps in index.js page as well but Navbar and Footer are used in it's parent component i.e, . Any help is appreciated.
As its already mentioned above _app.js doesn't support getStaticProps or getServerSideProps , you can only use getInitialProps inside _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 };
};