弁護士ドットコムライブラリーのフロントエンドのアーキテクチャ（Next.js + TypeScript） - パンダのプログラミングブログ

パンダとおくだが、Web業界の当たり前を「これって本当にそうだっけ？」と問い直すラジオを配信しています 弁護士ドットコムライブラリーのフロントエンドのアーキテクチャを紹介します この記事は弁護士ドットコム Advent Calendar 2020、2日目の記事です。2020年12月に執筆された記事です。 私は弁護士ドットコムライブラリーというサービスを開発しています。これは法律書籍をネットで読める弁護士向けのサブスクリプションサービスです。 フロントエンドの採用技術はNext.js + TypeScriptで、要件定義から設計、実装は私が担当し、現在も運用しています。 この記事では、2020年5月にリリースしてから半年間、Next.jsで上記サービスを運用した知見の中から、フロントエンドでのアーキテクチャについてご紹介します。 弁護士ドットコムライブラリーの特徴は以下の通りです。 画面数は

[shun114]

“テスト”

[katryo]

デザイナーがCSSを書けるならContainerとUIのコンポーネントを分けるのありかも。まあワイはBulletproof React のFeatures Folders パターンでいくが……

[saloverses]

“に”

[efcl]

TypeScript + React Hooksでの設計。 InfraのRepositoryにあたるInteractorがデータの取得とViewModelのマッピングを行い、ReactでViewModelを描画するアーキテクチャ

[t2wave]

nextとレイヤードアーキテクチャの組み合わせ。interactorsディレクトリでAPIレスポンスをドメインモデルにmapping

[haususuahahdh]

Presenter、カスタムHookでもよさそう