如何将 Bootstrap JS 和 Jquery JS 添加到 Next JS答案

【问题标题】：How to add Bootstrap JS and Jquery JS to Next JS如何将 Bootstrap JS 和 Jquery JS 添加到 Next JS
【发布时间】：2021-12-18 16:48:07
【问题描述】：

这是一个在 create-react-app and Next JS 上运行的应用程序。它们之间的区别在于 CRA 似乎已经加载了 bootstrap.mon.js 和 jquery.min.js 而 NextJS 没有。我通过 next/head 在 NextJS 代码中添加了 HEAD 部分，并尝试加载两个 JS 文件。虽然没有错误，但我也没有看到正确的结果。有人可以帮我理解为什么 NextJS 会发生这种情况，我应该怎么做才能让 NextJS 使用 bootstrap 和 jquery 正确加载我的应用程序

【问题讨论】：

CRA 代码 - github.com/KrishnanSriram/cra NextJS 代码 - github.com/KrishnanSriram/nextjs
如果您找到解决方案，请告诉我

标签： reactjs next.js

【解决方案1】：

将此 sn-p 添加到您的 _app.js 中，就在您的返回码上方

useEffect(() => {
import("bootstrap/dist/js/bootstrap");
  }, []);

所以你完整的 _app.js 会是这样的

import { useEffect } from 'react';

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    import("bootstrap/dist/js/bootstrap");
  }, []);

  return <Component {...pageProps} />
}

export default MyApp

【讨论】：

不适合我，因为它说找不到模块：无法解析'js/whatevermyjsis.js'

【解决方案2】：

您必须在客户端要求模块。所以你可以使用这个

// _app.js

if (typeof window !== "undefined") {
  require("jquery");
  require("popper.js");
  require("bootstrap/dist/js/bootstrap");
}

【讨论】：

【解决方案3】：

通过 npm 安装后，您可以在 componentDidMount() 中要求客户端库。

import React, { Component } from 'react';

export class HomePage extends Component {
    render() {
        return (
            <div>
                Hello
            </div>
        );
    }

    componentDidMount() {
        require('jquery');
        require('popper');
        require('bootstrap');
    }
}

export default HomePage;

【讨论】：