强烈欢迎。
我面临着在Next.js中连接Bootsrtap的需求。 一个快速的Google给出了关于stackoverflow的几个主题，在github上有几个怪异的（所有包和所有包都已过时）模板，还有一些停靠站。 实际上，事实证明一切都很微不足道，但是我希望本文能节省一些时间。
如果其他人不知道，那么Next.js是一个框架，它提供了开箱即用的功能，可以使用React创建通用/同构应用程序。 create-react-app甚至还有一个类似物-create-next-app。
在哈布雷（Habré）上已经
有几篇关于他的文章 。
我们正在开始一个新项目。 如果未安装create-next-app，则进行设置：
sudo npm install -g create-next-app
接下来，创建一个新项目：
create-next-app bs_exapmle
我们放了reactsrap和bootsrap：
cd bs_exapmle npm install --save reactstrap bootstrap
因此，我们需要连接Bootstrap。 尝试正面操作只会在控制台中产生错误。 开箱即用的框架仅支持样式化组件。 要连接其他东西，您需要安装css-loader
zeit / next-css。
npm install --save @zeit/next-css
并在next.config.js中进行配置
const withCSS = require('@zeit/next-css') module.exports = withCSS()
还剩一点！ 创建pages / _documents.js文件，编译后的样式将在此处连接。
import Document, { Head, Main, NextScript } from 'next/document' export default class MyDocument extends Document { render() { return ( <html> <Head> <link rel="stylesheet" href="/_next/static/style.css" /> </Head> <body> <Main /> <NextScript /> </body> </html> ) } }
仅此而已。 我们现在可以使用reactstrap组件。 最主要的是不要忘记导入bootstrap.min.css。 随意编辑页面/ index.js
import 'bootstrap/dist/css/bootstrap.min.css'; import { Card, CardText, CardHeader, CardBody, Button } from 'reactstrap'; export default () => ( <div> <Card> <CardBody> <CardHeader>Hello Next.js!</CardHeader> <br/> <CardText>Bootstrap 4 power!</CardText> <Button color="danger">OK</Button> </CardBody> </Card> </div> ) }
链接到工作示例