我可以将 React Bootstrap 与 Next.js 一起使用吗？答案

【问题标题】：Can I use React Bootstrap with Next.js?我可以将 React Bootstrap 与 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

标签： reactjs bootstrap-4 next.js react-bootstrap

【解决方案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/SSR 页面，禁用 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 SSRProvider from 'react-bootstrap/SSRProvider';

   <SSRProvider>
     <App />
   </SSRProvider>

【讨论】：