やったこと

• 実践Next.js 8章 モーダル表示とデータ連携 読了

学んだこと

モーダルの価値

閲覧中の画面から離脱することなく別の作業に移ることが出来、
作業終了後は、前の画面へ即座に戻ることが出来る。

Next.js だと、モーダルの実装には二つの選択肢がある。

• React の標準機能で実装
• Next.js （AppRouter）機能を活用して実装

React の標準機能でモーダルを実装

useModal を使用する。

よくあるのは button コンポーネントと組み合わせ、「ボタンのクリックを検知したらモーダルを表示する」というもの。

AppRouter 機能を活用てモーダルを実装

Parallel Routes と Interceptiong Routes を用いてモーダルを実装する。

React の標準機能で実装したモーダルと比較して、以下のメリットがある。

• モーダル表示の際に遷移元のコンテキストを失わない
• モーダルから別のモーダルへ遷移できる
  • モーダル => 元画面 => モーダル と、元画面を経由する必要が無い
• モーダルの URL をシェアできる
• モーダルの URL をシェアしても、遷移元の情報を漏らさない

Intercepting Routes を使用することで、URLを持つページを、モーダルとして表示することが出来る。

Parallel Routes の役割は、よくわからない。

バックエンド間連携によるデータ保存

サンプルアプリケーションの説明が中心。