javascript - 在 NextJS 使用自訂文件時如何獲取 URL 參數

我正在使用 NextJS 生成 SSR 頁面，這些頁面是特定語言的。我希望設置 lang 屬性來聲明文本的語言。

到目前為止我有：

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

然而，當使用自訂文件（_document.js）時，Router.router 總是 null。在使用自訂文件時，是否有其他方式可以取得 URL 參數/查詢？

答案＃1

我已經能夠通過使用以下方法解決這個問題：

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

我不確定使用 this.props.__NEXT_DATA__ 是否是不好的做法。然而，它確實擁有我所需的資訊。

答案＃2

自從 Next.js v10 起，如果您使用內建的 i18n 路由，Next 將自動設置文件的 lang 屬性。

摘自文件說明：

由於 Next.js 知道使用者正在訪問的語言，它會自動將 lang 屬性添加到 <html> 標籤中。

Next.js 不知道頁面的變體，因此由你來使用 next/head 添加 hreflang 元標籤。你可以在 Google 網站管理員文件中了解更多關於 hreflang 的資訊。