I am learning next.js and trying to use Bootstrap.
I created a new project with npx create-next-app@latest my-app and used the new "app" directory.
After that I installed Bootstrap with npm install bootstrap.
In my "Layout.jsx" I imported the Bootstrap CSS, which worked and I can use the Bootstrap CSS without any problem. I tested it by creating an app wide nav bar in the "Layout.jsx".
Now I want to use a Bootstrap dropdown menu inside the nav bar (template from bootstrap as a test) which depends on JS from the Bootstrap.js file. The navbar and the button for the dropdown will be displayed as expected but clicking on the button does not open the dropdown menu.
So I tried to import the Bootstrap.js in the "Layout.jsx" but I will get the following message:
"Could not find a declaration file for module 'bootstrap/dist/js/bootstrap.js'. '[...]/bootstrap/dist/js/bootstrap.js' implicitly has an 'any' type."
I then found a solution that suggested to use the following code inside the pages/_app.js which from my understanding is the "layout.jsx" when using the app directory :
useEffect(() => {import("bootstrap/dist/js/bootstrap");}, []);
I copied the code inside my "Layout.jsx" but I will then recieve the error:
"You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Maybe one of these should be marked as a client entry with "use client""
Additionally I will get the same error message as if I would import it directly.
Since I am new to next.js and react I do not really know how to handle this information.
I then tried to find different solutions but most of them are based on older versions of next.js or they recommended installing more packages to solve this issue and I am not sure if that is really necessary.
Any solution or hint?