是的，你可以在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(() => {
require ('bootstrap/dist/js/bootstrap.js')
}, []);
return (
<>
<Nav />
<Component {...pageProps} />
</>
)
}
3- 这是我的导航组件，用于测试（与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样式（颜色，按钮样式），那就意味着“Bootstrap CSS工作正常”。
2- 如果下拉菜单可点击且正常工作，则表示Bootstrap JS文件工作正常。
3- 如果测试模态框能够正常工作并显示确认框，那就意味着React-Bootstrap组件工作正常。
这只是一个示例，请根据您的情况/要求进行更改。
希望对您有所帮助。
span，那么你的react-bootstrap已经正常工作了。你只需要提供variant="primary"，就像这样<Badge variant="primary">Heading</Badge>。更多关于 variant 的信息请参阅。 - ravibagul91bootstrap作为依赖添加进去？npm i bootstrap --save- ravibagul91