Next.js刷新页面出现Prop `href` did not match. Server报错如何解决？

• 静态导出的Next.js页面在首次hydrate阶段，router.query和useLanguageQuery()返回的queryLanguage初始值为undefined，你代码中直接在渲染层判断、拼接参数，会导致hydration不匹配报错，这也是刷新时触发报错的核心原因
• 下拉菜单内的所有内部跳转Link组件未携带lang查询参数，跳转后丢失语言参数，刷新时next-export-i18n无法读取到语言配置触发报错
• 你当前Link的href属性中query字段拼接为字符串的写法不符合Next.js规范，容易引发解析错误

1. 新增挂载状态避免hydration不匹配 #

在NavBar组件中新增isMounted状态，只有客户端完成挂载后再渲染依赖语言参数的内容，同时给language设置默认值：

import Link from "next/link"
import { useRouter} from "next/router"
import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n'
import { useEffect, useState } from 'react'

const NavBar = ({...props}) => {
    const router = useRouter()
    const { t } = useTranslation('navbar')
    var [queryLanguage] = useLanguageQuery()
    const [language, setLanguage] = useState('en') // 配置默认语言
    const [isMounted, setIsMounted] = useState(false) // 新增挂载标记

    useEffect(() => {
        setIsMounted(true)
        if(queryLanguage){
            setLanguage(queryLanguage.lang)
        }
    },[queryLanguage])

    // 挂载前返回空避免hydration不匹配
    if(!isMounted) return null
    // 后面的return逻辑保持不变

2. 统一给所有Link添加lang参数 #

修正所有Link组件的href写法，统一携带lang参数，不要手动拼接字符串：

首页跳转示例： #

<Link 
  href={{ 
    pathname: '/', 
    query: { lang: language }
  }}
>
  <a className="app-logo">
    <img src="/images/sa-logo.svg" alt="" width={150} height={75}  />
  </a> 
</Link>

下拉菜单跳转示例（所有子菜单都按这个格式修改）： #

<Link 
  href={{ 
    pathname: '/settings/locations', 
    query: { lang: language }
  }}
>
  <a className="dropdown-item">{t('locations')}</a>
</Link>

3. 修正语言切换区域的判断逻辑 #

把嵌套三元运算替换为更稳妥的可选链判断，避免初始值为空时报错：

<div className="form-check form-check-inline multi-language-switch">
  {queryLanguage?.lang === 'en' && <img src="/icons/tick.png" alt="" width="20" height="20" />}
  <LanguageSwitcher lang="en">English</LanguageSwitcher> |{' '}
</div>
<div className="form-check form-check-inline multi-language-switch">
  {queryLanguage?.lang === 'ar' && <img src="/icons/tick.png" alt="" width="20" height="20" />}
  <LanguageSwitcher lang="ar">Arabic</LanguageSwitcher>
</div>

4. 可选配置：添加默认语言回退 #

在next-export-i18n的配置文件中设置默认语言，避免lang参数完全丢失时直接抛出错误。

内容的提问来源于stack exchange，提问作者Deep Kakkar