【Next.js】コンポーネントと状態管理のファイル分割と設計

はじめに 今までは実装方法がわからず調査し試行錯誤して実装できた方法を書いたりしていましたが、 今回は実装自体はできているが、より良い実装はないか？という方向性で書いてみたいと思います。 書いていく内容は Next.js で実装された一覧と検索機能を持った画面のコンポーネントと状態管理のファイル分割と設計についてです。 自分は Next.js(React) については書き始めて1年位で、仕事では書いたことなく他PJの構成をほぼ知らないですが、一旦自分の中の設計が落ち着いたので書こうと思った次第です🙏 解説するページ 今回解説するページは自分が実装しているサイトのツイッターの呟き一覧をキャラとLPで検索できるページです。 このページの新旧のファイル構成や状態管理の設計について解説していきます。 旧 まず、旧設計のファイル構成を紹介します。 components common details