Next.js monorepo导入外部共享TS代码编译失败如何解决

Next.js 默认的 TypeScript/TSX 转译规则只会处理自身项目目录（即next-app文件夹）内的代码，你放在Next.js项目目录外的同级TS文件（包括nest-app下libs目录的共享代码）不会进入编译流程，webpack无法识别TS的export type语法，直接抛出模块解析失败错误。

方案1：官方配置支持（推荐，Next.js 12.2+ 版本可用） #

直接在Next.js项目的配置文件中开启外部目录编译支持，不需要手动改webpack规则：

1. 打开next-app/next.config.js配置文件，添加如下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // 开启后支持引入项目目录外的本地TS文件
    externalDir: true,
  },
  // 如果你的monorepo用workspaces把共享代码抽成了独立本地包，直接把包名加到下面的数组即可，不需要开externalDir
  // transpilePackages: ["@your-monorepo/shared-types"]
}

module.exports = nextConfig

2. 重启开发服务npm run dev即可正常编译。

如果你后续要复用Nest.js的DTO、类型代码，建议把这部分纯同构代码抽成monorepo内的独立workspace包，用transpilePackages配置声明转译，比跨目录写相对路径引入更易维护，也是monorepo架构的通用实践。

方案2：手动修改webpack编译范围（兼容低版本Next.js） #

如果你的Next.js版本低于12.2，可以手动修改webpack配置，把需要引入的外部目录加入TS转译的include范围：

1. 打开next-app/next.config.js，添加webpack自定义配置：

/** @type {import('next').NextConfig} */
const path = require('path')
const nextConfig = {
  webpack: (config) => {
    // 配置需要额外编译的外部目录，根据自己的实际路径调整
    const extraCompilePaths = [
      path.resolve(__dirname, '../'), // monorepo根目录
      path.resolve(__dirname, '../nest-app/libs') // Nest.js的共享代码目录
    ]

    // 遍历webpack规则，把额外目录加到TS/TSX文件的处理范围
    config.module.rules.forEach(rule => {
      const isTsRule = rule.test?.test?.('.ts') || rule.test?.test?.('.tsx')
      if (!isTsRule) return
      rule.include = Array.isArray(rule.include)
        ? [...rule.include, ...extraCompilePaths]
        : [rule.include, ...extraCompilePaths].filter(Boolean)
    })

    return config
  }
}

module.exports = nextConfig

2. 重启开发服务即可生效。

共享给前端Next.js应用的代码必须是同构的：不能引入Nest.js专属的服务端依赖（比如@nestjs/common的装饰器、服务端运行时逻辑、Node.js专属API），否则就算编译通过，前端打包后也会运行报错。类型定义、纯数据结构DTO、无环境依赖的工具函数可以放心复用。

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