静态生成的next.js页面中的动态HTML lang属性
我正在一个Next.js项目中开发一个多语言静态登陆页面。我的目标是拥有以下结构：
- /->英文主页
- /de->德文主页
- /it->意大利语主页
我正在以以下方式构建它：
pages/index.js
export default function Home() {
return <div>English Homepage</div>
}
页数/de.js
export default function Home() {
return <div>German page</div>
}
为了使网站可以访问，我想相应地设置html lang。
pages/_document.js
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang={???}>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
如何指定每页的语言？我尝试使用getinitialprops，但这迫使我的网站必须是SSR。
共有1个答案
使用getInitialProps确实是正确的。与普通页面中的getInitialProps会禁用自动静态优化不同，_document.js中的getInitialProps没有这种影响。
这是因为document只在服务器中呈现。Document的GetInitialProps函数不会在客户端转换期间调用，也不会在页面静态优化时调用。有关其技术细节的更多信息
这就是为什么您可以使用它将lang道具注入到页面中，并且仍然可以获得静态优化的好处。
// _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属性，还必须在_app.js中设置userouter钩子，以监视路由更改：
// _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之后，运行NPM run Build。您将从构建日志中看到“/”和“de”都是静态的。运行npm start并查看页面源代码，您将看到lang属性在HTML中设置正确。
-
我已经构建了一个静态的next.js站点，并希望从一个标记文档文件夹中生成一组静态页面（但这个问题的目的可能是任何东西--文本文件等）。假设我有这个文档文件夹： 发现完整URL slug的唯一方法是在构建时，在构建时可以递归文档文件夹并发现以下路径： 通常情况下,如果我知道diff子路由,我可以像这样添加文件： ...然而，我不知道这些子文件夹在代码时能够做到这一点，只有在构建时当我递归文档。 我
-
本文向大家介绍动态JSP页生成静态HTML的方法，包括了动态JSP页生成静态HTML的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了动态JSP页生成静态HTML的方法。分享给大家供大家参考。具体如下： 具体实现： 利用Filter的过滤功能把*.jsp过滤出来，判断是否存在对应的.html文件，如果不存在对应的.html文件，则将其内容读出写入指定的.html文件，再跳转到对应的.h
-
静态网页生成器工具 JS 网页生成器: Metalsmith harp JS 博客网站生成器: hubpress.io Hexo.io 网站生成器列表: staticsitegenerators.net www.staticgen.com
-
静态网页生成器 静态网页生成器, 是使用服务器端代码编写(如: ruby, php, python, nodeJS 等...), 用静态文本数据 + 模板, 生成从服务器发送到客户端的静态 HTML 文件. 综合学习: 静态网页生成器 [read]
-
本文向大家介绍ASP.NET静态页生成方法，包括了ASP.NET静态页生成方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了ASP.NET静态页生成方法。分享给大家供大家参考。具体实现方法如下： 一、问题： 由于业务需要，得把页面按照模板页生成静态页面，所以自己就琢磨了下，写些思路，以备日后需要的时候用。 二、解决方法： 静态页生成用到最多的就是匹配跟替换了，首先得读取模板页的html内
-
本文向大家介绍利用PHP生成静态html页面的原理，包括了利用PHP生成静态html页面的原理的使用技巧和注意事项，需要的朋友参考一下 前言 如果每次用户点击动态链接的时候都会对服务器发送数据查询的要求，对于一个访问量可能达百万千万级别的网站来说 这无疑是服务器一个大大的负担，所以把动态数据转换成静态html页面就成了节省人力物力的首选因为此前没有相应的经验，所以这篇文章和大家分享利用PHP生成静