无法基于Deno 2搭建NextJS项目，出现Hydration Failed错误

问题背景 #

按照Deno 2官方文档搭建Next.js项目，执行以下步骤后出现Hydration Failed错误：

deno run -A npm:create-next-app@latest
deno install
deno task dev

已尝试删除node_modules和.next目录，但问题未解决。

解决方案 #

• 锁定兼容的Next.js版本
  最新版Next.js可能存在与Deno 2的兼容性问题，建议指定稳定兼容版本初始化项目：

  deno run -A npm:create-next-app@14.2.4
  

  完成初始化后重新执行deno install和deno task dev。

• 检查Deno配置文件
  确保deno.json或deno.jsonc包含正确的Next.js任务配置，避免冲突项：

  {
    "tasks": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start"
    },
    "npm": {
      "packageManager": "npm"
    }
  }
  

• 临时关闭React Strict Mode排查
  在next.config.js中关闭Strict Mode，验证是否为严格模式下的双渲染导致不匹配：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: false,
  }
  
  module.exports = nextConfig
  

  若关闭后错误消失，需检查组件中是否存在Strict Mode敏感逻辑（如直接操作DOM、渲染时修改全局状态）并修复。

• 确保SSR内容一致性

  • 避免在服务端渲染阶段使用仅客户端可用的API（如window、document），需用typeof window !== 'undefined'判断或使用use client指令包裹客户端逻辑。
  • 动态生成的内容（如随机数、时间戳）需保证服务端与客户端输出一致，或移至客户端渲染。

• 清理Deno缓存
  除了node_modules和.next，还需清理Deno的全局缓存：

  deno cache --reload
  

  之后重新安装依赖并启动项目。

内容的提问来源于stack exchange，提问作者Vivek Kaushik