Amalan Terbaik: Struktur Folder NextJS 13

Question

Saya sedang belajar menggunakan NextJS dan menggunakan versi terkini App Router dan pada masa ini saya buntu tentang cara melakukan penghalaan seperti di mana untuk meletakkan halaman pendaftaran dan log masuk serta struktur foldernya secara umum di mana saya hendak meletakkan komponen dan cara Meletakkan bersama-sama komponen lain yang berkaitan, bolehkah anda memberi sedikit pencerahan tentang topik ini dan sila buat ia semudah mungkin, mungkin berikan beberapa contoh kerana saya masih belajar, sebarang bantuan akan sangat dihargai, terima kasih!

Answer 1

Saya rasa membaca bahagian ini dalam dokumen seterusnya akan membantu anda menyusun folder projek anda:

https://nextjs.org/docs/app/building-your-app/routing/hosting

Saya mencuba banyak struktur yang berbeza dan akhirnya berjaya menggunakan yang ini:

1. Semuanya (semua folder dan fail) akan berada dalam direktori /app kerana direktori /app menerima colocation dan ia berbeza daripada direktori /pages yang hanya digunakan untuk tujuan penghalaan. Dengan cara ini direktori /app boleh diandaikan sebagai direktori /src baharu.

2. Semua folder yang tidak dihalakan akan dijadikan peribadi dengan meletakkan awalan nama mereka dengan garis bawah (seperti yang dinyatakan dalam pautan di atas). Ini memberitahu penghala seterusnya bahawa folder itu bukan sebahagian daripada laluan. (cth. _komponen, _libs,...)

3. Pada ketika ini, kami telah menentukan bahawa setiap folder dengan garis bawah (_) bukan laluan dan folder lain tanpa garis bawah adalah sebahagian daripada sistem penghalaan (walaupun folder yang mengandungi fail page.tsx atau page.js adalah sebahagian daripada daripada sistem penghalaan (syarat lain untuk menjadi sebahagian daripada sistem penghalaan), tetapi saya menggunakan ciri 13 Seterusnya yang lain, iaitu kumpulan penghalaan (seperti yang dinyatakan dalam pautan di atas). Ia menyertakan nama folder dalam kurungan supaya folder itu muncul untuk tujuan organisasi (folder kumpulan) dan tidak boleh disertakan dalam laluan URL laluan, contohnya (laluan).

Mengikut prinsip ini, saya meletakkan semua folder yang diperlukan dalam direktori /app dan menggunakan kumpulan laluan untuk mengumpulkan semua laluan saya ke dalam folder "(laluan)", menggunakan folder peribadi dengan meletakkannya di hadapan folder bukan laluan Tambah awalan garis bawah dan semuanya diasingkan.

Gambar di bawah adalah ringkasan semua perkara di atas.

Semoga pautan ini dan cara saya menyusun folder projek saya dapat membantu anda.