javascript - NextJS'te Özel Doküman kullanırken URL parametreleri nasıl alınır

NextJS kullanarak SSR sayfaları üretiyorum ve bu sayfalar dil özelidir. Metnin dilini belirtmek için lang özelliğini ayarlamak istiyorum.

Şu ana kadar sahip olduğum:

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

Ancak, bir Özel Doküman (_document.js) kullanırken Router.router her zaman null olur. Özel bir Doküman kullanırken URL parametrelerini/sorgusunu almak için başka bir yol var mı?

Cevap #1

Bunu kullanarak çözebildim:

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__ kullanmanın kötü bir uygulama olup olmadığından emin değilim. Ancak, ihtiyacım olan bilgiye sahip.

Cevap #2

Next.js v10'dan itibaren, yerleşik i18n yönlendirmesini kullanıyorsanız, Next belgeyi otomatik olarak lang özniteliğine ayarlayacaktır.

Belgelerden:

Next.js, kullanıcının hangi dili ziyaret ettiğini bildiğinden, <html> etiketine otomatik olarak lang özniteliğini ekleyecektir.

Next.js bir sayfanın varyantlarını bilmez, bu yüzden next/head kullanarak hreflang meta etiketlerini eklemek size kalmıştır. hreflang hakkında daha fazla bilgiyi Google Web Yöneticisi belgelerinde öğrenebilirsiniz.