如何在NextJS 13项目子目录配置不同TypeScript baseUrl？

TypeScript本身不支持为不同目录设置独立的baseUrl，但你可以通过修改Next.js项目的tsconfig.json中的paths配置，模拟出原CRA的绝对导入行为，无需手动修改src目录内的任何导入语句。

具体操作步骤：

• 打开Next.js项目根目录下的tsconfig.json
• 在compilerOptions中添加paths配置，将原CRA中使用的绝对路径前缀映射到src目录下的对应子文件夹

示例配置如下：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    // 核心配置：映射原CRA的绝对导入路径
    "paths": {
      "routes/*": ["src/routes/*"],
      "components/*": ["src/components/*"],
      "utils/*": ["src/utils/*"],
      // 若有其他自定义目录，按此格式添加
      "*": ["src/*"] // 兜底配置，匹配所有未单独映射的绝对导入
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

注意事项 #

1. 映射顺序：具体的目录映射（如routes/*）要放在兜底的*映射之前，避免优先级冲突。
2. 客户端组件标识：在App Router中导入原CRA的App组件时，务必在文件顶部添加'use client'指令，确保组件在客户端环境运行。
3. 缓存清理：配置完成后，建议重启Next.js开发服务器，确保TypeScript解析器加载新的路径配置。

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