Question

有人知道您是否可以对nextjs使用react-bootstrap吗？我正在使用两者的最新版本，现在可以提供代码，但是现在我的应用程序没有引发任何错误，只是没有注册我的任何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"
  }
}

Answer 1

显然可以在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;

Answer 2

是的，我正在使用它！
我发现的唯一问题是，根据 SPA 而言，链接无法正常工作。
为此，我找到了以下解决方案。如果要在链接上显示超链接，则必须将Link包装在passHref中，并使用<Link href="/" passHref> <Nav.Link>Home</Nav.Link> </Link> <Link href="/contact" passHref> <Nav.Link>Contact</Nav.Link> </Link>属性。

width="auto"

Answer 3

是的，您可以通过在<head>的{{1}}标签内提供CDN链接来使用它。

pages/index.js

希望它能正常工作！

我可以在nextjs中使用react-bootstrap吗？

next.config.js

pages / index.js

package.json

3 个答案: