Connect bootstrap in Next.js
- Tutorial
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:
Next, create a new project:
We put reactsrap and bootsrap:
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.
And configure it in next.config.js
Just a little bit left! Create the pages / _documents.js file. Compiled styles will be connected here.
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
Link to a working example
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!
)
}
Link to a working example