"_document.js" ctx query returns 2 objects
#15451
-
|
Am quite new to Next.js so please help with my understanding. I am in my We have a page called Hence, when I do my api call passing the |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
|
Hi @avaguerrero. For site wide data, using |
Beta Was this translation helpful? Give feedback.
-
|
Hi @jamesmosier thanks for the reply and it answered my question. I just have a follow up. The reason I need to do the api call is to inject a Google Tag Manager code (coming from our server) into the page's I was able to make this api call if I do it on Are you able to point me into the right direction on how to go about implementing this? Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
I'm not certain why it would get overwritten. Is Are you using This is originally what I was thinking: import Head from 'next/head'
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<script type="text/javascript">
// your fixed GTM code
</script>
<script
dangerouslySetInnerHTML={{
__html: `${customScriptFromServer}`
}}
/>
</Head>
<Component {...pageProps} />
</>
)
}
MyApp.getInitialProps = async (appContext) => {
const appProps = await App.getInitialProps(appContext);
const props = {
...appProps,
customScriptFromServer: 'some custom code'
}
return { ...props }
} |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, I realised I can use the In the same manner, I need to be able to inject a custom one (besides our fixed one) for the other GTM id. Is there a way to do that insertion via |
Beta Was this translation helpful? Give feedback.
-
|
You could try just putting it under the component: return (
<>
<Head>
<script type="text/javascript">
// your fixed GTM code
</script>
<script
dangerouslySetInnerHTML={{
__html: `${customScriptFromServer}`
}}
/>
</Head>
<Component {...pageProps} />
<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-12345"
height="0"
width="0"
style={{ display: "none", visibility: "hidden" }}
title="Google Tag Manager"
></iframe>
</noscript>
</>
)
} |
Beta Was this translation helpful? Give feedback.
Hi @avaguerrero. For site wide data, using
_app.jsis recommended._document'sgetInitialPropsis only executed on the server so utilizing_appwould be better to ensure you get the correct slug as well as allowing it to execute both on the server and client (depending on how you navigated to a page).