我正在学习next.js并尝试使用Bootstrap。
我用npx create-next-app@latest my-app创建了一个新项目，并使用了新的“app”目录。
然后我安装了Bootstrap和npm install bootstrap。在我的“Layout.jsx”中，我导入了Bootstrap CSS，它工作正常，我可以毫无问题地使用Bootstrap CSS。我通过在“Layout.jsx”中创建一个应用程序范围的导航栏来测试它。
现在我想在导航栏中使用一个Bootstrap下拉菜单（来自bootstrap的模板作为测试），它依赖于Bootstrap.js文件中的JS。导航栏和下拉菜单按钮将按预期显示，但单击按钮不会打开下拉菜单。
因此，我试图在“Layout.jsx”中导入Bootstrap.js，但我会得到以下消息：
“找不到模块'bootstrap/dist/js/bootstrap.js'的声明文件。'[...]/bootstrap/dist/js/bootstrap.js'隐式地具有'any'类型。”

然后我找到了一个解决方案，建议在pages/_app.js中使用以下代码，据我所知，在使用app目录时，这是“layout.jsx”：
useEffect(() => {import("bootstrap/dist/js/bootstrap");}, []);
我复制了我的“Layout.jsx”中的代码，但我会收到错误：
“您正在导入一个需要useEffect的组件。它只能在客户端组件中工作，但它的父组件都没有标记为“使用客户端”，因此它们默认为服务器组件。也许其中一个应该标记为客户端条目，并带有“useclient”
此外，我将得到相同的错误消息，如果我将直接导入它。

由于我是next.js和react的新手，我真的不知道如何处理这些信息。
然后我试图找到不同的解决方案，但大多数都是基于旧版本的next.js，或者他们建议安装更多的软件包来解决这个问题，我不确定这是否真的有必要。
有什么解决方案或提示吗？