Reactこんにちは株式会社ベンジャミンの市川です!ときおり吹く木枯らしに、駆け足でやってくる冬の気配を感じるこのごろ、いかがお過ごしでしょうか。今回は、Next.jsにおいて「一度作ったファイルを、様々なプロジェクトであっても、ひたすら使いまわして工数を削減する」というテーマで、MUIを例にして書いていきます。5.1.6完成形1.Next.js(React)におけるコンポーネントを分ける考え方Next.js(React)におけるコンポーネントの分け方には様々なものがあります。Design」や、画面仕様書寄りな機能単位で分ける「bulletproof-react」などがありますが、結局どの手法であっても、一番再利用される回数の多い最小単位のUI(ボタンなど)については、ある程度考え方は共通しているのではないかと考えています。2.実際に作成してみる作成するにあたっていくつかルールがあります。基本的には親から指定する。}}`)上記に沿ったコードを見てみましょう。使って、数パターンの見た目で再利用してみます。/>を変更するだけでよいので、Spinner.tsxを利用している親コンポーネントをいじることなく、変更箇所とスコープを狭めることができます。あとがきいかがでしたでしょうか。個人的な意見ではありますが、コンポーネント設計さえきちんとできていれば、UIライブラリを変更したい、はたまたフレームワークをVue.jsにしたい、といったケースでも比較的応用しやすい(=迷いなくスピーディーに切り替えができる)のではないかと考えています。CopilotやChatGPTのおかげで、上記ケースのような実装コストは下がったと感じます。以上、この記事が皆様のお役に立てれば幸いです。Benjamin.Inc。