Install add bootstrap to next js

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

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

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 :

Text Notes Update

Aplikasi
Temukan aplikasi toko,aplikasi restoran,aplikasi bengkel, aplikasi sekolah, aplikasi invoice , aplikasi akuntansi , aplikasi ekspedisi disini.

Bang Resto Aplikasi Restoran
Aplikasi restoran cafe rumah makan sangat lengkap include website integrasi ,waitrers, kitchen ,kasir, admin, qr code menu digital , whatsapp online order dalam satu app.

Pembuatan Website Cepat dan SEO
Saatnya kini kembangkan website super cepat tanpa database dengan dukungan SEO di dalam nya.

Typography Hockey Computindo
Mesin Kasir , aplikasi kasir , aplikasi toko, aplikasi restoran, aplikasi bengkel, aplikasi sekolah, pembuatan website terbaru.

Lava Aplikasi Toko Grosir dan Eceran.
Kebutuhan untuk penjualan eceran grosir maka menggunakan aplikasi toko lavaapp adalah pilihan terbaik untuk toko minimarket bisnis usaha mu.

Mesin Kasir
Mesin Kasir terbaru untuk toko minimarket dan mesin kasir restoran cafe rumah makan.

Mesin Kasir Restoran
Restoran cafe rumah makan wajib menggunakan mesin kasir ini, lengkap aplikasi software program restoran waiters kitchen kasir admin all in one.

Mesin Kasir Toko
Sempurna dengan barcode system dan touchscreen metode untuk mesin kasir toko minimarket retail shop.

Pembuatan website modern terbaru
Buat web modern bersama kami dengan react, next, remix, gatsby , angular, svelte , blazor wasm untuk solusi terbarik pengembangan site mu.

Mr.RestoPos Aplikasi Restoran
Aplikasi restoran cafe rumah makan super lengkap dengan kemampuan waiters , kitchen display, kasir dan admin dalam satu app integrasi website resto cafe rumah makan.

Explore Notes

Product & Services

Dukungan produk dan layanan kami untuk membantu memajukan bisnis usaha mu.

mesin kasir online

Mesin Kasir

Pilihan mesin kasir terbaik dengan hardware pilihan.

modern website

Website

Pengembangan website modern technology.

aplikasi kasir toko restoran

Applikasi

Aplikasi kerja untuk menunjang bisnis usaha mu.