Nextjs 13 Bootstrap navbar toggle doesn't work (App directory version)

Question

I could not run the bootstrap navbar collapse feature in nextjs 13. I have tried many ways: 1.I added bootstrap js codes with script by opening head tag. 2. I added it to the layout page. it didn't work despite all this. how can i make this collapse work?. it was working cra and react- bootstrap.

my header component code

"use client";
import Image from "next/image";
import React, { useContext,useEffect } from "react";
import Link from "next/link";
import bootstaplogo from "../asset/b1.svg";
import {
  RiMailSendLine,
  RiLoginBoxFill,
  RiPencilFill,
  RiLogoutBoxFill,
} from "react-icons/ri";
import { AuthContext } from "../context/authContext";
import Cart from "./Cart";
import { usePathname } from "next/navigation";

const Header = () => {
  const currentPathname = usePathname();
  const { currentUser, logout } = useContext(AuthContext);
  useEffect(() => {
    // Load Bootstrap JS only on the client-side
    if (typeof window !== "undefined") {
      require('bootstrap/dist/js/bootstrap.bundle.min');
    }
  }, []);

  return (
    <>
    
    <div>
      <div className="container">
 


       <nav className=" bg-light navbar navbar-expand-md navbar-light fixed-top border-bottom">
          <div
            href="/"
            className=" navbar-brand ps-5 d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"
          >
            <Image
              alt="logo"
              className="me-2"
              width="40"
              height="32"
              src={bootstaplogo}
            ></Image>
            <span className="fs-4">deneme</span>
          </div>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon" />
          </button>
      <div className="navbar-toggle" id="navbarNavDropdown">
          <div className="collapse navbar-collapse justify-content-end ">
        <ul className="navbar-nav">
          <li className="nav-item">
            <Link className= {currentPathname === "/" ? " active nav-link" : "nav-link"} href="/">
                  {" "}
                  AnaSayfa
                </Link>
              </li>
          
            <button className="btn btn-warning px-3 me-2">
              <RiMailSendLine /> İletişim{" "}
            </button>
            </div>
          </div>
        </nav> 
      </div>
    </div>
    </>
    
  );
};

export default Header;

My layout code

import './globals.css'
import { Inter } from 'next/font/google'
import Footer from '../component/Footer'
import Header from '@/component/Header'
const inter = Inter({ subsets: ['latin'] })
import 'bootstrap/dist/css/bootstrap.css'
import {AuthContexProvider} from "../context/authContext"
import { CartProvider } from '../context/CartContext'




export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ currentPathname, children }) {
  return (
    <html lang="tr">
      
     <AuthContexProvider> <CartProvider><Header currentPathname={currentPathname}/>
      <div className={`mt-5 ${inter.className}`} >{children}
      <Footer/></div>
      </CartProvider></AuthContexProvider>
    </html>
  )
}

It doesn't sound like you're asking about a navbar, but about loading Bootstrap properly. Which is it? You should be able to tell if _any_ Bootstrap functionality works. Please revise to be more clear. — isherwood, Jul 21 '23 at 20:21
i think bootstrap.min.js doesn't import. i tried cdn or import like bootstrap.css but it doesn't work. Bootstrap work but bootstrap action like modal or toggle etc doesn't work. — M.Mustafa ÖZAYDIN, Jul 21 '23 at 23:14
Maybe you just need to include the `.js` extension? Or you need to use `esm` version: https://getbootstrap.com/docs/5.3/getting-started/javascript/#using-bootstrap-as-a-module — Arleigh Hix, Jul 23 '23 at 17:11

score 0 · Accepted Answer · answered Jul 24 '23 at 08:12

i solve it. https://medium.com/frontendweb/how-to-use-bootstrap-in-the-next-js-app-router-88720633775e it is important things you must use body tag. I use div tag doesn't work when I change div to body it works. my code layout.js

import './globals.css' import { Inter } from 'next/font/google' import Footer from '../component/Footer' const inter = Inter({ subsets: ['latin'] })

import Script from 'next/script'

export const metadata = { title: 'Create Next App', description: 'Generated by create next app', }

export default function RootLayout({ children }) { return (

   <link
     href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
     rel="stylesheet"
     integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
     crossOrigin="anonymous"
     
   />

 </head>
 <Header/>

  <body className={`mt-5 ${inter.className}`} >{children}
  <Footer/>
  </body>

 
  <Script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
    crossOrigin="anonymous"
  />

</html>

) }

Nextjs 13 Bootstrap navbar toggle doesn't work (App directory version)

1 Answers1