Next13におけるコンポーネントデザインパターンの構築について

[Yuisei-Maruyama]

BCCDパターンとは？

https://qiita.com/misuken/items/19f9f603ab165e228fe1

コンポーネント名に使用される単語の意味や性質を相対的に利用することで、 コンポーネントを Base Case Domain の3つの概念へ法則的に配置し、体系的に管理できるようにする分類手法である。

この法則に従うことによって、従来 Atomic Design で懸念されていたコンポーネントをどこで分割すれば良いのかであったり、
分割する際の命名はどのようにしたら良いのかという問題を機械的に解消することができる。

[Yuisei-Maruyama]

Next13で搭載された appディレクトリと Recoil を併用することを考えた時に、 下記のような構想を考えた。

├── app
│   ├── XXX.tsx (各ページの表示要素) ← ここで RecoilRoot を定義する
│   ├── globals.css
│   ├── head.tsx
│   ├── layout.tsx
│   ├── page.tsx
├── components
│   ├── Base
│   ├── Case
│   ├── Common
│   └── Domain

このような構想に至った理由としては、RecoilRoot の配置場所について Root と名付けられている通り、そのコンポーネントにおける根幹に配置するのが自然であると考えたからである。

[Yuisei-Maruyama]

しかし、上記の構想だとappディレクトリ内でサーバコンポーネントを使用した際に下記のようなエラーが発生する。

error - node_modules/recoil/cjs/index.js (4207:25) @ createContext
error - createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at eval (webpack-internal:///(sc_server)/./node_modules/recoil/cjs/index.js:3079:26)

Recoil のライブラリ内でクライアントコンポーネントの処理が行われている為、サーバ コンポーネント内でエラーが発生する模様。

[Yuisei-Maruyama]

上記の問題を解決するために、RecoilRoot を appディレクトリ内ではなく /components/Domain にて定義することで解消した。

Root という意味合いだと、appディレクトリ内にあるのが適切であると考えられる一方で /components/Domain はドメイン要素に纏わる処理に責務を持つディレクトリとしての立ち位置なので、配置に違和感はないように思える。

├── app
│   ├── XXX.tsx (各ページの表示要素)
│   ├── globals.css
│   ├── head.tsx
│   ├── layout.tsx
│   ├── page.tsx
├── components
│   ├── Base
│   ├── Case
│   ├── Common
│   └── Domain ← ここで RecoilRoot を定義する