👀 See Sanity in action: Watch product demo now →

How to Add Site Config Props to a _App.tsx file (Next.js)

6 replies
Last updated: Mar 30, 2021
Morning all. I’m trying to get some site config props into the _app.tsx file (nextjs v10), like this old example does: https://github.com/sanity-io/sanity-template-nextjs-landing-pages . The doc from sanity holds menu items and some seo stuff. Aim is to build the navigation menu and set some <head> stuff.

pageProps.config = client.fetch(siteConfigQuery).then((config) => {
        return config;
    });
Any tips on this please? If i console log config, it’s populated but when <Component {…pageProps} /> is received ,it’s empty.


    const siteConfigQuery = groq`
 *[_type == "site-config"][0] {
    ...,
    logo {asset->{extension, url}},
    mainNavigation[] -> {
      ...,
      "title": page->title
    },
    footerNavigation[] -> {
      ...,
      "title": page->title
    }
  }
  `;

export default function MyApp(props: AppProps) {
    const { Component, pageProps } = props;

    React.useEffect(() => {
        // Remove the server-side injected CSS.
        const jssStyles = document.querySelector('#jss-server-side');
        if (jssStyles) {
            jssStyles.parentElement?.removeChild(jssStyles);
        }
    }, []);

    const router = useRouter();

    // Initiate GTM
    useEffect(() => {
        const handleRouteChange = (url: string) => GTMPageView(url);

        router.events.on('routeChangeComplete', handleRouteChange);
        return () => {
            router.events.off('routeChangeComplete', handleRouteChange);
        };
    }, []);

    // Add site config from sanity
    pageProps.config = client.fetch(siteConfigQuery).then((config) => {
        return config;
    });
    return (<>
        {/* <CacheProvider value={cache}> */}
            <Head>
                <title>The Togetherworks</title>
                <meta
                    name="viewport"
                    content="initial-scale=1, width=device-width"
                />
            </Head>
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <GlobalStyles />
                <Component {...pageProps} />
            </ThemeProvider>
        {/* </CacheProvider> */}
        </>
    );
}
Mar 30, 2021, 9:14 AM
Your component return doesn’t wait for pageProps to populate and since you’re assigning to a prop field it doesn’t cause a rerender after it’s fetched. Prop changes only cause a rerender if it comes from the parent component.
You’d need to place it in something like a
useEffect
hook and state variable for it to update the component.
Mar 30, 2021, 10:05 AM
Thanks, 🤦. Of course. Do you know when you stare are something for hours and it’s obvious!!!!
Mar 30, 2021, 10:46 AM
Hahaha classic! 😂
Mar 30, 2021, 10:48 AM
It can be the most annoying thing, but you become blind to your own bug sometimes
Mar 30, 2021, 10:49 AM
totally. works now in 2 mins!!! Was looking for hours last night!
Mar 30, 2021, 10:50 AM
useEffect(() => {
        // Add site config from sanity
        const res = client.fetch(siteConfigQuery).then((config) => {
            setPropState((previous) => ({
            ...previous,
            config,
        }));
            return ;
        });
        
    }, []);

Mar 30, 2021, 10:50 AM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in