如何将 Bootstrap 5 与 Next.js 一起使用？

Posted 2023-03-07

技术标签:

【中文标题】如何将 Bootstrap 5 与 Next.js 一起使用？【英文标题】：How can I use Bootstrap 5 with Next.js? 【发布时间】：2021-08-22 23:43:56 【问题描述】：

使用npm install bootstrap 安装引导程序后，我将样式添加到/pages/_app.js，如下所示：

import 'bootstrap/dist/css/bootstrap.css';
export default function App( Component, pageProps ) 
    return <Component ...pageProps />

但是，使用 javascript 的任何内容都无法正常工作，例如Collapse example 来自他们的文档。

function App() 
    return (
      <div>
        <p>
          <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Link with href
          </a>
          <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Button with data-bs-target
          </button>
        </p>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
          </div>
        </div>
      </div>
    );

export default App

如果我将import 'bootstrap/dist/js/bootstrap.js' 添加到/pages/_app.js，那么它会按预期开始“工作”，直到重新加载显示ReferenceError: document is not defined(screenshot) 的页面，这让我相信这是不可能的，或者我不应该这样做不要尝试使用 boostrap + react 或 next.js。我原以为他们放弃 jquery 意味着它应该与 react 之类的框架一起“开箱即用”（因为不再需要 react-boostrap 或 reactstrap）

有没有办法正确使用 boostrap 5 和 nextjs？或者我应该完全尝试其他方法还是重新使用 reactstrap（目前似乎只支持 boostrap 4）？

【问题讨论】：

是的，你绝对可以使用来自 Angular、Next 和 ReactJS 的 Bootstrap 5。不，它与“放弃 jQuery”无关（尽管我碰巧喜欢 jQuery！）在这里寻找几种解决方案：***.com/a/65260998/421195。请发回对您有用的内容！ @paulsm4 感谢您的回复，我认为不可能使用的思路来自于看到多个帖子说使用引导程序和反应是愚蠢的，而您应该使用材料 ui。但是因为我知道引导程序，所以如果可能的话，我想尝试使用它。至于你链接的问题，这些都对我不起作用。我仍然得到“文档未定义”，或者如果我使用最佳答案，我得到“窗口未定义” kindacode.com/article/… 【参考方案1】：

这是我们大多数人在切换到 NextJS 时会错过的常见事情。

问题：文档未定义。

原因： NextJS 在服务器端渲染你的应用，服务器端没有窗口、文档等，因此没有定义document。你甚至可以console.log(typeof window, typeof document) 来验证这一点。

现在，解决办法是什么？

我在我的函数组件中使用了这段代码：

    useEffect(() => 
        typeof document !== undefined ? require('bootstrap/dist/js/bootstrap') : null
    , [])

useEffect 与空的 dependencies 类似 componentDidMount() 在代码第二次运行后运行。由于代码首先在服务器运行，然后在客户端运行，因此不会产生错误，因为客户端有文档。

我从来没有使用过 `componentDidMount()。

这对我有用吗？

我刚刚在我的其他应用中复制了您的 Collapse example 以验证这一点。

【讨论】：

太棒了，非常感谢。虽然对于我的我必须在顶部添加 import useEffect from 'react'(else useeffect is undefined) 我注意到你没有，对吗？这是我的全部/pages/_app.js 现在pastebin.com/raw/2qbEMxXp @DavidPH 太好了！您的 pastebin 代码立即工作，除了在我的默认 Next.js 应用程序 global.css 中拼写为“../styles/globals.css”。 - 我还需要安装 popper 才能工作：yarn add @popperjs/core【参考方案2】：

我相信 React Bootstrap（截至 2021 年 7 月的测试版）现在支持 Bootstrap5：https://react-bootstrap.github.io/ 查看他们网站上的图片：

【讨论】：

【参考方案3】：

_app.js 和 _app.tsx 是不同的

function MyApp( Component, pageProps : AppProps) 
  // import bootstrap-js-libs below for _app.js
  useEffect(() => 
     import("bootstrap/dist/js/bootstrap");
   , []);

  useEffect(() => 
    typeof document !== undefined ? require("bootstrap/dist/js/bootstrap") : null;
  , []);

我们也可以在 _document 文件上使用 CDN！

【讨论】：

【参考方案4】：

步骤： 1- 通过 npm 安装引导程序。 2- 现在在 _app.js 中添加引导程序。

import Head from 'next/head';
import Script from 'next/script';
import React,  useEffect  from 'react';
import '../styles/global.scss';
import 'bootstrap/dist/css/bootstrap.css';

export default function App( Component, pageProps ) 
  useEffect(() => 
    import("bootstrap/dist/js/bootstrap");
  , []);
  useEffect(() => 
    import("jquery/dist/jquery.min.js");
  , []);

  useEffect(() => 
    typeof document !== undefined ? require('bootstrap/dist/js/bootstrap') : null
  , [])

  return (
    <>
      <Head>
        <meta name='viewport' content='width=device-width, initial-scale=1' />
      </Head>
      <Component ...pageProps />
    </>
  );

【讨论】：

【参考方案5】：

你只导入了bootstrap.css，如果你想使用collapse，你必须导入bootstrap的js文件。而bootstrap的js需要jquery和popper。但是react或者nextjs不推荐你使用jquery。

您可以使用以下 2 个库替代方案之一：

react-bootstrap reactstrap

对于最新的 bootstrap 5，您可以使用 BootstrapCDN：

在 _document.js 中，添加 2 行：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="undefined" crossorigin="anonymous"></script>

【讨论】：

通常我会说我很感激任何回复，但就好像您没有阅读问题一样。 1）我正在展示我如何尝试导入引导程序的 js 并失败。 2）我问的是 bootstrap 5，react-bootstrap + reactstrap 用于 bootstrap 4，3）我在帖子中提到了这些，4）bootstrap 5 设计为在没有 jquery 的情况下使用

以上是关于如何将 Bootstrap 5 与 Next.js 一起使用？的主要内容，如果未能解决你的问题，请参考以下文章

将 reactstrap 与 Next.js 一起使用

在 Next.js 12 中使用带有 SCSS 的 Bootstrap

sass 在 bootstrap5 中为 next.js 覆盖默认颜色？

如何将 firebase 的 firestore/admin sdk 与 next.js 一起使用

如何将 bootstrap 5 与 webpack 加载器一起使用？

redux 如何与 next.js 一起工作？