我可以將 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 */
})

頁面/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 的用戶會看到您的應用程序，但布局會很混亂。

但是如果你仍然想用它 go ：

npm i react-bootstrap bootstrap

在您的 _app.js 中導入引導程序 styles：

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

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

我發現的唯一問題是鏈接在SPA方面無法正常工作。
為此，我找到了以下解決方案。 如果要在鏈接上顯示超鏈接，則必須將NavBar.Link包裝在Link中並使用passHref屬性。

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

Answer 3

是的，你可以使用它。 我認為最重要的問題是結合 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 4

是的，您可以在 next.js 中使用 bootstrap 和 react-bootstrap。

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

這是一個簡單的示例，使用導航欄和模態組件僅用於測試..

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

npm install react-bootstrap bootstrap

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-這是我用於測試的導航組件（與引導程序 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-如果您在導航欄上看到引導程序 styles （顏色，按鈕 styles ），這意味着“引導程序 css 工作正常”。

2-如果下拉菜單是可點擊的並且工作正常，這意味着引導 js 文件工作正常。

3-如果測試模式有效並且您看到確認框，這意味着 react-bootstrap 組件工作正常。

這只是示例，並根據您的案例/要求進行更改。

我希望這對你有幫助。

Answer 5

是的，您可以通過在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;

希望它有效！