Connecting bootstrap to Next.js
Strongly welcome.
I came across the need to connect Bootsrtap in Next.js. Fluent Google gave a few topics on stackoverflow, a couple of monstrous (all in one and all the packages are outdated) templates on the githaba, and a little bit of offsets. In fact, everything turned out to be rather trivial, but I hope this note will save someone time.
If anyone else does not know, Next.js is a framework offering out of the box the possibility of creating universal / isomorphic applications with React. There is even an analogue of create-react-app - create-next-app.
On Habré already had several articles about him .
')
We start a new project. If create-next-app is not set, then set it:
Next, create a new project:
Put reactsrap and bootsrap:
So, we need to connect Bootstrap. Attempting to do this in the forehead will do nothing, except for an error in the console. Out of the box, the framework only supports styled-components. To connect something else you need to install the zeit / next-css css loader.
And configure it in next.config.js
Just a little bit left! Create the pages / _documents.js file. Compiled styles will be connected here.
Everything. Now we can use the reactstrap components. The main thing is not to forget to import bootstrap.min.css. Feel free to page / index.js
Reference to a working example
I came across the need to connect Bootsrtap in Next.js. Fluent Google gave a few topics on stackoverflow, a couple of monstrous (all in one and all the packages are outdated) templates on the githaba, and a little bit of offsets. In fact, everything turned out to be rather trivial, but I hope this note will save someone time.
If anyone else does not know, Next.js is a framework offering out of the box the possibility of creating universal / isomorphic applications with React. There is even an analogue of create-react-app - create-next-app.
On Habré already had several articles about him .
')
We start a new project. If create-next-app is not set, then set it:
sudo npm install -g create-next-app Next, create a new project:
create-next-app bs_exapmle Put reactsrap and bootsrap:
cd bs_exapmle npm install --save reactstrap bootstrap So, we need to connect Bootstrap. Attempting to do this in the forehead will do nothing, except for an error in the console. Out of the box, the framework only supports styled-components. To connect something else you need to install the zeit / next-css css loader.
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 ( <html> <Head> <link rel="stylesheet" href="/_next/static/style.css" /> </Head> <body> <Main /> <NextScript /> </body> </html> ) } } Everything. Now we can use the reactstrap components. The main thing is not to forget to import bootstrap.min.css. Feel free to page / 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> ) } Reference to a working example
Source: https://habr.com/ru/post/417979/
All Articles