He estado configurando Next.js con Twin.macro, y para esto tuve que cambiar la página _document.js en Nextjs. Ahora estoy tratando de configurar Google Analytics, y estoy siguiendo este tutorial y me dice que modifique mi página _document.js para que se vea así:
import Document, { Html, Head, Main, NextScript } from 'next/document' export default class MyDocument extends Document { render() { return ( <Html> <Head> {/* Global Site Tag (gtag.js) - Google Analytics */} <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`} /> <script dangerouslySetInnerHTML={{ __html: ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', { page_path: window.location.pathname, }); `, }} /> </Head> <body> <Main /> <NextScript /> </body> </Html> ) } } Sin embargo, mi _document.js se ve totalmente diferente, debido a la configuración con twin.macro y componentes con estilo ( que puede encontrar aquí ) y ahora estoy un poco perdido sobre qué cambiar.
import React from 'react' import Document from 'next/document' import { ServerStyleSheet } from 'styled-components' export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet() const originalRenderPage = ctx.renderPage try { ctx.renderPage = () => originalRenderPage({ enhanceApp: App => props => sheet.collectStyles(<App {...props} />), }) const initialProps = await Document.getInitialProps(ctx) return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), } } finally { sheet.seal() } } }Estoy un poco perdido aquí, ya que realmente no entiendo qué se devuelve (parece devolver un objeto aquí, mientras que en el ejemplo anterior devuelve algo de JSX) y dónde y cómo se supone que debo integrar Google Analytics aquí ahora. ! ¡Muchas gracias por tu ayuda!