正文内容

问题背景

1. 语言切换按钮点击无反应

2. 导航栏链接点击后只出现垂直滚动条

3. 页面URL不更新

4. 没有实际的路由跳转

问题分析

1. 症状诊断

• 路由无法正确处理语言前缀（如 /en/products, /zh/products）

• 导航状态更新不会触发正确的页面切换

• URL参数处理不当导致路由状态不一致

2. 技术原理

1. 维护当前语言状态

2. 在路由切换时保持语言前缀

3. 确保客户端导航与服务器端渲染一致

4. 正确处理动态路由参数

解决方案

1. 创建共享导航hooks

2. 修改语言切换组件

3. 更新导航栏组件

技术深度解析

1. next-intl的路由工作原理

1. 路径规范化：
• 自动处理语言前缀
• 确保路由格式一致性
• 维护路由状态

2. 状态同步：
• 在客户端和服务器端之间同步语言设置
• 确保水合（hydration）过程中的状态一致
• 处理路由切换时的语言持久化

3. 中间件集成：
• 与next-intl的中间件协同工作
• 处理重定向和默认语言设置
• 管理路由约束和验证

2. 为什么本地开发环境正常？

1. 开发服务器行为：
• 开发环境使用更宽松的路由处理
• 热重载机制可能掩盖某些问题
• 状态管理更加灵活

2. 构建优化：
• 生产环境的代码经过更严格的优化
• 路由预渲染和缓存机制不同
• 客户端导航逻辑更严格

最佳实践建议

1. 路由导航规范：

2. 组件设计原则：
• 始终使用@/i18n导出的导航hooks
• 保持路由处理逻辑的一致性
• 考虑语言切换时的用户体验

3. 测试策略：
• 在开发环境和生产环境都进行充分测试
• 测试不同语言之间的切换
• 验证动态路由参数的处理
• 检查URL格式的正确性

4. 部署检查清单：
• 验证中间件配置
• 检查语言配置文件
• 测试所有导航场景
• 确认重定向行为

结论

参考资料

1. next-intl官方文档

2. Next.js国际化指南

3. Vercel部署最佳实践