React Nextjs升级后@路径别名模块导入失效问题求助

步骤1：检查并修复tsconfig.json/jsconfig.json配置 #

路径别名失效最常见的原因是升级后配置文件被重置或格式不符合当前Next.js版本要求。确保你的配置文件包含以下核心内容：

{
  "compilerOptions": {
    "baseUrl": "./", // 以项目根目录为基准路径
    "paths": {
      "@/*": ["./*"] // 将@/*映射到根目录下的所有文件/文件夹
    },
    // 保留其他原有配置（如target、module、jsx等）
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
  "exclude": ["node_modules"]
}

如果你的api-lib文件夹在src目录下，可调整配置为：

"baseUrl": "./src",
"paths": {
  "@/*": ["./*"]
}

步骤2：适配不同Next.js版本的额外配置 #

• Next.js 13+（App Router）：仅需确保上述tsconfig.json配置正确，Next.js会自动读取路径别名，无需额外修改next.config.js。
• Next.js 12及更早版本：若上述配置仍不生效，可在next.config.js中手动添加webpack别名配置：

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

module.exports = nextConfig;

步骤3：清除缓存并重启开发服务器 #

升级后的缓存可能导致配置未生效，执行以下操作：

• 删除项目根目录下的.next文件夹
• 运行next dev --clear-cache启动开发服务器
• 若问题仍存在，可尝试删除node_modules并重新安装依赖

步骤4：排查冲突配置 #

若你之前使用了babel-plugin-module-resolver，升级后可能与Next.js内置的路径解析逻辑冲突：

• 移除babel配置中相关的别名设置
• 改用Next.js官方推荐的tsconfig.json/jsconfig.json路径配置

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