如何在 next.js 页面中导入 js 文件 [重复]

【问题标题】：how to import js file in next.js pages [duplicate]如何在 next.js 页面中导入 js 文件 [重复]
【发布时间】：2022-08-14 19:09:21
【问题描述】：

我们可以直接从 node_modules/boostrap 目录导入 bootstrap.bundle.js 文件吗？

import \"bootstrap/dist/css/bootstrap.rtl.min.css\";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script src=\"node_modules/bootstrap/dist/js/bootstrap.bundle.js\"></Script>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

我怎样才能指向src 属性内的node_modules 目录？

标签： javascript reactjs next.js

【解决方案1】：

最近我开始学习 Next.js 并被困在添加 Bootstrap Bundle JS 中。因此，可以使用useEffect 钩子来做到这一点：

import "bootstrap/dist/css/bootstrap.rtl.min.css";

function MyApp({ Component, pageProps }) {

  useEffect(() => {
    if (typeof window !== undefined) {
      const bootstrap = require('bootstrap/dist/js/bootstrap.bundle.min.js')
    }
  })

  return (
    <>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

【讨论】：