Menambahkan Komponen pada Next.js

Belajar Membuat Reusable Component seperti React pada Next.js.

Menambahkan Komponen pada Next.js

Pada pembelajaran kali ini, penulis akan menunjukkan cara Menambahkan Komponen baru pada Next.js. Sebelum melanjutkan, pastikan kalian telah membaca Bagian Ke-dua dari pembelajaran ini.


Reusable Component

Sama seperti aplikasi React pada umumnya, Pada Next.js kita dapat membuat komponen yang bukan merupakan komponen halaman (Dropping Component) Contohnya seperti komponen Navbar, Contact Form, dll. yang dapat kita gunakan kembali (Reuse) berkali-kali untuk komponen halaman yang berbeda.

Dropping Component tersebut dapat dibuat didalam direktori manapun. Sekarang, buatlah sebuah folder bernama komponen didalam ROOT project. 

Lalu, buatlah sebuah file bernama Navbar.js (Menggunakan huruf besar/kapital diawal).

Navbar.js

File Navbar.js inilah yang akan menjadi komponen Navbar yang dapat berada di bagian manapun pada halaman yang berbeda. Kemudian masukkanlah kode berikut kedalam Navbar.js:


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;

Pada kode diatas, kita telah membuat sebuah elemen div yang nantinya akan memiliki class="logo". Kemudian kita juga telah membuat tiga Anchor Tag (<a>...</a>) tanpa memiliki atribut href.

Kita tidak memberikan atribut href pada ketiga Anchor Tag diatas karena nantinya akan kita bahas pada bagian Menghubungkan Halaman (Linking Pages).

Nantinya, Anchor Home akan tertuju pada halaman Utama (index.js). Tentang akan tertuju pada halaman Tentang yang telah kita buat pada direktori /pages/tentang.js dan Postingan yang akan tertuju pada halaman Postingan yang telah kita buat pada direktori /postingan/index.js.

Sampai disini, kita telah berhasil membuat komponen untuk Navbar.

Membuat Navbar untuk Komponen Halaman

Kita dapat meletakkan (Dropping) komponen Navbar yang telah kita buat diatas kedalam komponen halaman manapun.

Disini, kita akan menambahkan komponen Navbar kedalam halaman utama (index.js). Bukalah file index.js yang ada didalam folder pages dan importlah Navbar dengan memasukkan kode berikut tepat di bagian atas:


import Navbar from "../komponen/Navbar"

Kemudian tambahkan kode berikut (komponen Navbar) tepat diatas tag <h1>:


<Navbar />

Berikut adalah keseluruhan kode dari file index.js:


import Navbar from "../komponen/Navbar"

export default function Home() {
  return (
    <main>
      <Navbar />

      <h1>Selamat Datang di EL Creative Academy</h1>
    </main>
  )
}

Jika kita buka pada Browser, maka tampilannya akan seperti berikut:

Navbar untuk Komponen Halaman

Kita dapat melakukan hal tersebut seperti halnya membuat aplikasi React. Sederhana bukan?

Selanjutnya, kita akan membuat komponen Footer. Buatlah satu file bernama Footer.js didalam folder komponen (Folder yang sama seperti file Navbar.js).

Komponen Footer.js ini nantinya akan kita letakkan dibagian bawah halaman. Masukkanlah kode berikut kedalam Footer.js:


const Footer = () => {
    return (
        <footer>
            Hak Cipta 2021 - <a href="https://www.elcreativeacademy.com/">EL Creative Academy</a>
        </footer>
    );
}
 
export default Footer;

Disini, kita telah membuat komponen Footer yang sangatlah sederhana. Jangan lupa untuk mengimport dan menambahkan komponen Footer kedalam halaman utam (index.js). Bukalah file index.js yang ada didalam folder pages dan importlah Footer dengan memasukkan kode berikut tepat di bagian bawah import Navbar:


<Footer />

Berikut adalah keseluruhan kode dari file index.js:


import Navbar from "../komponen/Navbar"
import Footer from "../komponen/Footer"

export default function Home() {
  return (
    <main>
      <Navbar />

      <h1>Selamat Datang di EL Creative Academy</h1>

      <Footer />
    </main>
  )
}

Jika dibuka pada Browser, maka tampilannya akan seperti berikut:

Footer

Selain membuat serta meletakkan komponen kedalam komponen halaman index.js, kalian juga dapat meletakkannya kedalam setiap komponen halaman yang caranya sama seperti diatas sehingga kita dapat menggunakan komponen secara berulang-ulang (Reusable).

Sampai disini penulis berharap kalian dapat memahaminya dengan mudah.

Kalian dapat melihat Source Code yang telah kita pelajari dari bagian ini pada Branch Bagian-3 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