Next.js 15中@路径别名无法解析模块问题求助

可能的问题点及对应解决办法 #

1. jsconfig.json 文件位置错误 #

jsconfig.json 必须放在项目根目录（与src文件夹同级），而非src目录内部。如果配置文件放在src里，"./src/*"会被解析为src/src/*，自然找不到components目录。

确认位置后，保持配置内容不变：

{"compilerOptions": {"paths": {"@/*": ["./src/*"]}},"include": ["next-env.d.ts", "**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "src/**/*"]}

2. 组件文件缺少扩展名或入口文件 #

项目结构中components/landingPage下的nav、about等是文件夹，但导入时未指定具体文件名。Next.js不会自动识别文件夹入口，需二选一处理：

• 如果组件文件是about/about.jsx，导入路径需写完整：

  import About from "@/components/landingPage/about/about.jsx";
  

• 在about文件夹内新建index.jsx，将组件内容导出，原导入路径即可生效。

3. Next.js 15 需同步配置 webpack 别名 #

仅靠jsconfig.json可能无法让构建工具识别别名，需在next.config.js中手动配置webpack规则：

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, './src'),
    };
    return config;
  },
};

module.exports = nextConfig;

4. 开发服务器或编辑器缓存未清除 #

修改配置后，必须重启Next.js开发服务器，同时可清除编辑器缓存（比如VS Code按Ctrl+Shift+P执行"Reload Window"），确保别名配置被正确加载。

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