Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) · Pelajaran

Laluan Selari dengan Slot Bernama dan Segmen Lalai

Paparkan berbilang pepohon laluan bebas secara serentak menggunakan konvensyen @slot dan default.tsx.

Pelajaran 1 daripada 413 langkah

Laluan Selari dengan Slot Bernama dan Segmen Lalai ialah pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.

Apakah Itu Parallel Routes?

Parallel Routes ialah ciri App Router Next.js yang membolehkan Anda memaparkan berbilang segmen laluan bebas secara serentak dalam satu susun atur. Setiap segmen berada dalam slot bernama sendiri dan boleh menavigasi, dimuatkan serta mengalami ralat secara berasingan.

Bayangkan papan pemuka dengan bar sisi, panel utama dan suapan pemberitahuan — semuanya dimuatkan secara selari, setiap satunya dengan keadaan pemuatan atau ralat sendiri.
Laluan selari ditakrifkan menggunakan konvensyen penamaan @folder dalam direktori segmen laluan.
Setiap slot menjadi prop pada layout.tsx induk.

Ini berbeza sama sekali daripada susun atur bersarang: slot selari berkongsi URL yang sama tetapi memaparkan pepohon laluan berasingan bersebelahan.

Konvensyen @slot

Untuk mencipta slot selari, letakkan awalan @ pada folder dalam mana-mana segmen laluan. Next.js menganggap folder ini sebagai slot bernama dan bukannya segmen URL.

app/dashboard/@analytics/page.tsx → slot bernama analytics
app/dashboard/@team/page.tsx → slot bernama team
Nama @folder tidak muncul dalam URL — apabila /dashboard dilawati, semua slot yang sepadan akan dipaparkan.

Pepohon direktori laluan selari yang biasa kelihatan seperti ini:

// Directory layout (not runnable — filesystem structure)
// app/
//   dashboard/
//     layout.tsx          <- receives @analytics and @team as props
//     page.tsx            <- default slot content (children)
//     @analytics/
//       page.tsx
//       loading.tsx
//     @team/
//       page.tsx
//       error.tsx

Menulis Susun Atur Selari

layout.tsx induk menerima setiap slot bernama sebagai prop React di samping prop children standard. Anda boleh meletakkannya di mana-mana dalam JSX.

Jenis TypeScript untuk slot hanyalah React.ReactNode.
Slot adalah bebas sepenuhnya — satu slot boleh ditangguhkan sementara slot lain sudah dipaparkan.
Prop children itu sendiri ialah slot tersirat bernama children.

// app/dashboard/layout.tsx
import React from 'react';

interface DashboardLayoutProps {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}

export default function DashboardLayout({
  children,
  analytics,
  team,
}: DashboardLayoutProps) {
  return (
    <div className="dashboard-grid">
      <main className="col-span-2">{children}</main>
      <aside className="analytics-panel">{analytics}</aside>
      <aside className="team-panel">{team}</aside>
    </div>
  );
}

Mencipta Halaman Slot

Setiap slot bernama memerlukan page.tsx sendiri. Halaman ini ialah Server Components standard (atau Client Components) — tiada perkara istimewa pada struktur dalamannya.

Slot boleh mempunyai loading.tsx, error.tsx dan laluan bersarang sendiri.
Pemerolehan data dalam slot adalah bebas: satu slot boleh await pangkalan data yang perlahan tanpa menyekat slot lain.

// app/dashboard/@analytics/page.tsx
import { getAnalyticsSummary } from '@/lib/analytics';

export default async function AnalyticsSlot() {
  const summary = await getAnalyticsSummary();

  return (
    <section>
      <h2 className="text-lg font-semibold">Analytics</h2>
      <p>Total visits: <strong>{summary.totalVisits}</strong></p>
      <p>Conversion rate: <strong>{summary.conversionRate}%</strong></p>
    </section>
  );
}

// app/dashboard/@team/page.tsx
import { getTeamMembers } from '@/lib/team';

export default async function TeamSlot() {
  const members = await getTeamMembers();

  return (
    <ul>
      {members.map((m) => (
        <li key={m.id}>{m.name} — {m.role}</li>
      ))}
    </ul>
  );
}

Keadaan Pemuatan Bebas

Setiap slot boleh menghantar loading.tsx sendiri. Next.js membungkusnya dalam sempadan Suspense secara automatik, jadi slot distrim secara bebas — slot yang pantas muncul serta-merta manakala slot yang perlahan memaparkan rangka sementara.

Ini menghapuskan masalah air terjun yang biasa berlaku dalam susun atur satu pepohon.
Pengguna melihat antara muka yang bermakna dengan lebih cepat kerana kandungan separa dipaparkan terlebih dahulu.

// app/dashboard/@analytics/loading.tsx
export default function AnalyticsLoading() {
  return (
    <div className="animate-pulse space-y-2">
      <div className="h-4 bg-gray-200 rounded w-1/2" />
      <div className="h-4 bg-gray-200 rounded w-3/4" />
      <div className="h-4 bg-gray-200 rounded w-2/3" />
    </div>
  );
}

