目前的元件還放在 ironman-nextjs 這個 app 底下，也只有這個 app 能取用到這些元件，為了讓之後的專案可以一起運用這些元件，接下來要把他們抽出來。

目前的 integrated 結構 NX 專案，會將共用部件放在 libs 底下，首先來用 NX 的指令建立好 UI 元件的 lib。

pnpm exec nx g @nx/react:library ui/react-components

✔ Which stylesheet format would you like to use? · css
✔ Which bundler would you like to use to build the library? Choose 'none' to skip build setup. · vite

這邊有特地多加一層 ui 目錄，之後 UI 相關的 lib 集中在這，其他非 UI 的像是 utils 會分目錄來整理。

建好 lib 後首先看到根目錄上的 tsconfig.base.json

{
	//...
  "compilerOptions": {
		//...
    "paths": {
      "@ironman-nextjs/ui/react-components": [
        "libs/ui/react-components/src/index.ts"
      ],
    }
  }, 
}

用指令建成 lib 的話 NX 會幫忙註冊參照到這個 lib 的路徑，這樣當 app 要取用這個 lib 中的元件時可以直接用 paths 找到路。

指令產生的模板預設將元件放在 src/lib 底下，並經由 src/index.ts 開放，所以就把之前放在 app 底下的元件搬過來吧。

/libs/ui/react-components
└── src
    ├── index.ts
    └── lib 
        ├── AppBar.tsx
        └── ThemeProvider.tsx

// libs/ui/react-components/src/index.ts
export { default as AppBar } from './lib/AppBar';
export { default as ThemeProvider } from './lib/ThemeProvider';

接著 apps 底下原本的引用路徑也得改，像這樣：

import { AppBar } from '@ironman-nextjs/ui/react-components';

這樣就將元件抽出來了，之後就可以跨專案共用這些元件邏輯。