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

Question

这是在 create-react-app 和 Next JS 上运行的应用程序 。它们之间的区别是CRA似乎已加载bootstrap.mon.js和jquery.min.js，而NextJS尚未加载。我通过next / head将HEAD部分添加到NextJS代码中，并尝试加载两个JS文件。尽管没有错误，但我也没有看到正确的结果。 有人可以帮助我了解NextJS为何会发生这种情况，以及如何使Bootstrap和jquery使NextJS正确加载我的应用程序

Answer 1

通过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;

Answer 2

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

// _app.js

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