FrourioNextをNx環境で導入してみたところ、OpenAPI 生成がうまく動作しなかった。この記事では、初期構築の手順から、発生したエラー内容、そして最終的に力技での回避方法までをまとめます。

✅ 初期構築

npx create-nx-workspace@latest --pm pnpm
✔ Where would you like to create your workspace? · org
✔ Which stack do you want to use? · none
✔ Would you like to use Prettier for code formatting? · No
✔ Which CI provider would you like to use? · skip
✔ Would you like remote caching to make your build faster? · skip

cd org
npx nx add @nx/next
npx nx g @nx/next:app apps/frourio-app
✔ Which stylesheet format would you like to use? · css
✔ Which linter would you like to use? · none
✔ What unit test runner should be used? · none
✔ Which E2E test runner would you like to use? · none
✔ Would you like to use the App Router (recommended)? · Yes
✔ Would you like to use the `src/` directory? · Yes

必要な依存関係を追加：

pnpm add next zod
pnpm add @frourio/next npm-run-all --save-dev

package.json にスクリプトを追加：

{
  "scripts": {
    "dev": "run-p dev:*",
    "dev:next": "nx dev frourio-app",
    "dev:frourio": "cd apps/frourio-app && frourio-next --watch",
    "build:openapi": "cd apps/frourio-app && frourio-next-openapi --output=./public/openapi.json"
  }
}

💥 エラー発生

pnpm build:openapi を実行すると、以下のエラーが発生：

File '.../frourio.ts' is not listed within the file list of project ''. Projects must list all files or use an 'include' pattern.
Cannot find global type 'Array'.
Option 'customConditions' can only be used when 'moduleResolution' is set to 'node16', 'nodenext', or 'bundler'.
Composite projects may not disable incremental compilation.

試したこと

ts-node / @types/node を追加
→ グローバル型のエラーは消えたが、残りの問題は解決せず

pnpm add -D ts-node @types/node

moduleResolution: bundler に変更
→ customConditions エラーとトレードオフ発生
customConditions: ["development"] を削除
→ 一部解決

しかし、frourio.ts が project に含まれていない旨のエラーがしつこく残る。

🛠 最終的な解決方法（力技）

どうにもならず、Nx環境でなければ動作したので、シンプルなNext環境初期構築時に作成されるのtsconfig.jsonを借りて解決しました。

npx create-next-app@latest next-app

作成された tsconfig.json を apps/frourio-app/tsconfig.json に一時的に上書きすると、pnpm build:openapi が成功：

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

💡 pnpm build:openapi の前に tsconfig.json を差し替え、実行後に元に戻すスクリプトを書いてもよい。

📝 まとめ

Nx + FrourioNext の組み合わせでは tsconfig 周りに注意
ts-node, @types/node の導入は必須
File is not listed within the file list of project のエラーは tsconfig の include や構成そのものが原因？

この構成が安定して使えるかどうかは今後次第ですが、同じように詰まった方の参考になれば幸いです。