Next.js项目导入外部模块TypeScript文件报错问题

问题根源 #

Next.js默认仅编译项目根目录（nextjs-project/）内的文件，外部../modules/auth/目录不在其编译流程中，导致webpack没有对应的loader处理该目录下的TypeScript/TSX文件，从而抛出解析错误。

解决方案 #

1. 配置Next.js转译外部模块 #

在nextjs-project/next.config.js中添加transpilePackages选项，指定需要转译的外部模块路径：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['../modules/auth'],
};

module.exports = nextConfig;

该配置会让Next.js自动将指定目录纳入webpack编译流程，使用内置的TypeScript/TSX loader处理文件，同时支持热模块替换——修改modules/auth内的代码后，Next.js会自动刷新页面，无需重新构建整个项目。

2. 确保TypeScript识别外部模块 #

在nextjs-project/tsconfig.json中，更新include数组，将外部模块的文件纳入TypeScript的类型检查范围：

{
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "../modules/auth/**/*.ts",
    "../modules/auth/**/*.tsx"
  ],
  // 其余配置保持不变
}

同时检查paths配置是否符合你的导入习惯，当前配置"my-auth-module": ["../modules/auth/*"]意味着你可以这样导入模块内的文件：

import AuthPage from 'my-auth-module/page';

验证效果 #

修改modules/auth内的任意ts/tsx文件，Next.js开发服务器会自动检测到变化并热更新页面，无需手动重启或重新构建项目。

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