Install add bootstrap to next js

Ternyata gini aja loh cara installasi dan add bootstrap ke next js.

blog · 27 Jun 2023

#next #bootstrap #install #add #nextjs

Dan yess… pada kali ini kita akan ngebahas untuk kebutuhan UI framework yang dapat kamu gunakan dalam develope kebutuhan webapp kamu. secara fungsional nya tentunya membantu mempecepat mu dalam kebutuhan membuat desain website menjadi lebih tertata rapi dan keren.

Untuk itulah kita perlu css framework dalam bekerja, dari pada ngebuat awal mas bro.. bikin waktu terbuang lama kan.. jadi ni css framework ,benar benar ngebantu kamu untuk mempercepat pekerjaan dalam menyelesaikan project mu.

Kita tau bahwa bootstrap adalah sebuah trend utama untuk digunakan developer seluruh dunia dalam bekerja dan bertahan lama selama bertahun tahun,banyak yang menggunakan nya, alasan utama nya ukuran yang relatif lebih kecil dan ringan jadi bener bener ngebantu kamu untuk mempercepat dan memperbaiki peforma situs mu, khususnya untuk di test pada google lighthouse.

Inget kita bukan bootstrap boys , atawa bootstrap girl, tapi emang kita merasa nyaman aja dengan css ini dibandingkan ama tailwind css, lebih cepet aja sih nurut kita untuk ngebantu dalam ngebangun project sesuai ama kebutuhan kita dan peforma akan kecepatan nya luar biasa. ya balik lagi sesuai kan ama tingkatan kamu dalam ngebantu mana yang cepet aja deh , jadi sesuaikan ama kebutuhan .

Berbicara mengenai trend sendiri , tailwind saat ini menjelma menjadi kekuatan baru dan sangat populer digunain juga , ini kita riset dari google trend. jadi minat web developer seluruh dunia banyak yang kepo juga ama modern css framework ini.

Note - trend di post ini publish pada 27 Juni 2023

Weits… kok malah bahas css framework… 😁 , makin lama dan panjang nih nanti artikel nya….

Balik lagi deh sesuaiin ama judul nya Install add bootstrap to next js

Yap.. kita sekarang akan ngebahas cara untuk injeksi css dan js nya ke project next js kita , dan setelah di pimpin oleh gatsby js dari kategori populer JAMSTACK, maka kini next menempati ranking dan posisi utama dalam hal popularitas , ini mengacu dari result jamstack.org. jadi keinget dulu gimana perjuangan next mulai awal hingga sampai saat ini menjadi luar biasa nya, revolusi baru mulai dari now.sh rebranding ke vercel hingga melahirkan react framework populer ini.dan kini hanya salut ama teknologi mereka dan perjuangan keras nya untuk menjadi top dan leader JAMSTACK.

Oke oke.. sekarang kembali ke laptop… kita akan ngebahas gimana cara nya injeksi dan add bootstrap ke project next js kita. untuk awal kalian bisa gunain dua cara kok.

pertama kalau pengen simple kalian bisa add atau copy bootstrap cdn nya. lalu tempat kan cdn itu ke template kalian ,misal folder layout kamu ada di components/layout.tsx

untuk css letakan di area head contoh nya.

<head>cdn bootstrap disini</head>

untuk js nya kamu bisa letakan bagian bawah sendiri diatas tag <div> , contoh nya

<main>{children}</main>
masukan script bootstrap.js disini
</div>

nah gitu doang kaka… simple kan……

Nah sekarang kamu juga bisa gunakan cara ke dua dengan mode installasi ke project next js kamu, ikuti langkah berikut ini yes….

Note: langkah ini pas kita lagi gunakan bootstrap terbaru di versi 5.3.0 , kamu bisa kunjungi website official dokumentasi bootstrap untuk ngedapatin versi terbaru nya.

1.Install bootstrap dengan run command npm install [email protected]

2.lalu setelah installasi selesai dan sukses, kita masuk ke folder components/layout.tsx - atau sesuaikan folder lokasi tema kamu, karna beda jika makai versi javascript, layout ini untuk typescript version nya.

3.Lakukan injeksi dengan import jadi masukan kode ini import 'bootstrap/dist/css/bootstrap.css'

4.Setelah kita masukin css nya sekarang kita injeksi juga bootstrap js nya, caranya import dulu useEffect dengan kode

import {useEffect} from "react";

Lalu masukan script kode ini

useEffect(() => {
require("bootstrap/dist/js/bootstrap.bundle.min.js");
}, []);

kurang lebih seperti ini untuk kode lengkap nya

import Link from 'next/link'
import 'bootstrap/dist/css/bootstrap.css'
import {useEffect} from "react";

export default function Layout({
  children,
  home
}: {
  children: React.ReactNode
  home?: boolean
}) 
{
  useEffect(() => {
    require("bootstrap/dist/js/bootstrap.bundle.min.js");
  }, []);
  return (
    <div>

Nah gitu deh.. trus tes jalanin npm run dev dan buka localhost:3000 kamu.. buat nav atau modal untuk test apa uda bekerja. dan selamat deh kamu sukses sudah untuk melakukan injeksi add bootstrap ke next js project mu.

BONUS :

« Previous