// app/dashboard/@team/loading.tsx
export default function TeamLoading() {
  return (
    <ul className="space-y-2">
      {Array.from({ length: 4 }).map((_, i) => (
        <li key={i} className="h-4 bg-gray-200 rounded animate-pulse" />
      ))}
    </ul>
  );
}

Masalah: Navigasi Lembut dan Slot yang Hilang

Laluan selari sangat berguna semasa navigasi keras (pemuatan halaman penuh), tetapi navigasi lembut (klik pautan pada klien) mendedahkan satu masalah.

Apabila pengguna menavigasi ke sublaluan — contohnya /dashboard/settings — Next.js mencari halaman yang sepadan dalam setiap slot aktif. Jika slot tidak mempunyai halaman untuk /settings, slot itu menjadi tidak sepadan.

Slot yang tidak sepadan tidak hilang begitu sahaja — Next.js perlu tahu perkara yang hendak dipaparkan.
Tanpa sandaran, Next.js memaparkan 404 untuk keseluruhan halaman.
Penyelesaiannya ialah default.tsx.

Menyelamatkan Slot Tidak Sepadan dengan default.tsx

default.tsx ialah fail sandaran yang dipaparkan oleh Next.js untuk sesuatu slot apabila slot itu tidak mempunyai page.tsx yang sepadan dengan URL semasa. Fail ini bertindak seperti penangkap semua dalam subpepohon slot tersebut.

Letakkan default.tsx pada akar setiap slot: @analytics/default.tsx.
Semasa navigasi lembut ke sublaluan yang tidak sepadan, Next.js memaparkan default.tsx dan bukannya menghasilkan ralat 404.
default.tsx menerima params yang sama seperti halaman; Anda boleh menggunakannya untuk memaparkan kandungan biasa slot tanpa perubahan, atau ruang letak yang bermakna.

// app/dashboard/@analytics/default.tsx
// Rendered when the current URL has no matching page in this slot.
import { getAnalyticsSummary } from '@/lib/analytics';

export default async function AnalyticsDefault() {
  // Reuse the same data as the main analytics page so the slot
  // stays visible during navigation to other sub-routes.
  const summary = await getAnalyticsSummary();

  return (
    <section>
      <h2 className="text-lg font-semibold">Analytics</h2>
      <p>Total visits: <strong>{summary.totalVisits}</strong></p>
    </section>
  );
}

default.tsx untuk Slot children Akar

Slot children tersirat (iaitu page.tsx pada akar segmen) juga memerlukan default.tsx apabila slot selari wujud. Tanpanya, navigasi ke sublaluan slot bernama yang tidak sepadan dengan children akan menghasilkan ralat 404.

Tambahkan app/dashboard/default.tsx di samping app/dashboard/page.tsx.
Biasanya fail ini memaparkan semula kandungan yang sama seperti page.tsx, atau keadaan kosong yang neutral.

// app/dashboard/default.tsx
// Fallback for the implicit 'children' slot during soft navigation.
export default function DashboardDefault() {
  return (
    <div>
      <h1 className="text-2xl font-bold">Dashboard</h1>
      <p className="text-gray-500">Select an item to get started.</p>
    </div>
  );
}

Laluan Bersarang Dalam Ruang

Ruang bernama menyokong hierarki laluan bersarangnya sendiri. Anda boleh menambah segmen dinamik [id], kumpulan laluan atau susun atur tambahan sepenuhnya di dalam sesuatu ruang — semuanya tanpa menjejaskan segmen URL ruang sebaris yang lain.

Contoh: @analytics/chart/[chartId]/page.tsx dipaparkan di /dashboard/chart/42 hanya di dalam ruang analitik.
Susun atur induk dan ruang lain kekal tidak berubah.
Setiap aras bersarang dalam ruang boleh mempunyai loading.tsx, error.tsx dan default.tsx sendiri.

// app/dashboard/@analytics/chart/[chartId]/page.tsx
interface Props {
  params: Promise<{ chartId: string }>;
}

export default async function ChartDetailPage({ params }: Props) {
  const { chartId } = await params;

  // In a real app, fetch chart data here
  return (
    <div>
      <h3>Chart #{chartId}</h3>
      <p>Detailed breakdown for chart {chartId}.</p>
    </div>
  );
}

// app/dashboard/@analytics/chart/[chartId]/default.tsx
export default function ChartDefault() {
  return <p className="text-sm text-gray-400">No chart selected.</p>;
}

Corak Praktikal: Tetingkap Modal Di Samping Halaman

Salah satu kegunaan klasik laluan selari ialah memaparkan tetingkap modal dalam satu ruang sementara kandungan utama kekal kelihatan dalam ruang lain — tanpa kehilangan kedudukan skrol semasa atau menyahlekap komponen.

