Next.js：自定义文档“_document”中“getInitialProps”方法中的访问请求（ctx.req）答案

【问题标题】：Next.js: Access request (ctx.req) in "getInitialProps" method in custom Document "_document"Next.js：自定义文档“_document”中“getInitialProps”方法中的访问请求（ctx.req）
【发布时间】：2021-04-23 17:15:51
【问题描述】：

我创建了一个空白的 Next.js 应用：

npx create-next-app

我添加了一个自定义文档https://nextjs.org/docs/advanced-features/custom-document

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);

    console.log("ctx: " + JSON.stringify(ctx, null, 2));

    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          Test
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

我想在 getInitialProps 中访问“ctx.req”，但从日志消息中可以看出“ctx”不包含“req”对象。这是日志消息：

ctx: {
  "pathname": "/",
  "query": {},
  "asPath": "/"
}

来自https://nextjs.org/docs/advanced-features/automatic-static-optimization 我了解到对于预渲染页面 ctx.req 将是未定义的：

“如果您有一个带有 getInitialProps 的自定义文档，请确保在假设页面是服务器端渲染之前检查是否定义了 ctx.req。对于预渲染的页面，ctx.req 将未定义。”

但另一方面，同一页面也说：

“如果页面没有阻塞数据要求，Next.js 会自动确定页面是静态的（可以预渲染）。此确定是由页面中缺少 getServerSideProps 和 getInitialProps 来做出的。”

据我了解，如果 getInitialProps 方法存在，则页面被视为不可预渲染，而是在服务器端渲染。

我错过了什么？如何访问“_document”中“getInitialProps”方法中的请求？

【问题讨论】：

标签： next.js

【解决方案1】：

只要我将 getServerSideProps 添加到 pages/index.js

export async function getServerSideProps() {
  const data = "myData";
  return { props: { data } };
}

Next.js 确实会在服务器端渲染页面，然后 ctx.req 在“_document”的“getInitialProps”方法中可用。

【讨论】：