NextJS中@/components别名无法找到组件问题求助

• 核对组件路径与paths配置的匹配性
  你的tsconfig里@/components/*指向根目录下的components/*，但从include配置里的app/components/UldamanLogo.js来看，你的组件可能实际存放在app/components目录下。如果是这种情况，需要修改paths配置：

  "paths": {
    "@/components/*": ["app/components/*"],
    "@styles/*": ["styles/*"],
    "@/config/*": ["config/*"]
  }
  

  先确认header组件的实际位置：如果是根目录components/header.tsx，原配置没问题；如果是app/components/header.tsx，就按上面修改paths。

• 修正组件名与文件名的大小写
  React组件要求组件名首字母大写，否则可能被识别为普通函数，建议调整组件文件名为Header.tsx，组件函数名也改成大写：

  import React from 'react';
  
  export default function Header() {
    return <div><header> hi </header></div>;
  }
  

• 清除缓存并重启服务

  1. 终止当前dev服务（Ctrl+C）
  2. 删除项目根目录下的.next文件夹
  3. 重新执行npm run dev

• 确认tsconfig的include范围
  你的include配置已经包含**/*.ts和**/*.tsx，会覆盖所有组件文件，这部分无需调整；若后续新增文件，确保在include覆盖范围内即可。

内容的提问来源于stack exchange，提问作者Bruno Soares Carvalho