Next.js：自定义文档“_document”中“getInitialProps”方法中的访问请求（ctx.req）
Posted
技术标签:
【中文标题】Next.js：自定义文档“_document”中“getInitialProps”方法中的访问请求（ctx.req）【英文标题】：Next.js: Access request (ctx.req) in "getInitialProps" method in custom Document "_document" 【发布时间】：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”方法中的请求？
【问题讨论】：
【参考方案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）的主要内容，如果未能解决你的问题，请参考以下文章
Next.js文档自定义AppDocument，getInitialProps翻译
在 Next.js 中，为啥要静态渲染？ _document.js 包括 getInitialProps
在next.js中使用styled-component以及全局主题切换