全新Next.js 14.2.22(TypeScript)项目未添加自定义代码却出现Hydration不匹配错误

我完全懂你的困惑——全新项目连一行自定义代码都没加就报错，确实太让人摸不着头脑了！针对你遇到的这个Hydration不匹配问题，给你几个实用的排查和解决方向：

1. 先排查浏览器缓存问题 #

有时候浏览器的旧缓存会和新生成的SSR内容冲突，导致 hydration 校验失败。你可以试试清除浏览器缓存（快捷键Ctrl+Shift+Delete），或者直接用隐私/无痕窗口打开项目，看看错误是否消失。

2. 检查Node.js版本兼容性 #

Next.js 14.2.x对Node.js版本有明确要求，官方推荐使用18.x或20.x的LTS版本。你可以在终端执行node -v查看当前版本，如果版本不在推荐范围内，建议用nvm之类的工具切换到兼容版本，然后重新安装依赖并启动项目。

3. 重新安装依赖 #

有时候create-next-app过程中可能因为网络波动导致依赖安装不完整，触发奇怪的错误。你可以按以下步骤操作：

• 删除项目根目录下的node_modules文件夹和package-lock.json（npm用户）/yarn.lock（yarn用户）
• 重新执行npm install（或对应包管理命令）
• 再次启动项目npm run dev

4. 统一客户端与服务器的Locale设置 #

错误提示里提到了locale不匹配的可能，虽然是全新项目，但如果你的系统locale和Next.js默认的服务器locale不一致，也可能触发这个问题。你可以在项目根目录的next.config.js里明确指定locale：

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en-US'], // 也可以改成你需要的locale，比如zh-CN
    defaultLocale: 'en-US',
  },
};

module.exports = nextConfig;

保存后重启项目试试。

5. 尝试切换Next.js版本 #

有可能是14.2.22这个版本存在某个小bug，你可以试试创建项目时用最新的稳定版：

npx create-next-app@latest --ts

或者降级到前一个版本14.2.21：

npx create-next-app@14.2.21 --ts

如果以上方法都不行，你可以检查一下项目app目录下的默认文件（比如page.tsx）是否有隐形的语法问题，不过全新项目出现这种情况的概率很低。

备注：内容来源于stack exchange，提问作者Alexandra15