Prinsip Dasar Cara Kerja Framework NextJS

Dalam pelajaran sebelumnya, kita telah menginstal framework NextJS dan berkenalan dengan struktur dasarnya. Sekarang saatnya untuk melakukan pekerjaan utama.

Bagian utama dari NextJS adalah routing. Cara kerja routing adalah: ketika pengguna mengetikkan suatu URL ke dalam address bar browser, framework NextJS akan menyajikan file tertentu ke browser, yang sesuai dengan URL tersebut.

Routing di NextJS diatur dengan cara khusus. Intinya adalah bahwa setiap URL yang diminta sesuai dengan suatu folder di dalam src/app.

Selain itu, di dalam folder harus ada file dengan nama page.jsx. File inilah yang akan disajikan ke browser. Dan dalam file ini kita akan menulis kode dalam JSX, sedangkan ke browser akan dikirimkan kode HTML halaman yang sudah jadi.

Mari kita lihat contohnya. Misalkan kita ingin agar pada URL /test/ disajikan suatu teks.

Kita buat folder yang sesuai: src/app/test. Di dalam folder ini, kita buat file page.jsx dengan konten berikut:

export default function Test() {
	return <h1>hello, user!</h1>;
}

Buka URL kita di browser: /test. Dan Anda akan melihat teks yang ditulis oleh kita di dalam file JSX.

Coba ubah teksnya dan simpan file. Setelah itu, teks akan secara otomatis berubah di browser juga. Begitulah cara kerja NextJS dalam mode pengembangan.

Buatlah agar ketika mengakses alamat /about, browser menampilkan pesan dengan nama dan nama belakang Anda.