Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaiamana cara melakukan proses installasi dan menjalankan project Next.js dan sekarang kita akan lanjutkan belajar bagaiamana cara menambahkan CSS Bootstrap di dalam project Next.js.
Bootstrap merupakan CSS framework yang sangat populer dan bersifat open source. Dengan menggunakan Bootstrap kita akan dimudahkan dalam pembuatan sebuah user interface (UI), karena di dalam Bootstrap itu sendiri sudah menyediakan ribuan class yang bisa kita gunakan dengan mudah.
Langkah 1 - Install Bootstrap
Sekarang silahkan masuk ke dalam project Next.js yang sebelumnya sudah kita buat, kemudian jalankan perintah berikut ini di dalam terminal/CMD :
npm install bootstrap@5.1.3
Silahkan tunggu proses installasinya sampai selesai dan pastikan komputer terhubung dengan internet, karena semua paket akan diunduh secara online.
Untuk memastikan apakah Bootstrap berhasil terinstall, teman-teman bisa membuka file package.json, kemudian lihat bagian dependencies. Pastikan Bootstrap sudah ada disitu.
"dependencies": {
//...
"bootstrap": "^5.1.3",
//...
}
Langkah 2 - Konfigurasi Bootstrap di Next.js
Setelah berhasil melakukan installasi, sekarang kita akan lanjutkan untuk melakukan konfigurasi agar CSS Bootstrap ini bisa digunakan secara global di dalam project Next.js.
Silahkan buka file pages/_app.js, kemudian ubah kode-nya menjadi seperti berikut ini.
import '../styles/globals.css';
//import bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
Dari perubahan kode di atas, kita melakukan import CSS Bootstrap. Dan sekarang Bootstrap sudah bisa digunakan secara global di dalam project Next.js.
Sekarang kita lanjutkan untuk mengubah background dari aplikasi kita secara global. Dan disini kita akan override CSS bawaan dari Next.js. Silahkan buka file styles/global.css, kemudian ubah kode-nya menjadi seperti berikut ini.
body{
background: lightgray!important;
}
Langkah 3 - Membuat Component Navbar
Agar aplikasi yang akan kita buat lebih menarik, maka kita akan menambahkan sebuah menu atau biasa disebut dengan navbar.
Silahkan buat folder baru dengan nama components di dalam project Next.js. Dan di dalam folder components tersebut silahkan buat file baru dengan nama navbarjs, kemudian masukkan kode berikut ini di dalamnya.
//import Link
import Link from 'next/link';
function Navbar() {
return (
<header>
<nav className="navbar navbar-expand-md navbar-dark fixed-top bg-dark fixed-top border-0 shadow-sm">
<div className="container">
<Link href="/">
<a className="navbar-brand">LARAVEL & NEXT.JS</a>
</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarCollapse">
<ul className="navbar-nav me-auto mb-2 mb-md-0">
<li className="nav-item">
<Link href="/posts"><a className="nav-link">POSTS</a></Link>
</li>
<li className="nav-item">
<a className="nav-link" href="https://santrikoding.com" target="_blank">SANTRIKODING</a>
</li>
</ul>
<form className="d-flex">
<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
<button className="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
)
}
export default Navbar
Dari penambahan kode di atas, kita melakukan import Link dari Next.js Link, dimana ini akan kita gunakan untuk melakukan navigasi di dalam aplikasi Next.js dengan SPA / single page application.
Dan untuk menggunakannya, kurang lebih seperti berikut ini.
<Link href="/posts"><a className="nav-link">POSTS</a></Link>
Langkah 4 - Membuat Layout
Kita lanjutkan untuk membuat sebuah component yang nantinya digunakan sebagai induk dari template aplikasi kita. Jadi halaman yang akan ditampilkan nantinya akan berada di dalam layout ini.
Silahkan buat file baru di dalam folder components dengan nama layout.js, kemudian masukkan kode berikut ini di dalamnya.
//import component Navbar
import Navbar from './navbar'
export default function Layout({ children }) {
return (
<>
<Navbar />
<main>{children}</main>
</>
)
}
Dari penambahan kode di atas, pertama kita import component navbar yang sudah kita buat sebelumnya. Kemudian di dalam function component kita menambahkan parameter children, yang mana nantinya akan digunakan untuk menerima halaman yang akan di render di dalam layout ini. Dan di dalam return kita tampilkan component navbar beserta children-nya.
<Navbar />
<main>{children}</main>
Sampai disini pembahasan kita tentang cara installasi Bootstrap di dalam Next.js dan sekaligus membuat layout untuk induk halaman. Di artikel berikutnya kita akan belajar menampilkan data di dalam Next.js dari Rest API yang ada di Laravel.
Terima kasih