你确实是正确的使用getInitialProps. Unlike getInitialProps在将禁用自动静态优化的普通页面中，getInitialProps in _document.js没有这样的效果。
这是因为Document仅在服务器中呈现。Document's getInitialProps在客户端转换期间或页面静态优化时不会调用函数。更多关于其技术细节 https://nextjs.org/docs/advanced-features/custom-document#caveats
这就是为什么你可以用它来注入langprop 到页面中，仍然可以获得静态优化的好处。
// _document.js
...
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
const { pathname } = ctx;
const lang = pathname.startsWith("/de") ? "de" : "en";
return { ...initialProps, lang };
}
...
为了拥有lang属性也在客户端转换期间更新，您还必须设置一个useRouter挂钩_app.js观察路线变化：
// _app.js
import React, { useEffect } from "react";
import { useRouter } from "next/router";
export default function MyApp({ Component, pageProps }) {
const { pathname } = useRouter();
const lang = pathname.startsWith("/de") ? "de" : "en";
useEffect(() => {
document.documentElement.lang = lang;
}, [lang]);
return <Component {...pageProps} />;
}
我为您创建了这个 CodeSandbox 作为演示。
将其下载到本地计算机并检查代码。后npm install, run npm run build。您将从构建日志中看到“/”和“de”都是静态的。跑步npm start然后查看页面源码，你会看到lang属性在 HTML 中设置正确。
