Next.js自定义_document中如何获取URL参数动态设置html的lang属性

问题原因 #

_document 组件的渲染逻辑仅在页面静态导出阶段、或是用户直接访问页面的初始请求阶段执行一次，Next.js 客户端路由跳转时不会重新触发 _document 渲染，因此你当前的方案无法在切换语言时同步更新lang属性。

解决方案 #

保留原有_document中的逻辑保证静态导出的页面初始lang属性正确，同时在_app.js中添加客户端监听逻辑，路由变化时主动更新html标签的lang属性即可：

// _app.js 代码示例
import { useEffect } from 'react'
import { useRouter } from 'next/router'
// 替换为你自己的常量文件路径
import { DEFAULT_LANG } from './constants'

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    // 等待router初始化完成再读取query参数，避免取值异常
    if (!router.isReady) return
    const currentLang = router.query.lang || DEFAULT_LANG
    document.documentElement.lang = currentLang
  }, [router.isReady, router.query.lang])

  return <Component {...pageProps} />
}

export default MyApp

如果你使用的是类组件写法的_app，可以用componentDidUpdate生命周期方法实现相同逻辑。

该方案完全适配next export静态导出场景，不会依赖任何服务端能力。

内容的提问来源于stack exchange，提问作者Greg Panciera