記事におけるNext.jsは、v13以降のApp Router （Server Components）を用いる前提での説明となります。
Pages Routerを用いている場合は、適宜Pages Routerでの書き方として読み替えてください。
この記事は何
最近Next.jsでウェブアプリケーションを作ることが多いのですが、
その時にオニオンアーキテクチャを採用してアプリケーションを作ることが多く、型も固まってきたので数回の記事にわたり紹介をしていきたいと思っています。
今回はディレクトリ構成について紹介します。
オニオンアーキテクチャとは
オニオンアーキテクチャとは以下のレイヤーで実装を行なっていくアーキテクチャです。
簡単に言ってしまうと古典的なレイヤードアーキテクチャにおける、InfrastructureレイヤーやTestレイヤーを
Dependency Injection (DI) で最上位のレイヤーに持ってくる構成のアーキテクチャです。
最近のDDDなどの手法を用いるときは、このレイヤードアーキテクチャが採用されることが多いです。
より詳しい説明は以下の記事などをご参考ください。
Next.jsにおける各レイヤーの定義
Next.jsでオニオンアーキテクチャを実現しようとする場合、以下のようなディレクトリ構成を採用することが多いです。
- app (Presentaion)
- xxx
- page.tsx
- infrastructures (Infrastructure)
- XXXRepository.ts
- XXXFactory.ts
- utils (Infrastructure)
- xxx.ts (DBアクセス以外の外部アクセスライブラリ)
- applications (Application Service)
- XXXService.ts
- models
- xxx
- XXX.ts (Entity)
- YYY.ts (Value Object)
- XXXService.ts (Domain Service)
- IXXXRepository.ts (Infrastructure Interface)
- IXXXFactory.ts (Infrastructure Interface)
このようなディレクトリ構成は、
を参考にして作成しています。
次回以降、具体的にそれぞれのレイヤーをどのように実装していくのかについて紹介をしていきます。