NextJs: Bagaimana untuk mencipta fail susun atur khusus untuk halaman indeks

Memahami Reka Letak Seterusnya.js dan Pengumpulan Laluan

Dalam Next.js, direktori apl berfungsi sebagai asas untuk penghalaan dan struktur reka letak aplikasi anda. Dalam direktori ini, anda biasanya akan menemui fail layout.jsx dan page.jsx.

Reka Letak Akar (app/layout.jsx)
Tujuan: Layout.jsx pada akar folder apl bertindak sebagai reka letak akar. Ini bermakna semua halaman (komponen kanak-kanak) yang dipaparkan dalam reka letak ini akan digunakan pada semua laluan melainkan dinyatakan sebaliknya.

Reka Letak Khusus untuk Halaman Utama
Kadangkala, anda mungkin mahu halaman akar atau indeks (/) mempunyai reka letak khusus sendiri, berbeza daripada yang global. Begini cara anda boleh mencapainya menggunakan Pengumpulan Laluan:

*Penyelesaian: * Menggunakan Pengumpulan Laluan
Pengumpulan Laluan dalam Next.js membolehkan anda mengatur laluan anda dengan cara yang tidak menjejaskan struktur URL. Begini cara untuk melaksanakannya:

Struktur Direktori:

app
├── layout.jsx         # Root layout for all pages
└── (home)
    ├── layout.jsx     # Dedicated layout for the root ('/') page
    ├── page.jsx       # The index or root page

*Butiran Pelaksanaan: *
Penamaan Folder: Gunakan kurungan () di sekeliling nama folder untuk menunjukkan ia untuk pengumpulan laluan. Dalam kes ini, (rumah) tidak menukar laluan URL; halaman masih boleh diakses di '/'.
Memindahkan Fail: Alihkan page.jsx ke dalam folder (rumah) dan buat susun atur.jsx di dalam folder ini untuk reka letak khusus untuk halaman ini sahaja.

*Dengan melakukan ini: *

Reka letak global (app/layout.jsx) akan digunakan pada semua laluan lain kecuali '/'.
Reka letak khusus (app/(home)/layout.jsx) hanya akan digunakan pada laluan akar, membenarkan penggayaan atau gelagat unik hanya untuk halaman utama.

*Faedah: *

Modulariti: Anda boleh menyesuaikan pengalaman setiap laluan atau kumpulan laluan secara berasingan.
SEO dan UX: Reka letak yang berbeza boleh mengoptimumkan untuk SEO atau meningkatkan pengalaman pengguna pada halaman tertentu.

*Pertimbangan: *

Pastikan konvensyen penamaan untuk kumpulan laluan (menggunakan kurungan) dipatuhi dengan ketat untuk mengelakkan isu penghalaan.

Pendekatan ini bukan sahaja memastikan struktur direktori anda bersih tetapi juga membenarkan reka bentuk yang fleksibel di mana setiap segmen tapak anda boleh mempunyai personaliti atau strukturnya sendiri tanpa menjejaskan laluan URL.

Jangan ragu untuk menyesuaikannya dengan lebih lanjut berdasarkan kes penggunaan khusus anda.

Atas ialah kandungan terperinci NextJs: Bagaimana untuk mencipta fail susun atur khusus untuk halaman indeks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!