Prinsip Asas Kerja Framework NextJS

Dalam pelajaran sebelumnya, kami memasang framework NextJS dan berkenalan dengan struktur asasnya. Sekarang tiba masanya untuk melakukan kerja utama.

Bahagian utama NextJS ialah penghalaan. Penghalaan berfungsi seperti ini: apabila pengguna menaip URL tertentu ke dalam bar alamat pelayar, framework NextJS akan menghantar fail tertentu ke pelayar, yang sepadan dengan URL tersebut.

Penghalaan dalam NextJS disusun dengan cara yang istimewa. Intipatinya ialah setiap URL yang diminta sepadan dengan beberapa folder di dalam src/app.

Pada masa yang sama, di dalam folder mesti ada fail bernama page.jsx. Fail inilah yang akan dihantar ke pelayar. Dan dalam fail ini, kami akan menulis kod dalam JSX, dan ke pelayar akan dihantar kod HTML siap bagi halaman tersebut.

Mari kita lihat contoh. Katakan kita mahu URL /test/ menghasilkan beberapa teks.

Mari buat folder yang sepadan: src/app/test. Di dalam folder ini, buat fail page.jsx dengan kandungan berikut:

src/app/test/page.jsxexport default function Test() {
  return <h1>hello, user!</h1>;
}

Buka URL kami dalam pelayar: /test. Dan anda akan melihat teks yang ditulis oleh kami di dalam fail JSX.

Cuba ubah teks dan simpan fail. Selepas itu, teks akan secara automatik berubah dalam pelayar. Beginilah cara NextJS berfungsi dalam mod pembangunan.