Next.js Discord

Discord Forum

bootstrap in app router

Unanswered
Champagne D’Argent posted this in #help-forum
Open in Discord
Avatar
Champagne D’ArgentOP
I was able to add the bootstrap js to my page using 'useEffect' BUT now I'm using the app router exclusively for my pages and can't use any hooks since they are client.

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


Any ideas on how to add this js when the page loads, without using 'useEffect' or any hook?

9 Replies

Avatar
joulev
use react-bootstrap https://react-bootstrap.github.io/
as per the official recommendation https://getbootstrap.com/docs/5.3/getting-started/javascript/#usage-with-javascript-frameworks
Avatar
Champagne D’ArgentOP
I was trying to avoid it!
But will give it a shot
thanks @joulev
Avatar
joulev
you gotta use what is officially recommended; quoting the official documentation:

the Bootstrap JavaScript is not fully compatible with JavaScript frameworks like React, Vue, and Angular which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the “open” position.
Avatar
Champagne D’ArgentOP
Yep, just read that.
also will i be able to use react-bootstrap with app router pages, since bootstrap uses state?
Avatar
joulev
You probably will need to do this https://nextjs.org/docs/getting-started/react-essentials#third-party-packages