NextJS 13（13.0.7）默认安装的app目录方案无法运行

问题复现 #

使用命令创建NextJS 13实验性app目录项目：

npx create-next-app@latest --experimental-app
npm run dev

未修改任何代码，访问localhost:3000时触发上述错误，错误栈指向next/dist/client/image.js模块加载异常。

解决方案 #

1. 校验Node.js版本 #

NextJS 13要求Node.js版本≥16.8，建议使用18.x LTS稳定版。

• 检查当前版本：node -v
• 升级Node.js：通过nvm（类Unix系统）或nvm-windows（Windows系统）安装指定版本，或直接从官网下载安装包更新。

2. 重置依赖与缓存 #

依赖损坏或缓存冲突是常见诱因：

1. 删除现有依赖和锁定文件：

   # macOS/Linux
   rm -rf node_modules package-lock.json
   # Windows
   rmdir /s /q node_modules && del package-lock.json
   

2. 重新安装依赖：npm install
3. 清除NextJS构建缓存：

   # macOS/Linux
   rm -rf .next
   # Windows
   rmdir /s /q .next
   

4. 重启开发服务：npm run dev

3. 使用稳定版本创建项目 #

早期--experimental-app特性存在已知bug，13.4版本后app目录已转为稳定版，可直接创建：

npx create-next-app@latest

若需指定特定版本：

npx create-next-app@13.4.20 --experimental-app

4. 排查系统环境问题 #

• 确保项目路径无中文、空格或特殊字符（当前路径D:/Projects/Personal/leeconlin-website符合要求）
• Windows用户尝试以管理员身份运行终端，避免权限不足导致的文件加载异常

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