Next.jsに「できるだけ」依存しないReactアプリケーションの構成

ARANK

TL;DR本記事で紹介するのは、Redux や React Router を使った React アプリケーション構築時のベストプラクティスを Next.js に適用した考え方です。Next.js を外部モジュールと考え、Container/Presentation の Container を Adapter 層と見なす考え方next/router などの Next.js の組み込みモジュール、Store、SWR（React Query） は Container（Pages） 層で利用するStorybook でコンポーネントを表示する際、Next.js 等のモックをできるだけ作らない但し、Template 層以下の next/link や next/image への依存は制御できないなお本記事では、Next.js の依存層、Pages 層とTemplate 層という言葉は以下のことを指しています。Next.js の依存層: Next.js のモジュールを読み込み、Pages 層にデータを渡すレイヤーPages 層: Store や fetch でデータを取得して Template 層以下へデータを渡すレイヤーTemplate 層: Pages 層からデータ、イベントハンドラーを props で受け取り、表示するためのレイヤーNext.jsへの依存について考え始めたきっかけまず、私がNext.jsへの依存について考え始めたきっかけは2つあります。1つ目は、2019年時点で Next.js 採用の意思決定をする会…