Question

我创建了一个空白的 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”方法中访问请求？

Answer 1

一旦我将 getServerSideProps 添加到 pages/index.js

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

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

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

1 个答案: