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

Posted 2023-03-06

【中文标题】如何在 Next.js 中将路径名从 _document 传递到 _app

【英文标题】：How to pass pathname from _document to _app in Next.js

【发布时间】：2020-10-23 22:42:15

【问题描述】：

我是 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 中获取初始属性

    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

【问题讨论】：

我也有同样的问题。你解决了吗？

@elyas.m 不，必须找到完全不同的方法..

【参考方案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;