Dalam proses pembangunan aplikasi web, mengurus halaman dan menavigasi antara mereka adalah aspek yang penting. Dalam siri artikel ini, kami akan menyelidiki asas-asas mencipta halaman dan melaksanakan navigasi dalam Next.js. Konsep asas ini penting untuk membina aplikasi web yang fleksibel dan boleh diurus.
Mencipta dan Memaparkan Halaman Pertama
Pertama, mari kita fahami cara membuat dan memaparkan halaman mudah dalam Next.js. Anda boleh membuat halaman dengan mencipta fail dalam pages direktori projek anda. Sebagai contoh, untuk membuat halaman alu-aluan, anda boleh mencipta fail bernama welcome.js dalam pages direktori.
// pages/welcome.js
function WelcomePage() {
return <h1>Welcome to Next.js!</h1>;
}
export default WelcomePage;
Dalam coretan kod di atas, kami telah mencipta halaman alu-aluan yang ringkas. Apabila anda mengakses /welcome laluan dalam penyemak imbas web anda, anda akan melihat mesej "Selamat Datang ke Next.js !" dipaparkan.
asas Routing
Next.js menawarkan sistem yang mantap dan intuitif routing yang memudahkan navigasi antara halaman. Routing in Next.js adalah berdasarkan pages direktori, dengan setiap fail dalam direktori ini sepadan dengan laluan tertentu. Sebagai contoh, fail yang dinamakan about.js dalam pages direktori akan mencipta halaman yang boleh diakses di /about laluan.
Mencipta Pautan dan Navigasi
Untuk membuat pautan antara halaman dan menavigasi antara halaman tersebut, kita boleh menggunakan <Link> komponen daripada next/link perpustakaan. Di bawah ialah contoh membuat pautan dari halaman selamat datang ke halaman tentang kami.
// pages/welcome.js
import Link from 'next/link';
function WelcomePage() {
return(
<div>
<h1>Welcome to Next.js!</h1>
<Link href="/about">Learn more about us</Link>
</div>
);
}
export default WelcomePage;
Dalam contoh di atas, apabila anda mengklik pautan "Ketahui lebih lanjut tentang kami", anda akan diubah hala ke /about halaman tersebut.
Kesimpulan
Dalam bahagian ini, kami telah meneroka cara membuat dan memaparkan halaman mudah dalam Next.js dan cara melaksanakan navigasi antara halaman menggunakan pages direktori dan <Link> komponen. Ini adalah langkah awal yang penting dalam membina Next.js aplikasi. Dalam artikel yang akan datang, kami akan terus meneroka aspek lain Next.js untuk membina aplikasi web dinamik dan interaktif.