Next.js 14+TypeScript项目VS Code提示metadata类型无效问题

可能的原因及修复步骤 #

• 更新相关依赖版本
  确保项目内next、@types/next、typescript为最新兼容版本，执行对应包管理命令更新：

  npm update next @types/next typescript
  

  yarn/pnpm用户替换为对应更新命令即可。

• 重置Next.js插件缓存

  1. 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）打开命令面板
  2. 输入并执行Next.js: Reset Plugin Cache
  3. 重启VS Code

• 检查tsconfig.json配置
  确保编译器配置符合App Router要求，关键配置片段示例：

  {
    "compilerOptions": {
      "target": "ES2022",
      "module": "ESNext",
      "moduleResolution": "bundler",
      "jsx": "preserve",
      "strict": true,
      "lib": ["ES2022", "DOM", "DOM.Iterable"]
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
  }
  

• 确认文件位置合规
  metadata仅允许在App Router的路由入口文件（如app/page.tsx、app/layout.tsx或各路由段的page.tsx/layout.tsx）中导出，若在普通组件文件内导出，移至正确路由文件即可。

• 重置Next.js插件

  1. 打开VS Code扩展面板，找到Next.js插件
  2. 先禁用插件，再重新启用
  3. 重启VS Code

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