我可以将 React Bootstrap 与 Next.js 一起使用吗？
Posted
技术标签:
【中文标题】我可以将 React Bootstrap 与 Next.js 一起使用吗？【英文标题】：Can I use React Bootstrap with Next.js? 【发布时间】：2020-02-18 03:12:48 【问题描述】：有谁知道您是否可以将react-bootstrap 与 Next.js 一起使用？我正在使用两者的最新版本，此时我可以提供代码，但现在我的应用程序没有抛出任何错误，它只是没有注册我的任何 react-bootstrap 组件。也许有一些我在互联网上找不到的技巧？如果有帮助，我可以提供代码或文件结构。提前致谢！
next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS(
/* my next config */
)
pages/index.js
import Badge from 'react-bootstrap/Badge';
import "../public/css/bootstrap.css";
const Index = () => (
<div>
<p className='display-4'>Hello</p>
<Badge>Heading</Badge>
</div>
)
export default Index;
package.json
"name": "vacation-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts":
"dev": "next",
"build": "next build",
"start": "next start"
,
"keywords": [],
"author": "",
"license": "ISC",
"dependencies":
"@zeit/next-css": "^1.0.1",
"next": "^9.1.1",
"react": "^16.10.2",
"react-bootstrap": "^1.0.0-beta.14",
"react-dom": "^16.10.2"
【问题讨论】：
是的。您应该提供最小的、可运行的代码结构。 现在添加 使用类名“display-4”可以工作，这意味着我下载的 boostrap 可以自己工作。但是 react-bootstrap 没有注册 但是，使用从 react-bootstrap 导入的 Badge 组件，我只是注意到使用 chrome 开发工具，它会将 Badge 组件注册为具有“badge”类的 span 元素...意思是 react-bootstrap 是半工作的？在浏览器中，它不显示任何格式，只显示内部 html 中的文本 如果它在开发工具中为您提供span，那么您的react-bootstrap 工作正常。您只需要提供variant="primary" 就像<Badge variant="primary">Heading</Badge>。阅读更多关于variant
【参考方案1】：
是的，您可以通过在pages/index.js 的<head> 标记内提供CDN 链接来使用它。
import Head from 'next/head';
import Badge from 'react-bootstrap/Badge';
import "../public/css/bootstrap.css";
const Index = () => (
<Head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
</Head>
<div>
<p className='display-4'>Hello</p>
<Badge>Heading</Badge>
</div>
)
export default Index;希望成功！！！
【讨论】：
那么不使用cdn就不能使用bootstrap和next吗 您可以下载 css 文件并将其托管在您的资产文件中。你也可以在你的 _app.js 文件中这样做import 'bootstrap/dist/css/bootstrap.min.css';，就像上面的例子一样【参考方案2】：
显然可以在 nextjs 应用程序中使用 react-bootstrap。
如果您使用 react-bootstrap 组件来构建布局（参见下面的示例），如果在用户的浏览器中禁用了 javascript，您可能会遇到的唯一问题是应用程序的呈现。
Nextjs 允许您显示 SSG/s-s-r 页面，禁用 javascript 的用户会看到您的应用，但布局会很乱。
但如果你还想继续下去：
npm i react-bootstrap bootstrap
在您的 _app.js 中导入引导样式：
import 'bootstrap/dist/css/bootstrap.min.css';
然后您可以像在 reactjs 中一样使用您的 react-bootstrap 组件：
import Container, Row, Col from 'react-bootstrap';
const Layout = () => (
<>
<Container fluid>
<Row>
<Col>
<p>Yay, it's fluid!</p>
</Col>
</Row>
</Container>
</>
);
export default Layout;
【讨论】：
【参考方案3】：是的，我正在使用它！
可以关注egdavid's answer配置react-bootstrap。
我发现的唯一问题是链接在 SPA 方面无法正常工作。
为此，我找到了以下解决方案。
如果要在链接上显示超链接，则必须将 NavBar.Link 包裹在 Link 中并使用 passHref 属性。
<Link href="/" passHref>
<Nav.Link>Home</Nav.Link>
</Link>
<Link href="/contact" passHref>
<Nav.Link>Contact</Nav.Link>
</Link>
【讨论】：
【参考方案4】：是的，您可以使用它。 我认为最重要的问题是结合 next js 和 react-bootstrap 支持服务器端渲染？ 是的，在 react-bootstrap 文档中你可以看到如何实现这个选项。
https://react-bootstrap.github.io/getting-started/server-side-rendering/
你可以这样做：
import s-s-rProvider from 'react-bootstrap/s-s-rProvider';
<s-s-rProvider>
<App />
</s-s-rProvider>
【讨论】：
以上是关于我可以将 React Bootstrap 与 Next.js 一起使用吗？的主要内容，如果未能解决你的问题，请参考以下文章
用于 React 的 Bootstrap 与 Material UI？
放大图像同时保持鼠标悬停尺寸的 React 组件 - React + Bootstrap