Next.js 15 并行路由示例｜AI 生成落地页提示词
代码预览
提示词
Create a landing page that explains Next.js 15's Parallel Routes feature. Include a live demo showing two parallel route slots (@analytics and @team) rendering simultaneously using layout.tsx. Use Tailwind CSS, AOS for scroll animations, and a clean code snippet. Show how each slot can have its own loading and error states.
Next.js 15で安定版となったParallel Routesは、1つのレイアウト内で複数のページを同時にレンダリングできます。各ルートは独立しており、独自のローディングスケルトン、エラー境界、異なるデータ取得戦略を持てます。ダッシュボードや管理画面、独立したセクションを組み合わせるUIに最適です。
クイックセットアップ
appディレクトリ内に @ プレフィックス付きのフォルダを作成します（例：app/@analytics/page.tsx、app/@team/page.tsx）。次に app/layout.tsx でこれらのスロットをpropsとして受け取るよう更新します。
ライブデモ
上のデモでは、@analytics が遅いデータベースクエリをシミュレートしてローディングアニメーションを表示し、@team は即座にレンダリングされます。両者は同じ親レイアウトを共有しますが、完全に独立しています。
メリット
- 体感速度の向上 — 各ルートが独立してストリーミングされます。
- エラーの分離 — 1つのルートでエラーが発生してもページ全体が壊れません。
- 型安全 — TypeScriptが各スロットをチェックします。
提示词解读
Next.js 15中成为稳定版的Parallel Routes，可以在一个布局内同时渲染多个页面。每个路由都是独立的，可以拥有自己的加载骨架屏、错误边界以及不同的数据获取策略。它非常适合仪表盘、管理后台或需要组合独立区块的UI场景。
快速设置
在app目录内创建以 @ 为前缀的文件夹（例如：app/@analytics/page.tsx、app/@team/page.tsx）。然后更新 app/layout.tsx，将这些插槽作为props接收。
在线演示
在上面的演示中，@analytics 模拟了慢速数据库查询并显示加载动画，而 @team 则立即渲染。两者共享同一个父布局，但完全独立。
优势
- 提升感知速度 — 每个路由独立流式传输。
- 错误隔离 — 一个路由出错不会导致整个页面崩溃。
- 类型安全 — TypeScript会检查每个插槽。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選