[英]Can I use React Bootstrap with Next.js?
Does anyone know if you can use react-bootstrap
with Next.js?有谁知道您是否可以将react-bootstrap
与 Next.js 一起使用? I am using the latest versions of both, I can provide code at this point, but right now my app is not throwing any errors, it is just not registering any of my react-bootstrap
components.我正在使用两者的最新版本,此时我可以提供代码,但现在我的应用程序没有抛出任何错误,它只是没有注册我的任何react-bootstrap
组件。 Maybe there is some trick that I have not been able to find on the internet?也许有一些我在互联网上找不到的技巧? I can provide code or file structure if that helps.如果有帮助,我可以提供代码或文件结构。 Thanks in advance!提前致谢!
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
/* my next config */
})
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;
{
"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"
}
}
It is obviously possible to use react-bootstrap in a nextjs application.显然可以在 nextjs 应用程序中使用 react-bootstrap。
The only problem you might encounter will be in the rendering of your application if javascript is disabled in user's browser if you use react-bootstrap components to build your layout (see example below).如果您使用 react-bootstrap 组件构建布局(参见下面的示例),您可能会遇到的唯一问题是在用户浏览器中禁用 javascript 时在应用程序的呈现中。
Nextjs allows you to display SSG/SSR pages, javascript-disabled users will see your app but the layout will be messy. Nextjs 允许您显示 SSG/SSR 页面,禁用 javascript 的用户会看到您的应用程序,但布局会很混乱。
But if you still want to go with it:但是如果你仍然想用它 go :
npm i react-bootstrap bootstrap
Import bootstrap styles in your _app.js:在您的 _app.js 中导入引导程序 styles:
import 'bootstrap/dist/css/bootstrap.min.css';
You can then use your react-bootstrap components as you would do in reactjs:然后,您可以像在 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;
Yes, I am using it!是的,我正在使用它!
You can follow egdavid's answer to configure react-bootstrap
.您可以按照egdavid 的回答来配置react-bootstrap
。
The only issue I found is that links are not working properly in terms of SPA .我发现的唯一问题是链接在SPA方面无法正常工作。
For that, I found the below solution.为此,我找到了以下解决方案。 You have to wrap NavBar.Link
within Link
and use passHref
attribute if you want to visible hyperlink on the link.如果要在链接上显示超链接,则必须将NavBar.Link
包装在Link
中并使用passHref
属性。
<Link href="/" passHref>
<Nav.Link>Home</Nav.Link>
</Link>
<Link href="/contact" passHref>
<Nav.Link>Contact</Nav.Link>
</Link>
Yes you can use it.是的,你可以使用它。 I think the most important issue is that server-side rendering supported in combination of next js & react-bootstrap?我认为最重要的问题是结合 next js 和 react-bootstrap 支持服务器端渲染? yes in react-bootstrap docs you can see how to implement this option.是的,在 react-bootstrap 文档中你可以看到如何实现这个选项。
https://react-bootstrap.github.io/getting-started/server-side-rendering/ https://react-bootstrap.github.io/getting-started/server-side-rendering/
you could do it something like this:你可以这样做:
import SSRProvider from 'react-bootstrap/SSRProvider';
<SSRProvider>
<App />
</SSRProvider>
yes, you can use bootstrap and react-bootstrap inside next.js.是的,您可以在 next.js 中使用 bootstrap 和 react-bootstrap。
and i am use it inside my applications,我在我的应用程序中使用它,
and here is a simple example to use navbar and modal component just for testing..这是一个简单的示例,使用导航栏和模态组件仅用于测试..
1- first install "react-bootstrap bootstrap" by using the follwing commands: 1-首先使用以下命令安装“react-bootstrap bootstrap”:
npm install react-bootstrap bootstrap
2- inside "_app.js" file import bootstrap css file on the top of file, and bootstrap js file inside useEffect, like the following: 2-在“_app.js”文件里面导入bootstrap css文件在文件顶部,bootstrap js文件在useEffect里面,如下:
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- and here is the my Nav component for testing (compatible with bootstrap 5)... : 3-这是我用于测试的导航组件(与引导程序 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- now create any page (for example index.js) and test it. 4- 现在创建任何页面(例如 index.js)并对其进行测试。
how to test:如何测试:
1- if you see bootstrap styles showing on navbar (colors, Buttons styles ) that's means the 'boostrap css is working fine'. 1-如果您在导航栏上看到引导程序 styles (颜色,按钮 styles ),这意味着“引导程序 css 工作正常”。
2- if the dropdown menue is clickable and working, that's means bootstrap js file is working fine. 2-如果下拉菜单是可点击的并且工作正常,这意味着引导 js 文件工作正常。
3- if the test modal works and you see the confirmation box, that's means the react-bootstrap components works fine. 3-如果测试模式有效并且您看到确认框,这意味着 react-bootstrap 组件工作正常。
this is just example and change it based on your case/requirements.这只是示例,并根据您的案例/要求进行更改。
i hope this helpful for you.我希望这对你有帮助。
Yup, you can use it, by providing CDN link inside your <head>
tag in pages/index.js
.是的,您可以通过在pages/index.js
的<head>
标记内提供 CDN 链接来使用它。
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;
Hope it works!!!希望它有效!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.