Question

我是Next.js的新手，我很难将数据从_document传递到_app。

我需要将路径名从_document.ts服务器端传递到_app.ts，然后传递到App组件中，以便我可以在Head元素服务器端注入自定义标签。每个页面都有特定的链接。

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

将在页面https://example.com/about-us上。

当前实现如下：

_document.tx中的

getInitialProps

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

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

当我console.log(pageProps)仅得到{ locale: 'en' }时，没有从_document.ts传递的pathname属性。

您知道我如何将道具从_document传递到_app

Answer 1

我遇到了这个问题，我使用了req对象将参数从_app发送到_document。根据NextJs的解析顺序，我们可以使用req（IncomingMessage）对象。服务器端的NextJs解析顺序：

app.getInitialProps
page.getInitialProps
document.getInitialProps
app.render
page.render
document.render

并在客户端：

app.getInitialProps
page.getInitialProps
app.render
page.render

示例（TS）：我从_app的getInitialProps函数向_document发送了一个名为direction的属性。

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

在_document的getInitialProps中：

const direction = ctx.req.direction;

如何在Next.js中将路径名从_document传递到_app

1 个答案: