一画面で完結！Next.js 15 パラレルルート分割術
P
提示词
Create a minimal example of Next.js 15 parallel routes (using app/@modal and app/@sidebar) that shows how to render multiple independent sections on the same page without blocking each other. Include a simple dashboard layout with a main content area, a sidebar, and a modal that opens via a button. Use only built-in Next.js features (no additional libraries). Show the file structure and key code snippets.
代码预览
エディタを読み込み中…
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選