。

プロジェクト作成

srcフォルダ作成

。

tsconfig.json

styled-componentsの設定

compilerオプションのstyledComponentsを有効化しておきます。

.eslintrc.jsonは個別にルールをカスタマイズ可能です。

React Hook Form

React Hook Formはフォームバリデーションライブラリです。自分で作成したカスタムのReact Componentのinput要素にも使用可能。
パフォーマンスの面でも再レンダリング数を最小限に抑えマウントを高速化し、優れたユーザーエクスペリエンスを提供しています。

React Hook Formが提供するuseFormフックを活用。
useFormフックはregister関数、handleSubmit関数、errorsオブジェクトを返します。
register関数はフォームの<input>・<select>にフックを登録して状態を管理下に置けます。
handleSubmit関数はフォームのonSubmitのイベントハンドラを登録するために使用します。
errorsオブジェクトはどの要素にバリデーションエラーが発生しているかを検知するために使用します。

npm install react-hook-form

SWRの導入

SWRはVercelが開発しているデータ取得のためのReact Hooksライブラリです。
データ取得を効率化でき、コンポーネントはデータの更新を継続的かつ自動的に受け取れます。
CSRを効率的に実現するために導入します。
SWRは最初にキャッシュからデータを返し(stale)、次にフェッチリクエストを送り(revalidate)、最後に最新のデータを持ってくるという動作を可能にしています。
これはキャッシュを利用しつつ、そのキャッシュを裏で更新できるため、キャッシュが古くならないまま高速化の恩恵を受けられます。

npm install swr

React Content Loaderの導入

React Content Loaderはローディングのためのプレースホルダーを簡単に作成できるライブラリで、SVGを使ってローダーの形をカスタマイズ可能です。

npm install react-content-loader
npm install --save-dev @types/react-content-loader

Material Iconsの導入

Material IconsはUIライブラリMaterial UIのコンポーネントの1つです。

テスト環境構築

アプリケーション開発において、テストはコードの品質を高め、コードの変更による予期せぬバグの発生を防ぐのに有用です。
Reactコンポーネントのテストを書くために使うツールはいくつか存在します。
React Testing LibraryはDOM Testing Libraryを使ってコンポーネントのテストを動かします。
DOMという名前が付いている通り、コンポーネントを実際に描画して、その結果のDOMにアクセスをして正しく描画されているかテストします。
React Testing Libraryにはそのために描画やイベント発行、DOMのプロパティへのアクセスなどの機能があります。React Testing Libraryを使うことで見た目や振る舞いが正しく機能しているかテストできます。

package.jsonにテストを実行するためのスクリプトを追加します。

JSON ServerとはREST APIのダミーエンドポイントを作成するためのツールです。

npm ciはnpm installに似たコマンドです。CI環境やテスト環境での利用、依存関係のクリーンインストールを行う場合に使用します。

APIクライアントの実装

APIへの問い合わせを管理する、APIクライアントを実装します。

アプリケーションで使用されるデータの型

アプリケーションで使用されるデータの型を定義します。
ユーザー(User)、商品(Product)、API呼び出しの際に使用されるContext(ApiContext)の型は以下のようになります。

オリジン間リソース共有(CORS)でのCookie送信を避けるためにNext.jsのRewrites機能を使用してプロキシの設定をします。http://nextjsのホスト/api/proxy/signinとリクエストを送った場合にhttp://json-serverのホスト/signinと変換されます。

デプロイ

フロントエンドNext.jsアプリのビルド・デプロイ時にはJSON Serverアプリに対してリクエストを送りコンテンツを取得し、SSGを行います。
定期的に更新されるような一部のページに対してはSSGで生成後にISRで更新します。
一方でユーザー認証のような個別で表示するコンテンツに対してはクライアントからJSON Serverアプリにリクエストを送り、CSRを行ってページを表示します。