How to Add Site Config Props to a _App.tsx file (Next.js)
6 replies
Last updated: Mar 30, 2021
J
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.
Any tips on this please? If i console log config, it’s populated but when <Component {…pageProps} /> is received ,it’s empty.
pageProps.config = client.fetch(siteConfigQuery).then((config) => {
return config;
}); 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
M
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
You’d need to place it in something like a
useEffecthook and state variable for it to update the component.
Mar 30, 2021, 10:05 AM
J
Thanks, 🤦. Of course. Do you know when you stare are something for hours and it’s obvious!!!!
Mar 30, 2021, 10:46 AM
M
Hahaha classic! 😂
Mar 30, 2021, 10:48 AM
M
It can be the most annoying thing, but you become blind to your own bug sometimes
Mar 30, 2021, 10:49 AM
J
totally. works now in 2 mins!!! Was looking for hours last night!
Mar 30, 2021, 10:50 AM
J
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– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.