Next.jsの依存関係を可視化するツール

はじめに

• Next.jsのsrcディレクトリの依存関係を可視化するツールを作りました。
• こちらのリンクから試すことができます。
• デフォルトで存在するグラフは、このアプリケーションの依存関係です。
• ペーストして頂くjsonファイルはブラウザ側で処理され、サーバーに送信されません。
• svgとして保存できます
  

セットアップ

dependency-cruiserのインストール

npm install --save-dev dependency-cruiser
# or
yarn add -D dependency-cruiser
pnpm add -D dependency-cruiser

dependency-cruiserの設定ファイルの作成

npx depcruise --init

dependency-cruiserの実行

npx depcruise --config .dependency-cruiser.js . --output-type json --include-only "^src" > test.json

test.jsonの中身はコピーしておきます。本家様のリンクはこちらです。

グラフの作成

こちらのリンクで、コピーしたjsonを貼り付けます。

ユースケース

特定のファイルをインポートしているファイルがみたい

• src/components/file-node.tsxをインポートしているファイルがみたいとします。
  

1. ルートノードを選択します。ここで選択したノードの子供のノードが表示されます。
2. レイアウト方向で、「子が親をインポートする」を選択します。これにより、src/components/file-node.tsxをインポートしているファイルが表示されます。

shadcn/ui関連や、.tsファイルを除きたい

• shadcn/uiで作成したコンポーネントは編集しないことがあります。
  

1. 含めるパターンで.tsxを追加します。これにより、.tsや.cssなどは覗かれます。
2. 除外パターンでsrc/components/ui, src/lib/utils.tsを追加します。
3. 最後に、除外フィルターを有効にします。

ファイル名のコピー

• ノードの3点リーダーをクリックするとコピーできます。

まとめ

• Next.jsのsrcディレクトリの依存関係を可視化するツールを作りました。
• 不具合や他に欲しい機能があればコメントお願いします。