如何将引导程序添加到 NextJS
[英]How to add bootstrap to NextJS
问题描述
I've had a problem with mdbreact package, because when i am adding some components like buttons, etc. I am getting error: "Window is not defined".
我遇到了 mdbreact 包的问题，因为当我添加按钮等组件时，出现错误：“窗口未定义”。 I made a research and found that window object is defined only on the client side.我进行了研究，发现 window 对象仅在客户端定义。 Is it possible way to add Bootstrap to NextJS???是否可以将 Bootstrap 添加到 NextJS 中？？？
2 个解决方案
解决方案1
0 2020-12-26 21:53:47
In case you want to use bootstrap cdn, your can simply use _app.js or _document.js files in nextjs.如果你想使用 bootstrap cdn，你可以简单地在 nextjs 中使用 _app.js 或 _document.js 文件。
Here is how i linked bootstrap cdn to my nextjs project via _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;
To know more about _document.js click here .要了解有关 _document.js 的更多信息，请单击此处。
You can also use _app.js in a similar way.您也可以以类似的方式使用 _app.js。 for more information about _app.js check this out.有关 _app.js 的更多信息，请查看。
解决方案2
-3 已采纳 2018-09-08 14:43:11
Updated answer (2020)更新答案 (2020)
react-bootstrap supports SSR as of v1.0 react-bootstrap 从 v1.0 开始支持 SSR
Source: https://github.com/react-bootstrap/react-bootstrap/issues/3569来源： https : //github.com/react-bootstrap/react-bootstrap/issues/3569
Outdated answer (2018)过时的答案（2018）
At the time of writing, there is only one "clean" way: using Dynamic Components to disable SSR for those component.在撰写本文时，只有一种“干净”的方式：使用动态组件禁用这些组件的 SSR。
import dynamic from 'next/dynamic'
const ButtonWithNoSSR = dynamic(import('react-bootstrap/lib/Button'), {
ssr: false
})
The "dirty" way would be to make react-bootstrap support SSR by mocking the window object. “肮脏”的方法是通过模拟 window 对象使 react-bootstrap 支持 SSR。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.