I'm new to Next.js and i'm having a hard time with passing the data from _document to the _app.

I need to pass pathname server-side from _document.ts to _app.ts and then into App ponent so that i can inject custom tags in Head element server-side. Every page will have specific links.

eg <link rel="x-default" hrefLang="x-default" href=";>

will be on page .

Current implementation looks like this:

getInitialProps in _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()],
    };

part of _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();
  }, []);

when i console.log(pageProps) i only get eg { locale: 'en' }, there is no pathname property passed from _document.ts.

Do you have idea how can i pass props from _document to _app

I'm new to Next.js and i'm having a hard time with passing the data from _document to the _app.

I need to pass pathname server-side from _document.ts to _app.ts and then into App ponent so that i can inject custom tags in Head element server-side. Every page will have specific links.

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

will be on page https://example./about-us.

Current implementation looks like this:

getInitialProps in _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()],
    };

part of _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();
  }, []);

when i console.log(pageProps) i only get eg { locale: 'en' }, there is no pathname property passed from _document.ts.

Do you have idea how can i pass props from _document to _app

• javascript
• reactjs
• typescript
• next.js

• I have same issue like this. Did you solve it? – elyas.m Commented Jul 26, 2020 at 6:26
• @elyas.m nope, had to find totally different approach.. – Mare Commented Aug 17, 2020 at 12:04

1 Answer 1

I had this issue and I used the req object to send my params from the _app to the _document. Based on NextJs resolution order we can use the req (IningMessage) object. NextJs resolution order on the server-side :

1. app.getInitialProps
2. page.getInitialProps
3. document.getInitialProps
4. app.render
5. page.render
6. document.render

and on the client-side:

1. app.getInitialProps
2. page.getInitialProps
3. app.render
4. page.render

Example (TS): I Sent a property named direction from the _app's getInitialProps function to _document.

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

And in _document's getInitialProps :

const direction = ctx.req.direction;