javascript - Cách lấy tham số URL khi sử dụng Custom Document trong NextJS

Tôi đang sử dụng NextJS để sản xuất các trang SSR, và các trang này là theo ngôn ngữ cụ thể. Tôi muốn đặt thuộc tính lang để khai báo ngôn ngữ của văn bản.

Cho đến nay tôi đã:

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

Tuy nhiên, Router.router luôn luôn là null khi sử dụng Custom Document (_document.js). Có cách nào khác để lấy các tham số/query của URL khi sử dụng Custom Document không?

Câu trả lời #1

Tôi đã có thể giải quyết việc này bằng cách sử dụng:

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

Tôi không chắc liệu việc sử dụng this.props.__NEXT_DATA__ có phải là thực hành không tốt hay không. Tuy nhiên, nó có chứa thông tin mà tôi cần.

Câu trả lời #2

Kể từ Next.js phiên bản 10, nếu bạn đang sử dụng định tuyến i18n tích hợp sẵn, Next sẽ tự động thiết lập thuộc tính lang của tài liệu.

Từ tài liệu:

Vì Next.js biết ngôn ngữ mà người dùng đang truy cập, nó sẽ tự động thêm thuộc tính lang vào thẻ <html>.

Next.js không biết về các biến thể của một trang, vì vậy bạn cần tự thêm các thẻ meta hreflang bằng cách sử dụng next/head. Bạn có thể tìm hiểu thêm về hreflang trong tài liệu của Google Webmasters.