Dalam proses pengembangan aplikasi web, mengelola halaman dan menavigasi di antaranya merupakan aspek yang sangat penting. Dalam seri artikel ini, kita akan mendalami dasar-dasar membuat halaman dan mengimplementasikan navigasi di Next.js. Konsep dasar ini sangat penting untuk membangun aplikasi web yang fleksibel dan dapat dikelola.
Membuat dan Menampilkan Halaman Pertama
Pertama, mari kita pahami cara membuat dan menampilkan halaman sederhana di Next.js. Anda dapat membuat halaman dengan membuat file di dalam pages direktori proyek Anda. Misalnya, untuk membuat halaman selamat datang, Anda dapat membuat file dengan nama welcome.js di dalam pages direktori.
// pages/welcome.js
function WelcomePage() {
return <h1>Welcome to Next.js!</h1>;
}
export default WelcomePage;
Dalam cuplikan kode di atas, kami telah membuat halaman selamat datang sederhana. Saat Anda mengakses /welcome jalur di browser web, Anda akan melihat pesan "Selamat datang di Next.js !" ditampilkan.
Dasar Routing
Next.js menawarkan sistem yang kuat dan intuitif routing yang memudahkan navigasi antar halaman. Routing in Next.js didasarkan pada pages direktori, dengan setiap file dalam direktori ini sesuai dengan jalur tertentu. Misalnya, file bernama about.js di dalam pages direktori akan membuat halaman yang dapat diakses di /about jalur.
Membuat Tautan dan Navigasi
Untuk membuat tautan antar halaman dan menavigasi di antara halaman tersebut, kita dapat menggunakan <Link> komponen dari next/link pustaka. Di bawah ini adalah contoh pembuatan link 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;
Pada contoh di atas, saat Anda mengeklik tautan "Pelajari lebih lanjut tentang kami", Anda akan dialihkan ke /about laman tersebut.
Kesimpulan
Di bagian ini, kita telah mempelajari cara membuat dan menampilkan halaman sederhana Next.js dan cara menerapkan navigasi antar halaman menggunakan pages direktori dan <Link> komponen. Ini adalah langkah awal yang penting dalam membangun sebuah Next.js aplikasi. Dalam artikel mendatang, kami akan terus mengeksplorasi aspek lain dalam Next.js membangun aplikasi web yang dinamis dan interaktif.