在Next.js应用中导入共享代码

Question

我想通过重复使用类型，DTO和其他同构应用程序来利用MonorePo从同一单声道存储库中的后端（NEST.JS）服务中使用。在我的情况下，下一个。我正在重新出口nest-app/libs/types/src/index.ts中的一堆文件，然后在我的next.js应用中导入它。但是，当我这样做时，Next.js抱怨未能编译错误

重现错误的最简单方法是

• 为monorepo创建一个任意文件夹，例如test> test-import < /code>
• 导航到monorepo文件夹（cd test-import）
• 运行npx create-next-app@最新-Typescript并选择一个名称对于项目（例如next-app），
• 在MonorePo的根部创建下面的external.ts文件（与next> Next-app <在同一级别上/code>）
• 运行npm运行dev从Next-app文件夹

monorepo结构：

external.ts
next-app
  (other files omitted)
  pages
    index.tsx

external.ts

export type ExternalType = string;

export const me = "ME";

next-app/pages/index.tsx是导入external.ts的内容

import { me } from "../../external";

// boilerplate code omitted
<h1 className={styles.title}>
  Welcome {me} to <a href="https://nextjs.org">Next.js!</a>
</h1>

。

../external.ts
Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export type ExternalType = string;
| 
| export const me = "ME";

Answer 1

您需要使用实验externalDir功能： https：// github .com/vercel/next.js/pull/22867 。

// next.config.js
const nextConfig = {
  ...
  experimental: {
    externalDir: true
  }
}

我已经检查了至少在您描述的情况下起作用。

---

也就是说，我们还有一个Nest+Next MonorePo（在我们的情况下，共享代码都超出了Next和Nest-并且要使它运行，我们必须求助于symint链接（ln -s -s）巢文件夹中的共享代码。如果您决定拥有一个具有共享代码的文件夹，该文件夹都存在于下一个和Nest Codebase之外，则可能也需要尝试。

IIRC有一种使它在没有符号链接的情况下使其正常工作的方法，但是对于该巢穴，必须管理整个MonorePo，包括非nest subprojects。