Connect bootstrap in Next.js

Strongly welcome.

I was faced with the need to connect Bootsrtap in Next.js. Quick google gave several topics on stackoverflow, a couple of monstrous (all in one and all packages are outdated) templates on the github, and a little off-dock. In fact, everything turned out to be pretty trivial, but I hope this article saves someone time.

If anyone else does not know, Next.js is a framework that offers out of the box the ability to create universal / isomorphic applications with React. There is even an analogue to create-react-app - create-next-app.

On Habré there were already several articles about him .

We are starting a new project. If create-next-app is not installed, then set it:

sudo npm install -g create-next-app

Next, create a new project:

create-next-app bs_exapmle

We put reactsrap and bootsrap:

cd bs_exapmle
npm install --save reactstrap bootstrap

So, we need to connect Bootstrap. Trying to do it head-on will give nothing but an error in the console. Out of the box, the framework only supports styled-components. To connect something else you need to install the css-loader zeit / next-css.

npm install --save @zeit/next-css

And configure it in next.config.js

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

Just a little bit left! Create the pages / _documents.js file. Compiled styles will be connected here.

import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
  render() {
    return (
      
        
          

        
      
    )
  }
}

All. we can now use reactstrap components. The main thing is not to forget to import bootstrap.min.css. Feel free to edit pages / index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import { Card, CardText, CardHeader, CardBody, Button } from 'reactstrap';
export default () => (
     
Hello Next.js!
Bootstrap 4 power!OK
 )
}

Link to a working example