Next.js 15 Parallel Routes: ejemplo de prompt generado con IA
VISTA DE CÓDIGO
Prompt
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が各スロットをチェックします。
Resumen del prompt
La función Parallel Routes, estable en Next.js 15, permite renderizar múltiples páginas simultáneamente dentro de un mismo diseño. Cada ruta es independiente y puede tener su propio esqueleto de carga, límites de error y estrategias de obtención de datos. Es ideal para paneles de control, interfaces de administración y UI que combinan secciones independientes.
Configuración rápida
Crea carpetas con el prefijo @ dentro del directorio app (por ejemplo, app/@analytics/page.tsx, app/@team/page.tsx). Luego, actualiza app/layout.tsx para recibir estos slots como props.
Demostración en vivo
En la demostración anterior, @analytics simula una consulta lenta a la base de datos mostrando una animación de carga, mientras que @team se renderiza instantáneamente. Ambos comparten el mismo diseño principal, pero son completamente independientes.
Beneficios
- Mejora de la velocidad percibida — Cada ruta se transmite de forma independiente.
- Aislamiento de errores — Un error en una ruta no rompe toda la página.
- Seguridad de tipos — TypeScript verifica cada slot.
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選