NextJS - How to Retrieve Values for Meta Tags
14 replies
Last updated: Sep 8, 2022
M
Hello! I'm setting up a NextJS app with Sanity, and am wondering about how to retrieve values for the
<meta>tags. It looks like Next only allows
getStaticPropsor
getServerSidePropsto be run on individual pages, not the
_appor
_documentpages. Will I need to run the same query and apply meta tags on every page? Seems like there must be a single place to grab this data and include it on every page 🤔
Sep 6, 2022, 5:22 PM
Z
if your meta tags are different for individual pages, you’ll want to use something like Next SEO — this will resolve merge differences in your
<head>
Sep 6, 2022, 5:24 PM
Z
if you just need one set of meta tags, doing this in the _app or _document should be fine 🙂
Sep 6, 2022, 5:24 PM
M
But can I query Sanity from _app or _document? It seems like I can only do that client-side (no getStaticProps or getServerSideProps), and I was hoping to include these meta tags in the server-rendered page to ensure they're visible to search engines
Sep 6, 2022, 5:26 PM
K
Will I need to run the same query and apply meta tags on every page?Yes, if you want to benefit from static builds.
Sep 6, 2022, 5:32 PM
M
Thanks, fortunately I just have a few pages on this site so it shouldn't be too bad. Just making sure I'm not missing anything obvious for doing it in a single location
Sep 6, 2022, 5:34 PM
Z
you can render server side from
https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
_app— using
getInitialPropsrather than
getStaticPropsbut that’s how I render my homepages for all the websites I build, fetching Sanity data.
https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
For the initial page load,getInitialPropswill run on the server only.getInitialPropswill then run on the client when navigating to a different route via thenext/linkcomponent or by usingnext/router. However, ifgetInitialPropsis used in a custom_app.js, and the page being navigated to implementsgetServerSideProps, thengetInitialPropswill run on the server.
Sep 6, 2022, 7:29 PM
K
It disables static optimization though. 😔
Sep 6, 2022, 7:32 PM
Z
but only for pages without
getStaticPropsright?
Sep 6, 2022, 7:34 PM
Z
(as far as I understand it anyway)
Sep 6, 2022, 7:35 PM
K
That's not how I understand it.
Sep 6, 2022, 7:36 PM
Z
the documentation says
Adding a custombut they don’t go into details about it. I would love to know more from a nextjs developergetInitialPropsin yourAppwill disable Automatic Static Optimization in pages without Static Generation .
Sep 6, 2022, 7:43 PM
K
I am pretty sure if you enable
getInitialPropson the
_app.jslevel, you lose static optimization entirely. That makes only sense since it‘s a SSR function. If it’s on, then all pages need to use it, so it’s SSR only. At least that’s how I get it.
Sep 7, 2022, 6:40 AM
S
Hello wonderful people 👀
I was wondering that too at one point and I think giving up automatic static optimisation for meta in
create a
What most people forget is that you can pass props down to components but you can also “bubble them up”, which is strangely easy in React/NextJS:
As you can see you can access your queried data, from the
I was wondering that too at one point and I think giving up automatic static optimisation for meta in
_appis nor worth it.What I instead do is:
create a
Layoutcomponent, which is the meta wrapper on every site and add a specific
Headand
titlewithin that Layout (sometimes I want to change those through some extra 💅 and this is why I have it outside of Layout)
//index.jsx where I query for siteSettings
export default function Index({ data, preview, setModal, modal }) {
const { image, title, description, siteSettings } = data?.page;
return(
<Layout preview={preview} description={description} image={image} siteSettings={siteSettings}>
<Head>
<title>MY AWESOME SITE - {title}</title>
</Head>
{/* ALL MY COMPONENTS */}
</Layout>
)
}
...
// in my query
...,
'siteSettings': *[_type == 'siteSettings'][0]
...,siteSettingsare the overall settings for the whole site, which means, that there is some routing included, which kind of menu items the site should have etc. but also the default
metainformation.
What most people forget is that you can pass props down to components but you can also “bubble them up”, which is strangely easy in React/NextJS:
// _App.js
function MyApp({ Component, pageProps }) { ...
return (
<>
<Head>
<meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=yes, user-scalable=yes, viewport-fit=cover' />
</Head>
{/* <Header /> */}
<MenuBar siteSettings={pageProps.data.page.siteSettings} />
<Modals modal={modal} setModal={setModal} siteSettings={pageProps.data.page.siteSettings} />
<Component {...pageProps} modal={modal} setModal={setModal} />
</>
)
}pageProps, if you set it up that way 🙂
Sep 8, 2022, 2:58 PM
S
BUT: there are new things coming out in Next JS soon :party_parrot:
https://nextjs.org/blog/layouts-rfc 🎉
https://nextjs.org/blog/layouts-rfc 🎉
Sep 8, 2022, 3:00 PM
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.