cari

Rumah >hujung hadapan web >tutorial js >Menguruskan Berbilang Reka Letak dalam Next.js dengan Penghala Apl dan Kumpulan Laluan

Menguruskan Berbilang Reka Letak dalam Next.js dengan Penghala Apl dan Kumpulan Laluan

Mary-Kate Olsen
Mary-Kate Olsenasal
2025-01-17 02:34:11566semak imbas

Managing Multiple Layouts in Next.js with App Router and Route Groups

Dalam Next.js 13, Penghala Apl telah diperkenalkan dengan beberapa ciri menarik, seperti reka letak, sempadan ralat, penunjuk pemuatan dan banyak lagi. Walau bagaimanapun, sesetengah pembangun menghadapi cabaran apabila mengurus berbilang susun atur pada tahap laluan yang sama. Di bawah, saya akan menunjukkan kepada anda cara terbaik untuk menstruktur dan mengekalkan reka letak yang bersih dan mudah untuk senario sedemikian.

Langkah 1: Buat Reka Letak Akar (Pilihan)

Reka letak akar berguna untuk menentukan komponen global atau penyedia konteks untuk keseluruhan apl anda. Walau bagaimanapun, jika apl anda tidak memerlukan konfigurasi global, anda boleh melangkau langkah ini.

// app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <RootProviders>
          {children}
        </RootProviders>
      </body>
    </html>
  );
}

Langkah 2: Tentukan Reka Letak untuk Kumpulan Laluan Tertentu

Andaikan kita memerlukan Pengepala dan Pengaki untuk halaman /home dan /contact. Untuk mencapai matlamat ini, kita boleh menggunakan Kumpulan Laluan Next.js.

Sebagai contoh, kami akan membuat kumpulan laluan yang dipanggil (pemasaran) dan meletakkan halaman kami di dalamnya. Halaman seperti app/(marketing)/home/page.tsx dan app/(marketing)/contact/page.tsx akan menggunakan app/(marketing)/layout.tsx layout.

// app/(marketing)/layout.tsx

export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <Providers>
      <Header />
      <main>{children}</main>
      <Footer />
    </Providers>
  );
}

Langkah 3: Buat Reka Letak untuk Kumpulan Laluan Lain

Begitu juga, untuk halaman seperti /policy dan /tos, kami boleh membuat kumpulan laluan baharu yang dipanggil (sah) dan menentukan reka letak khusus untuknya.

// app/(legal)/layout.tsx

export default function LegalLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <Header />
      <main className="container mx-auto">{children}</main>
    </>
  );
}

Faedah Utama

Menggunakan pendekatan ini, anda boleh:

  1. Kekalkan berbilang susun atur untuk laluan pada tahap yang sama.
  2. Pastikan struktur projek anda bersih dan teratur.
  3. Laksanakan ciri khusus, seperti Analitis Google, untuk reka letak tertentu. Contohnya, anda boleh menambah penjejakan analitis secara khusus dalam LegalLayout untuk halaman seperti /policy dan /tos.

Dengan memanfaatkan Kumpulan Laluan dan Reka Letak, Next.js memperkasakan anda untuk mencipta seni bina modular, berskala dan boleh diselenggara untuk aplikasi anda.

Atas ialah kandungan terperinci Menguruskan Berbilang Reka Letak dalam Next.js dengan Penghala Apl dan Kumpulan Laluan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

define if for require Error using JS this router Other
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Cara menguasai debugging JavaScript untuk apl webArtikel seterusnya：Cara menguasai debugging JavaScript untuk apl web

Artikel berkaitan

Lihat lagi