一画面で完結！Next.js 15 パラレルルート分割術
P
プロンプト
Next.js 15のパラレルルート（app/@modal と app/@sidebar）を使った最小限のサンプルを作成してください。同一ページ上で、メインコンテンツ、サイドバー、ボタンで開くモーダルをそれぞれ独立して表示し、互いにブロックしないことを示します。追加ライブラリは使わず、Next.jsの組み込み機能のみ使用。ファイル構成と主要コードスニペットを表示。
CODE PREVIEW
エディタを読み込み中…
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
Next.js 15 の パラレルルート を使うと、同一レイアウト内で複数のページを同時にレンダリングできます。このガイドでは、メインコンテンツ・サイドバー・モーダルがそれぞれ独立したパラレルルートとして動作する最小のダッシュボード例を示します。それぞれがブロックされることなく、独立に読み込み・更新が行えます。
主なポイント：
- パラレルルートスロット は
@プレフィックス付きのフォルダで定義します（例：@modal,@sidebar）。 - 各スロットは自身の
page.tsx（および必要に応じて loading/error 状態）を持ちます。 - レイアウトでは、対応する props（
children,modal,sidebar）を使ってすべてのスロットを描画します。 - ルートインターセプト（例：
(.)settings）をスロット内で使うと、フルナビゲーションなしで URL 状態を共有するモーダルをレンダリングできます。
このパターンは、ダッシュボードや設定パネルなど、独立したセクションをレスポンシブに保ちたいインターフェースに最適です。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選