Cipta ruang @modal dengan default.tsx yang mengembalikan null (tiada apa-apa dipaparkan secara lalai).
Apabila pengguna mengklik pencetus, Next.js menavigasi ke halaman tetingkap modal lalu mengisi ruang tersebut.
Ruang children utama terus dipaparkan tanpa perubahan.

// app/dashboard/@modal/default.tsx
// Renders nothing when no modal route is matched.
export default function ModalDefault() {
  return null;
}

// app/dashboard/@modal/user/[id]/page.tsx
interface Props {
  params: Promise<{ id: string }>;
}

export default async function UserModal({ params }: Props) {
  const { id } = await params;
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
      <div className="bg-white rounded-lg p-6 w-96">
        <h2 className="text-xl font-bold">User #{id}</h2>
        <p>Profile details would appear here.</p>
      </div>
    </div>
  );
}

Petua TypeScript: Props Ruang yang Ditaip Dengan Kukuh

Apabila bilangan ruang bertambah, nyatakan props susun atur dengan jelas menggunakan antara muka TypeScript khusus. Ini menjadikan pemfaktoran semula lebih selamat dan pelengkapan automatik IDE lebih membantu.

Props ruang sentiasa berupa React.ReactNode — props ini menerima apa-apa nilai yang boleh dipaparkan yang disuntik oleh Next.js.
Anda boleh menggabungkan ruang selari dengan searchParams atau params laluan dalam tandatangan susun atur yang sama.
Untuk konfigurasi ruang yang dikongsi (contohnya, tema), hantarkan konteks melalui React Context Provider di dalam susun atur, bukannya meneruskan props secara berantai melalui setiap halaman ruang.

// app/dashboard/layout.tsx — full typed version
import React from 'react';
import { DashboardNav } from '@/components/DashboardNav';

interface DashboardLayoutProps {
  children: React.ReactNode;   // implicit slot
  analytics: React.ReactNode;  // @analytics slot
  team: React.ReactNode;       // @team slot
  modal: React.ReactNode;      // @modal slot
  params: Promise<{ orgId: string }>;
}

export default async function DashboardLayout({
  children,
  analytics,
  team,
  modal,
  params,
}: DashboardLayoutProps) {
  const { orgId } = await params;

  return (
    <>
      <DashboardNav orgId={orgId} />
      <div className="grid grid-cols-3 gap-4 p-4">
        <div className="col-span-2">{children}</div>
        <div className="space-y-4">
          {analytics}
          {team}
        </div>
      </div>
      {modal}
    </>
  );
}

Semakan Pengetahuan: Bilakah default.tsx Diperlukan?

Uji pemahaman anda tentang fail default.tsx dalam laluan selari.

Jawab dalam pelajaran interaktif

Imbas Kembali: Laluan Selari dengan Ruang Bernama dan Segmen Lalai

Inilah perkara yang telah anda pelajari dalam pelajaran ini:

Laluan Selari membolehkan anda memaparkan berbilang pepohon laluan bebas dalam susun atur yang sama secara serentak, setiap satunya dalam folder @slot sendiri.
Ruang bernama menggunakan konvensyen @folderName dan menjadi props (React.ReactNode) pada layout.tsx induk.
Setiap ruang benar-benar bebas: ruang tersebut boleh mempunyai loading.tsx, error.tsx, laluan bersarang dan pengambilan data sendiri tanpa menyekat ruang sebaris yang lain.
default.tsx ialah fail sandaran yang penting. Tanpanya, navigasi lembut ke URL yang tidak sepadan dengan ruang akan menghasilkan 404. Letakkan default.tsx dalam setiap ruang — termasuk ruang children tersirat — untuk mencegah perkara ini.
Corak lazim termasuk berbilang panel papan pemuka (analitik + pasukan bersebelahan) dan tetingkap modal di samping halaman, apabila default.tsx ruang @modal mengembalikan null.
Pastikan props susun atur ditaip dengan kukuh menggunakan antara muka TypeScript apabila bilangan ruang bertambah.

Dengan laluan selari dan default.tsx yang tersedia, susun atur anda menjadi lebih tahan lasak, boleh menstrim secara bebas dan jauh lebih mudah difahami berbanding satu pepohon laluan monolitik.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Laluan Selari dengan Slot Bernama dan Segmen Lalai” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), termasuk “Laluan Selari dengan Slot Bernama dan Segmen Lalai”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Laluan Selari dengan Slot Bernama dan Segmen Lalai”?

Paparkan berbilang pepohon laluan bebas secara serentak menggunakan konvensyen @slot dan default.tsx. Anda berlatih Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Laluan Selari dengan Slot Bernama dan Segmen Lalai” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) ini?

Ya. Setiap pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Laluan Selari dengan Slot Bernama dan Segmen Lalai
Laluan Pintasan untuk Pengalaman Modal Dikongsi
Pemaparan Slot Bersyarat untuk Papan Pemuka dan Tab
Membina Aliran Modal Foto dengan Navigasi Lembut

← Kembali ke Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)