在 NextJS 中使用自定义文档时如何获取 URL 参数

Question

I am using NextJS to product SSR pages, and these pages are language-specific.我正在使用 NextJS 来制作 SSR 页面，这些页面是特定于语言的。 I would like to set the lang property to declare the language of the text.我想设置 lang 属性来声明文本的语言。

So far I have:到目前为止，我有：

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

class MyDocument extends Document {
  render() {
    const { lanaguage } = Router.router.query
    return (
      <Html lang={language}>
        <Head />
        <body className="antialiased text-white text-base font-sans">
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

However, Router.router is always null when using a Custom Document ( _document.js ).但是， Router.router在使用自定义文档 ( _document.js ) 时始终为null 。 Is there another way to get the URL params/query when using a Custom Document?使用自定义文档时，还有其他方法可以获取 URL 参数/查询吗？

Answer 1

Since Next.js v10, if you're using the built-in i18n routing , Next will automatically set the lang attribute of the document.从 Next.js v10 开始，如果你使用内置的i18n 路由，Next 会自动设置文档的lang属性。

From the documentation:从文档中：

Since Next.js knows what language the user is visiting it will automatically add the lang attribute to the <html> tag.由于 Next.js 知道用户正在访问什么语言，它会自动将lang属性添加到<html>标签。

Next.js doesn't know about variants of a page so it's up to you to add the hreflang meta tags using next/head . Next.js 不知道页面的变体，因此您可以使用next/head添加hreflang元标记。 You can learn more about hreflang in the Google Webmasters documentation .您可以在Google 网站管理员文档中了解有关hreflang的更多信息。

Answer 2

I have been able to solve this by using:我已经能够通过使用来解决这个问题：

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

class MyDocument extends Document {
  render() {
    const { lanaguage } = this.props.__NEXT_DATA__.query
    return (
      <Html lang={lanaguage}>
        <Head />
        <body className="antialiased text-white text-base font-sans">
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

I am unsure if it is bad practice to use this.props.__NEXT_DATA__ .我不确定使用this.props.__NEXT_DATA__是否是不好的做法。 However, it does have the information I require.但是，它确实有我需要的信息。

在 NextJS 中使用自定义文档时如何获取 URL 参数

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-04-18 10:38:36

解决方案2
0 2020-07-14 14:34:40

在 NextJS 中使用自定义文档时如何获取 URL 参数

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-04-18 10:38:36

解决方案2 0 2020-07-14 14:34:40

解决方案1
1 已采纳 2021-04-18 10:38:36

解决方案2
0 2020-07-14 14:34:40