reactjs - 我可以在 Next.js 中使用 React Bootstrap 吗？

Question

有谁知道你能不能用react-bootstrap使用 Next.js？我正在使用两者的最新版本，此时我可以提供代码，但现在我的应用程序没有抛出任何错误，只是没有注册我的任何 react-bootstrap成分。也许有一些我无法在互联网上找到的技巧？如果有帮助，我可以提供代码或文件结构。提前致谢!
下一个.config.js

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
    /* my next config */
})

页面/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;

包.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"
  }
}

Answer 1

显然可以在 nextjs 应用程序中使用 react-bootstrap。
如果您使用 react-bootstrap 组件构建布局(请参见下面的示例)，如果在用户的浏览器中禁用了 javascript，您可能会遇到的唯一问题是应用程序的呈现。
Nextjs 允许您显示 SSG/SSR 页面，禁用 javascript 的用户将看到您的应用程序，但布局会很乱。
但是，如果您仍然想使用它:

npm i react-bootstrap bootstrap

在 _app.js 中导入 bootstrap 样式:

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;