时间戳

首页 > 解决方案 > 如何将引导程序添加到 NextJS

reactjs - 如何将引导程序添加到 NextJS

问题描述

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

标签： reactjsnext.jsserver-side-renderingmdbreact

解决方案

如果你想使用 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 的更多信息，请查看此内容。

推荐阅读