问题是下一个文件夹之外的代码没有被 Babel 转译。这是因为该.babelrc文件未被考虑在内，即使它位于代码的根目录中。

但是，如果您改为使用babel.config.js文件（从 Babel 版本 7 开始推荐）并将其放在代码的根目录（有效替换.babelrc文件），您可以使用此插件：

https://github.com/josephluck/next-plugin-custom-babel-config

我已经做到了，而且效果很好！

从NextJs 11 开始，有一个名为externalDir的新实验选项，它运行良好并且不需要使用 next-transpile-modules。

为了清楚起见，让我们一步一步地说明如何操作，这可能看起来是一个漫长的过程，但是一旦你掌握了它，它就非常简单（实际上 3 个步骤）

1.纱线V3（可选）

为了改善体验，我建议将yarn升级到 v3+ ( yarn set version 3.0.2 && yarn plugin import workspace-tools) 并编辑.yarnrc.yml与此类似的生成配置：

# Yarn 2+ supports pnp or regular node_modules installs. Use node-modules one.
nodeLinker: node-modules
nmMode: hardlinks-local
plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
    spec: "@yarnpkg/plugin-workspace-tools"
yarnPath: .yarn/releases/yarn-3.0.2.cjs

PS：你可能想要将它添加到.gitignore过

.yarn/*
!.yarn/patches
!.yarn/releases
!.yarn/plugins
!.yarn/sdks
!.yarn/versions
.pnp.*

为什么 ？因为您将有可能使用工作区：别名协议。（也可在 pnpm 中使用）

2. 严格的工作空间拓扑（可选）

我建议严格限制包依赖的内容（要有明确的界限）。这不是一个绝对的要求，而是一个很好的做法，可以避免难以调试的情况。

为了帮助包管理器，我建议正确声明每个应用程序/包的依赖项及其边界。

换句话说，每个包/应用程序都有自己的 package.json，您可以在其中明确添加他们需要的 deps（不在根 package.json 中）

按照你的例子，

apps/
packages
  /app
    package.json (app depend on ui-kit through yarn workspace: alias)
    tsconfig.json (we will add typescript path aliases there too) 
    next.config.js
  /ui-kit
    package.json
package.json (do not put nextjs as dep here, only in app)

一个 root 的例子 package.json

{
  "name": "monorepo",
  "private": true,
  "workspaces": [
    "packages/*"  // Enable package discovery in packages/* directory.
  ],
  "devDependencies": {
    "husky": "7.0.2", // Only what's needed for monorepo management
  }

一个例子 packages/app/package.json

{
  "name": "my-app",
  "devDependencies": {
    "@types/node": "16.10.1",
    "@types/react": "17.0.29",
    "@types/react-dom": "17.0.9",
    "typescript": "4.4.4"
  },
  "dependencies": {
    // Assuming the name of packages/ui-kit is ui-kit,
    // we explicitly declare the dependency on it through
    // workspace: alias (package-manager perspective)
    "ui-kit": "workspace:*",
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
  }
}

为什么 ？这样你就不会陷入与 deps 冲突的奇怪问题。

3. typescript别名

即使您不使用 typescript，NextJs 也会读取tsconfig.json并查找typescript路径映射配置。如果您不知道它是什么......它只是一个配置，您可以在其中声明（再一次）您的 deps。Nextjs 会将它们转换为它在引擎盖下使用的内容来编译 deps（即：babel-plugin-module-resolver和可能后来的 swc）。

按照您的示例，只需./packages/app/tsconfig.json以这种方式编辑 a

{
  "compilerOptions": {
    // here baseUrl is set at ./src (good practive), can
    // be set to '.'  
    "baseUrl": "./src",
    "paths": {
      // Declare deps here (keep them in sync with what
      // you defined in the package.json)
      // PS: path are relative to baseUrl
      "ui-kit/*": ["../../ui-kit/src/*"],
      // if you have a barrel in ui-lib 
      "ui-kit": ["../../ui-kit/src/index"],
    }
  },
}

为什么 ？更多的是工具之间的限制（包管理器和路径有不同的观点）

4.nextjs配置

在 中packages/app/nextjs.config.js，启用externalDir配置（目前处于实验阶段但效果很好，反馈线程在这里）

const nextConfig = {
  experimental: {
    // this will allow nextjs to resolve files (js, ts, css)
    // outside packages/app directory. 
    externalDir: true,
  },
};
export default nextConfig;

PS：对于旧的 nextjs 版本，完全可以通过自定义 webpack 配置来做同样的事情。问你是否需要一个例子。

你会得到什么

在您的应用程序中，您应该能够像这样导入您的 ui-kit：

import { Button } from 'ui-kit';
// or
import Avatar from 'ui-kit/components/Avatar'

它的美妙之处在于快速刷新将开箱即用（无需构建）。它很快，你不需要 NX（+ 昂贵的 nx.cloud）、匆忙或任何东西......

Nextjs 将简单地导入文件，按需构建它们，甚至将它们缓存在它自己优化的缓存中（尤其是在 webpack 5 中速度更快，也可以在 CI 上启用）...

如果您想了解更多信息，我会在此存储库上维护一个示例存储库，该存储库将提供完整的生命周期视角（ci、github 操作、linters、部署...）：https : //github.com/belgattitude/nextjs-monorepo-example。

PS：在这里也关注 yarn 3+ 的开发和版本，他们现在做得很好。

对于 Next.js 9.2+，这个其他答案对我不起作用。我不得不使用一个名为next-transpile-modules的分叉包。

您真正需要做的就是yarn add next-transpile-modules进入每个包，然后添加/编辑next.config.js以下内容：

// next.config.js
const withTM = require('next-transpile-modules')(['somemodule', 'and-another']); // pass the modules you would like to see transpiled

module.exports = withTM();

babel.config.js如果您想使用 Next.js 默认值，您甚至可能不再需要进入您的根目录。

包的工作方式是通过实现自定义 Webpack 配置，如官方文档中所述，告诉 webpack 监视您在next.config.js上面定义的module的目录。

尝试将其添加到 next.config.js 以启用下一个根文件夹之外的编译typescript文件：

module.exports = {
  // ... other settings
  experimental: {
    externalDir: true,
  },
}

归功于：https : //github.com/belgattitude/nextjs-monorepo-example#step-33-next-config