Membuat Komponen Layout pada Next.js

Belajar Menambahkan Komponen Navbar dan Footer ke setiap komponen halaman Next.js.

Membuat Komponen Layout pada Next.js

Pada pembelajaran kali ini, penulis akan menunjukkan cara membuat komponen Layout pada Next.js. Sebelum melanjutkan, pastikan kalian telah membaca Bagian ke-empat dari pembelajaran ini.

Pada bagian sebelumnya, kita telah berhasil membuat Dropping Component yaitu Navbar dan Footer yang juga telah kita masukkan kedalam halaman utama (Homepage). Kita juga dapat memasukkan kedua Dropping Component tersebut ke setiap komponen halaman yang ada dengan cara sama seperti yang telah penulis tunjukkan sebelumnya - yaitu dengan memasukkan Komponen Navbar dan Footer satu persatu (Copy - Paste). 

Tetapi, memasukkan Dropping Component dengan cara menyalin dan mempastekannya satu-persatu kedalam halaman yang berbeda bukanlah cara yang mudah dan tidaklah realistis. Bayangkan jika kalian mulai memproduksi aplikasi Next.js yang pastinya akan memiliki komponen halaman yang bisa dibilang cukup banyak. Tentu saja hal itu dapat memakan banyak waktu dan merepotkan bukan?

Nah, disini kita akan membahas solusinya dengan membut Komponen Layout.


Membuat Layout Component

Untuk membuat komponen Layout, buatlah sebuah file bernama Layout.js didalam folder komponen:

Membuat Layout Component

Kemudian didalam file Layout.js, kita perlu membuat Stateless Functional Component (SFC) sehingga kode didalamnya terlihat seperti berikut:


const Layout = () => {
    return (

    );
}
 
export default Layout;

Selanjutnya, bukalah file _app.js yang ada di dalam folder pages. Disini, kita perlu meng-import dan mengelilingi <Component {...pageProps} /> dengan komponen Layout yang telah kita buat diatas. Hapus semua kode yang ada didalam file _app.js dan pastekan kode berikut kedalamnya:


import '../styles/globals.css';
import Layout from '../komponen/Layout'

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;


Pada kode diatas, sebenarnya kita hanya mengubah baris kode:


return <Component {...pageProps} />

Menjadi:


return (
  <Layout>
    <Component {...pageProps} />
  </Layout>
);


Perlu diperhatikan juga bahwasannya kita telah mengimport file Layout.js yang berada pada direktori ../komponen/Layout.js:


import Layout from '../komponen/Layout'

Baris kode yang kita ubah diatas dinamakan dengan Children Component yang sama halnya seperti pada React.

Kembali lagi ke file Layout.js. Disini, kita perlu mengakses Props Children:


const Layout = ( { children } ) => {

Props atau properti children diatas pada dasarnya adalah segala hal yang ada pada <Component {...pageProps} /> yang berada di dalam file _app.js.

Selanjutnya, kita perlu memberikan Output untuk Props Children berupa Navbar di bagian atas dan Footer di bagian bawah pada file Layout.js sehingga keseluruhan kodenya menjadi seperti berikut:


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

const Layout = ( { children } ) => {
    return (
        <div className="konten">
            <Navbar />
            { children }
            <Footer />
        </div>
    );
}
 
export default Layout;


Pada kode diatas, kita telah meng-import Navbar dan Footer. Sebagai Outputnya, kita telah membuat elemen div yang akan memiliki atribut class="konten". Didalamnya, terdiri dari komponen Navbar > Props Children > Footer.

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

Hasil

Kita telah melihat bahwasanya terdapat Navbar dan Footer duplikat/double. Itu karena kita masih meletakkan Komponen Navbar dan Footer yang ada pada file index.js dalam folder pages. Disini, kita perlu menghapusnya sehingga keseluruhan kode dari file index.js akan terlihat seperti berikut:


export default function Home() {
  return (
    <main>
      <h1>Selamat Datang di EL Creative Academy</h1>
    </main>
  )
}

Hasilnya akan seperti berikut:

Hasilnya Akhir

Sekarang, kita telah berhasil memasukkan komponen Navbar dan Footer ke setiap komponen halaman yang ada dengan cara yang sangat mudah dan tanpa memakan banyak waktu.

Sebagai pengingat, hal itu dapat terjadi karena kita telah mengelilingi semua komponen yang ada dengan file Layout di dalam file _app.js. Kemudian pada file Layout.js didalam folder komponen, kita telah mereferensikan semua komponen dengan properti children. Sangat masuk akal dan mudah bukan?

Sampai disini penulis berharap kalian dapat memahaminya dengan mudah.

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