0

我遇到了 mdbreact 包的问题，​​因为当我添加一些组件（如按钮等）时，我收到错误消息：“未定义窗口”。我进行了研究，发现 window 对象仅在客户端定义。是否有可能将 Bootstrap 添加到 NextJS？

4

2 回答 2

0

如果你想使用 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 的更多信息，请单击此处。

您也可以以类似的方式使用 _app.js。有关 _app.js 的更多信息，请查看此内容。

于 2020-12-26T21:53:47.793 回答
-3

更新答案（2020）

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

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

过时的答案（2018）

在撰写本文时，只有一种“干净”的方法：使用动态组件来禁用这些组件的 SSR。

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

“肮脏”的方式是通过模拟窗口对象来使 react-bootstrap 支持 SSR。

于 2018-09-08T14:43:11.400 回答