Menghubungkan Setiap Komponen Halaman pada Next.js

Pada pembelajaran kali ini, penulis akan menunjukkan cara menghubungkan setiap komponen halaman (Linking Pages) pada Next.js. Sebelum melanjutkan, pastikan kalian telah membaca Bagian ke-tiga dari pembelajaran ini.

Sampai dengan bagian keempat ini, kita telah memiliki beberapa halaman yang berbeda. Kita juga telah membuat komponen Navbar dan Footer.

Dibagian sebelumnya, kita telah membuat komponen Navbar dengan Anchor Tag/Link yang belum memiliki atribut href. Disini, kita akan belajar memasukkan atribut href kedalamnya.


Untuk mengubungkan setiap komponen halaman pada Next.js, kita dapat menggunakan komponen spesial yang disebut dengan komponen link (Link Component). Komponen Link tersebut memiliki kemampuan untuk dapat menavigasikan halaman di sisi client (Client-Side) pada Browser.

Artinya, setiap halaman akan dimuat melalui JavaScript dan bukan Request HTML baru dari Server. Jadi, hal ini dapat menjadi salah satu faktor dari performa suatu website ketika berpindah halaman.

Untuk menggunakan Link Component, kita perlu meng-import Link Component dari Next.js. Masukkan kode berikut kedalam file Navbar.js pada folder komponen tepat dibagian atas kode:


import Link from "next/link"

Sehingga keseluruhan kode dari file Navbar.js akan terlihat seperti berikut:


import Link from "next/link"

const Navbar = () => {
    return (
        <nav>
            <div className="logo">
                <h1>Blog EL Creative</h1>
            </div>

            <a>Home</a>
            <a>Tentang</a>
            <a>Postingan</a>
        </nav>
    );
}
 
export default Navbar;

Selanjutnya, kita perlu mengelilingi Anchor Tag yang tidak memiliki atribut href dengan komponen Link, sehingga kodenya akan seperti berikut:


        ...
            ...
                ...
            ...

            <Link><a>Home</a></Link>
            <Link><a>Tentang</a></Link>
            <Link><a>Postingan</a></Link>
        ...

Kemudian, kita juga perlu menentukan atribut href pada setiap komponen Link sehingga kodenya akan berubah menjadi seperti berikut:


        ...
            ...
                ...
            ...

            <Link href="/"><a>Home</a></Link>
            <Link href="/tentang"><a>Tentang</a></Link>
            <Link href="/postingan"><a>Postingan</a></Link>
        ...

Keterangan:

  • Link Home tertuju pada URL Homepage yaitu index.js;
  • Link Tentang tertuju pada URL komponen halaman tentang yaitu tentang.js;
  • Link Postingan tertuju pada URL komponen halaman postingan yaitu /postingan/tentang.js.

Berikut adalah keseluruhan kode dari file Navbar.js:


import Link from "next/link"

const Navbar = () => {
    return (
        <nav>
            <div className="logo">
                <h1>Blog EL Creative</h1>
            </div>

            <Link href="/"><a>Home</a></Link>
            <Link href="/tentang"><a>Tentang</a></Link>
            <Link href="/postingan"><a>Postingan</a></Link>
        </nav>
    );
}
 
export default Navbar;

Hasil dari kode diatas jika dilihat pada Browser akan seperti berikut:

Link Component

Sekarang, kita telah berhasil membuat Link Component.

Code Splitting

Secara Default, Next.js akan secara otomatis membagi kode (Code Splitting) aplikasi kita. Jadi, hanya kode JavaScript yang diperlukan yang akan disediakan dari Server.

Ketika kita berpindah halaman, maka Server akan menyediakan kode JavaScript untuk halaman yang diperlukan. Kita dapat membuktikannya dengan membuka Developer Tools pada Browser, kemudian pilih Tab Network/Jaringan.

Sekarang, jika kita berpindah halaman (Misalnya dari halaman utama ke halaman Tentang), maka kita akan melihat file tentang.js yang termuat:

Code Splitting

Itulah yang dinamakan dengan JavaScript Bundle yang dapat mengontrol masing-masing halaman yang ada.

Jika kita berpindah dari halaman Tentang ke halaman lainnya, maka kodenya akan terbagi. Artinya, hanya kode JavaScript yang diperlukan untuk dapat disediakan.

Sekali lagi, setiap komponen halaman memiliki JavaScript Bundle-nya masing-masing yang dapat mengontrol halaman tersebut dan dan hanya disediakan ketika kita menavigasikan atau membuka halaman tersebut untuk pertama kali (Hanya sekali).

Ketika kita mulai memproduksi aplikasi, Next.js juga akan melakukan Prefetch pada semua kode pada Background. Jadi, ketika terdapat pengguna mengeklik salah satu link untuk berpindah halaman. Maka halaman tersebut akan langsung tersedia.

Sampai disini penulis berharap kalian dapat memahaminya dengan mudah.

Kalian dapat melihat Source Code yang telah kita pelajari dari bagian ini pada Branch Bagian-4 Repository GitHub.

Jika artikel ini bermanfaat, silahkan bagikan kepada teman-teman atau saudara kalian. Jika kalian memiliki pertanyaan, silahkan tulis pada kolom komentar. Terimakasih telah berkunjung di EL Creative Academy.

Diskusikan

0 Diskusi