NextJS 13路径别名配置问题：组件跨目录与同目录导入失败

问题分析 #

你当前tsconfig.json的paths配置存在两个核心问题：

• 匹配规则@_*和你期望使用的@components前缀不匹配
• 映射路径../*指向项目根目录的上级目录，完全不符合你的实际目录结构

正确配置步骤 #

1. 确认baseUrl设置 #

首先确保tsconfig.json中已配置baseUrl（Next.js 13项目通常设为项目根目录）：

{
  "compilerOptions": {
    "baseUrl": ".",
    // 其他原有配置...
    "paths": {
      // 路径映射写在此处
    }
  }
}

2. 配置paths映射 #

添加针对@components的路径映射，直接指向app/_components目录：

{
  "compilerOptions": {
    "baseUrl": ".",
    // 其他原有配置...
    "paths": {
      "@components/*": ["app/_components/*"]
    }
  }
}

统一导入方式 #

配置完成后，不管是在(routes)/contact/page.tsx还是app/_components/header.tsx中，都可以使用相同的导入语句：

import Login from '@components/login';

注意：导入路径要和实际文件名大小写一致（示例中文件为login.tsx），避免因大小写不匹配导致的模块找不到问题

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