javascript - Wie bekomme ich URL-Parameter bei der Verwendung eines benutzerdefinierten Dokuments in NextJS

Ich verwende NextJS, um SSR-Seiten zu erstellen, und diese Seiten sind sprachspezifisch. Ich möchte die Eigenschaft lang festlegen, um die Sprache des Textes anzugeben.

Bisher habe ich:

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

Allerdings ist Router.router immer null, wenn ein benutzerdefiniertes Dokument (_document.js) verwendet wird. Gibt es eine andere Möglichkeit, die URL-Parameter/Abfragen zu erhalten, wenn ein benutzerdefiniertes Dokument verwendet wird?

Antwort #1

Ich konnte dies lösen, indem ich Folgendes verwendet habe:

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

Ich bin unsicher, ob es eine schlechte Praxis ist, this.props.__NEXT_DATA__ zu verwenden. Allerdings enthält es die Informationen, die ich benötige.

Antwort #2

Seit Next.js v10 wird, wenn Sie das integrierte i18n-Routing verwenden, Next automatisch das lang-Attribut des Dokuments setzen.

Aus der Dokumentation:

Da Next.js weiß, welche Sprache der Benutzer besucht, wird es automatisch das lang-Attribut zum <html>-Tag hinzufügen.

Next.js weiß nichts über Varianten einer Seite, daher liegt es an Ihnen, die hreflang-Meta-Tags mit next/head hinzuzufügen. Sie können mehr über hreflang in der Google-Webmaster-Dokumentation erfahren.