Next.js中NEXT_LOCALE Cookie被忽略问题及多语言站点实现疑问

嘿，我来帮你拆解这两个问题，结合你用的Next.js 10.0.5版本来分析：

当然可以！子路径和域名只是Next.js官方推荐的两种方案，还有不少其他方式能实现多语言：

• Cookie存储偏好：就是你现在尝试的NEXT_LOCALE Cookie方案，只要配置得当就能生效
• LocalStorage存储：前端把用户选择的语言存在LocalStorage里，动态加载对应语言的内容，但要注意SSR场景下首屏渲染的一致性（毕竟LocalStorage只有客户端能访问）
• URL参数传递：比如用?lang=me这种参数，在getStaticProps或getServerSideProps里读取参数确定locale，但静态生成时可能需要预渲染所有语言版本，或者用增量静态再生来处理
• 绑定用户账户：如果有用户系统，把语言偏好存在数据库里，用户登录后从后端获取并应用

结合你用的Next.js 10.0.5版本，这个问题大概率和版本特性、配置细节有关：

1. 版本行为限制：Next.js的多语言功能在10.x版本还处于相对早期的阶段，当时NEXT_LOCALE Cookie的优先级可能并没有完全覆盖默认locale或者子路径。官方文档的说明可能是后续版本更新后的行为，10.0.5里可能遵循「子路径locale > 默认locale > Cookie」的优先级，这就解释了为什么只有访问localhost:3000/me时才会识别到"me"，根路径下会 fallback到默认的"en"。

2. Cookie设置是否正确：要确保Cookie的path设置为/，这样整个站点的所有路径都能读取到这个Cookie。如果设置Cookie时没指定path，可能默认只有当前路径能访问，根路径就读取不到。比如正确的设置代码应该是：

   document.cookie = 'NEXT_LOCALE=me; path=/; max-age=31536000'
   

3. 手动在getStaticProps里读取Cookie：既然版本本身的优先级不满足需求，你可以手动在getStaticProps里读取Cookie值来覆盖默认locale：

   export async function getStaticProps(context) {
     // 优先取Cookie里的locale，没有的话用系统默认的
     const targetLocale = context.req?.cookies.NEXT_LOCALE || context.locale;
     // 后续用targetLocale来获取对应语言的内容
     return {
       props: { locale: targetLocale },
     };
   }
   

4. 建议升级而非降级：Next.js在11+版本中对多语言功能做了不少优化，包括调整了NEXT_LOCALE Cookie的优先级，让它真正能覆盖默认locale。降级版本解决不了问题，反而升级到更稳定的版本（比如11.x或12.x）能更好地匹配官方文档的说明，同时修复已知的bug。

内容的提问来源于stack exchange，提问作者Mileta Dulovic