AsaDesign

Next.js：開発環境構築

環境構築の際に色々インストールするのですが、それぞれ何のために使うのか把握したいと思います。

参考書：typeScriptとReact/Next.jsで作る実践Webアプリケーション開発

(1) Next.jsのプロジェクト作成

npx create-next-app@latest --ts

(2) styled-componentsの設定：CSSスタイルの統一

npm install styled-components
npm install --save-dev @types/styled-components

CSS in JSライブラリは他にもあるそうですが、以下のような観点から検討するといいそうです。

  • 書きやすさ
  • 開発の活発さ
  • 捨てやすさ(別ライブラリや自前実装などへの移行のしやすさ)

(3) ES LintとPretterの設定：コードの初歩的なミス防止

npm install --save-dev pretter eslint typescript-eslint \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint-config-pretter \
eslint-plugin-pretter \
eslint-plugin-react \
eslint-plugin-react-hooks \
eslint-plugin-import

ES Lint：コードエラー解析ツール

Pretter：コードの標準化
コード保存時に決められたルールで整えます。余計なコード差分を生まないための手段です。

(4) storybook：ブラウザでコンポーネント確認

npx sb init

(5) React Hook Form：フォームバリデーションライブラリ

npm install react-hook-form

「商品を出品」のページで使うそうです。

(6) SWR：キャッシュ関連

npm install swr

SWRとはデータ取得のためのReact Hooksライブラリ、とのこと。

CSR(常に最新データを表示するため非同期を使う方法)を効率的に実現するために使用するそうです。

Stale-While-Revalidate（SWR）とは

  • Cache-Controlの拡張
  • キャッシュから表示する
  • が、裏で非同期にキャッシュを更新しておく

キャッシュは使いたい、が、なるべく鮮度の高いリソースを返したい、というニーズに応える仕組み。
Stale（古くなったもの）-While（〜の間）-Revalidate（再検証）ということなので、「再検証している間は古いキャッシュを返す」って認識でいい気がする。

Stale-While-Revalidateに関するメモ – Zenn

詳しくはこちら。Cache-Control – HTTP – MDN Web Docs – Mozilla

(6) React Control Loader：ローダー作成ツール

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

(7) Material Icons：アイコン表示

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

(8) 環境変数.envファイル

プロジェクトのルートに.envファイルを作成します。

API_BASE_URL=http://localhost:8000
NEXT_PUBLIC_API_BASE_PATH=/api/proxy
  • API_BASE_URL：Json ServerのURL
  • NEXT_PUBLIC_API_BASE_PATH：Next.jsのURL Rewrite機能(後に登場)で使う変数

(9) テスト環境

npm install --save-dev \
@testing-library/jest-dom \
@testing-library/react \
jest \
jest-environment-jsdom

(10) JSON Server：仮のAPI

あらかじめ用意したコード(!?)をGitHubリポジトリからクローンします。

# Next.jsのアプリケーションとは別のディレクトリで作業する
git clone https://github.com/~