javascript Next.js包含Bootstrap JS

e3bfsja2  于 2023-05-16  发布在  Java
关注(0)|答案(1)|浏览(137)

我正在学习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,或者他们建议安装更多的软件包来解决这个问题,我不确定这是否真的有必要。
有什么解决方案或提示吗?

bxjv4tth

bxjv4tth1#

我采用的方法是在您的主布局或**_app.jsx**中执行类似的操作

if (typeof window !== "undefined") {
      require("bootstrap/dist/js/bootstrap");
    }
  }, []);

相关问题