javascript - Cómo pasar el pathname de _document a _app en Next.js

Soy nuevo en Next.js y me está resultando difícil pasar los datos de _document a _app.

Necesito pasar el pathname del lado del servidor desde _document.ts a _app.ts y luego al componente App para poder inyectar etiquetas personalizadas en el elemento Head del lado del servidor. Cada página tendrá enlaces específicos.

ej <link rel="x-default" hrefLang="x-default" href="https://example.com/about-us">

estará en la página https://example.com/about-us.

La implementación actual se ve así:

getInitialProps en _document.tx

    const sheets = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
      });
    const { lang } = ctx.query;
    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      pathname: ctx.asPath,
      locale: getLocaleFromLanguage(lang as SupportedLanguages),
      styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
    };

parte de _app.ts

function App({ Component, pageProps }) {
  console.log(pageProps)
  let { locale } = pageProps;
  if (!locale) {
    locale = DEFAULT_LOCALE;
  }

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

cuando hago console.log(pageProps) solo obtengo por ejemplo { locale: 'en' }, no hay propiedad pathname pasada desde _document.ts.

¿Tienes idea de cómo puedo pasar props de _document a _app?

Respuesta #1

Tuve este problema y utilicé el objeto req para enviar mis parámetros desde _app a _document. Basado en el orden de resolución de NextJs podemos usar el objeto req (IncomingMessage). Orden de resolución de NextJs en el lado del servidor:

1. app.obtenerPropsIniciales
2. page.getInitialProps
3. document.getInitialProps
4. app.render
5. página.render
6. document.render

y del lado del cliente:

1. app.obtenerPropsIniciales
2. page.getInitialProps
3. app.render
4. página.render

Ejemplo (TS): Envié una propiedad llamada direction desde la función getInitialProps de _app a _document.

(ctx.req as any).direction = organization.direction;

Y en getInitialProps de _document:

const direction = ctx.req.direction;