如何将 bootstrap 添加到 NextJS

Question

我在使用 mdbreact 包时遇到了问题，因为当我添加一些组件（如按钮等）时出现错误："Window is not defined"。我进行了研究，发现 window 对象仅在客户端定义。是否可以将 Bootstrap 添加到 NextJS???

Answer 1

更新答案 (2020)

react-bootstrap 从 v1.0 开始支持 SSR

来源：https://github.com/react-bootstrap/react-bootstrap/issues/3569

过时的答案 (2018)

在撰写本文时，只有一种 "clean" 方法：使用 Dynamic Components 为这些组件禁用 SSR。

import dynamic from 'next/dynamic'
const ButtonWithNoSSR = dynamic(import('react-bootstrap/lib/Button'), {
  ssr: false
})

"dirty" 方法是通过模拟 window 对象使 react-bootstrap 支持 SSR。

Answer 2

如果你想使用 bootstrap cdn，你可以简单地在 nextjs 中使用 _app.js 或 _document.js 文件。

以下是我如何通过 _document.js

将 bootstrap cdn 链接到我的 nextjs 项目

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    <link
                        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
                        rel="stylesheet"
                        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
                        crossorigin="anonymous"
                    />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default MyDocument;

了解更多 _document.js click here。

您也可以以类似的方式使用 _app.js。有关 _app.js check this out.

的更多信息

如何将 bootstrap 添加到 NextJS

How to add bootstrap to NextJS

reactjs

server-side-rendering

next.js

mdbreact

更新答案 (2020)

过时的答案 (2018)