Next.jsのIntercepting RoutesとParallel Routesを使ってモダンなUXを実現する

BRANK

今回はNext.js 13.3のApp Routerから導入されたIntercepting RoutesとParallel Routesを使用して、モダンなUXを実現する方法を解説します。実際に動作するデモ モバイルでは通常の記事一覧表示になりますが、PCではモーダルを使ったプレビュー表示になります。ソースコード はじめにこのプロジェクトでは以下のような機能を実装します。記事一覧ページPC表示時は2カラムレイアウトモバイル表示時は1カラムレイアウト記事詳細ページPC・モバイルで共通のページ通常のブログの記事ページのように記事の内容を表示(1) Intercepting RoutesとURLの動作Intercepting Routesを利用することで、以下のような体験をユーザーに提供できます。モーダル表示時のURLPCでモーダルを開いた場合は、URLは/articles/[id]に変更されますこれにより、モーダル表示中のURLの共有や、ブックマークが可能になりますブラウザの戻るボタンでモーダルを閉じることができます直接アクセス時の挙動/articles/[id]に直接アクセスした場合：モバイルの場合：通常の記事詳細ページが表示されますPCの場合：記事一覧ページ上にモーダルで表示されますこれにより、共有されたURLは両方のデバイスで適切に表…