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

Question

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

Answer 1

将此代码段添加到您的 _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