知りたいこと
Next.jsを使用してアプリ開発を始めようとしています。
コンポーネントの設計にはAtomicDesignを採用します。
Next無しのReactアプリ開発でAtomicDesignを採用したことはあり、
どのようなものかはわかっているのですが、
Next.jsに落とし込む場合のフォルダ構成について悩んでいます。
具体例
以下の条件の場合、どのようなフォルダ構成とするのが正解でしょうか。
・コンポーネントが見た目とロジックの機能を持つ場合、ContainerComponent
(ロジックを責務とするコンポーネント 以下CC
)とPresentationalComponent
(見た目を責務とするコンポーネント 以下PC
)に分割して作成し、CC
からPC
を呼び出す
・ApageはPC
とCC
に分かれている
・BpageはPC
しか存在しない
①pages配下のコンポーネントはルーティングにしか使用しない
pages/Apage.tsx(内容はApageのCC
を呼び出すだけ)
pages/Bpage.tsx(内容はBpageのPC
を呼び出すだけ)
components/presentational/Apage.tsx
components/presentational/Bpage.tsx
components/container/Apage.tsx
②pages配下のコンポーネントにある程度内容も書いてしまう
pages/Apage.tsx(CC
の内容)
pages/Bpage.tsx(PC
の内容)
components/presentational/Apage.tsx
個人的には①の方が分かりやすいのかなと思うのですが、少し冗長な気もしております。
どちらの方が良いか、また別パターンのやり方をご存知の方が居ましたらご教示ください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。