有谁知道你能不能用react-bootstrap
使用 Next.js?我正在使用两者的最新版本,此时我可以提供代码,但现在我的应用程序没有抛出任何错误,只是没有注册我的任何 react-bootstrap
成分。也许有一些我无法在互联网上找到的技巧?如果有帮助,我可以提供代码或文件结构。提前致谢!
下一个.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
/* my next config */
})
页面/index.jsimport 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"
}
}
最佳答案
显然可以在 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;
关于reactjs - 我可以在 Next.js 中使用 React Bootstrap 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58496306/