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

Question

有谁知道 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"
  }
}

Answer 1

是的，您可以使用它，方法是在 pages/index.js 中的 <head> 标签内提供 CDN link。

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;

希望有用！！！

Answer 2

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

Answer 3

是的，我正在使用它！
您可以按照配置react-bootstrap。

我发现的唯一问题是 links 在 SPA 方面无法正常工作。
为此，我找到了以下解决方案。如果要在 link.

上显示 hyperlink，则必须将 NavBar.Link 包裹在 Link 中并使用 passHref 属性

<Link href="/" passHref>
    <Nav.Link>Home</Nav.Link>
</Link>
<Link href="/contact" passHref>
    <Nav.Link>Contact</Nav.Link>
</Link>

Answer 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>

Answer 5

是的，您可以在 next.js.

中使用 bootstrap 和 react-bootstrap

我在我的应用程序中使用它，

这里是一个使用导航栏和模态组件的简单示例，仅用于测试..

1- 首先使用以下命令安装“react-bootstrap bootstrap”：

npm install react-bootstrap bootstrap

2- 在“_app.js”文件中导入 bootstrap css 文件到文件顶部，并在 useEffect 中导入 bootstrap js 文件，如下所示：

import { useEffect } from 'react';
import Nav from '../components/nav'
import 'bootstrap/dist/css/bootstrap.css';


function MyApp({ Component, pageProps }) {
    
    useEffect(() => {
        import ('bootstrap/dist/js/bootstrap.js')
    }, []);

  return (
    <>
        <Nav />
        <Component {...pageProps} />  
    </>
 
  )
}

3- 这是用于测试的我的 Nav 组件（与 bootstrap 5 兼容）... :

import { useState } from "react";
import {Modal, Button} from 'react-bootstrap';

const Nav = () => {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const confirm_modal = () => {
        console.log('modal is working ...')
        setShow(false)
    }

    return(
        <>

<nav className="navbar navbar-expand-lg navbar-light bg-light">
  <div className="container-fluid">
    <a className="navbar-brand" href="#">Navbar</a>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav me-auto mb-2 mb-lg-0">

        <li className="nav-item">
          <a className="nav-link" onClick={handleShow} href="#"> test modal</a>
        </li>
        <li className="nav-item dropdown">
          <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a className="dropdown-item" href="#">Action</a></li>
            <li><a className="dropdown-item" href="#">Another action</a></li>
            <li><hr className="dropdown-divider" /></li>
            <li><a className="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>

      </ul>
      <form className="d-flex">
        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
        <button className="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>



      <Modal show={show} onHide={handleClose}  keyboard="false">
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Are You Sure You Want This!.</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="danger" onClick={ confirm_modal  }>
          Yes
          </Button>
        </Modal.Footer>
      </Modal>
 
        </>
    )
}

export default Nav

4- 现在创建任何页面（例如 index.js）并测试它。

如何测试：

1- 如果您在导航栏（颜色、按钮样式）上看到 bootstrap 样式，则表示 'boostrap css is working fine'.

2- 如果下拉菜单可点击并正常工作，则表示 bootstrap js 文件工作正常。

3- 如果测试模式有效并且您看到确认框，则表示 react-bootstrap 组件工作正常。

这只是示例，请根据您的 case/requirements 进行更改。

希望对您有所帮助。

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

Can I use React Bootstrap with Next.js?

reactjs

react-bootstrap

bootstrap-4

next.js

next.config.js

pages/index.js

package.json