Menguruskan Berbilang Reka Letak dalam Next.js dengan Penghala Apl dan Kumpulan Laluan-tutorial js-php.cn

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

Mary-Kate Olsen

Lepaskan： 2025-01-17 02:34:11

asal

565 orang telah melayarinya

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>
  );
}

Salin selepas log masuk

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>
  );
}

Salin selepas log masuk

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>
    </>
  );
}

Salin selepas log masuk

Faedah Utama

Menggunakan pendekatan ini, anda boleh:

Kekalkan berbilang susun atur untuk laluan pada tahap yang sama.
Pastikan struktur projek anda bersih dan teratur.
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!