Fortemente bem-vindo.
Fui confrontado com a necessidade de conectar o Bootsrtap no Next.js. Um rápido google deu vários tópicos sobre o stackoverflow, alguns modelos monstruosos (todos em um e todos os pacotes estão desatualizados) em um github e um pouco fora do dock. De fato, tudo acabou sendo bastante trivial, mas espero que este artigo economize tempo para alguém.
Se alguém mais não souber, o Next.js é uma estrutura que oferece imediatamente a capacidade de criar aplicativos universais / isomórficos com o React. Existe até um análogo para criar-reagir-aplicativo - criar-próximo-aplicativo.
Em Habré já havia
vários artigos sobre ele .
Estamos iniciando um novo projeto. Se o create-next-app não estiver instalado, defina-o:
sudo npm install -g create-next-app
Em seguida, crie um novo projeto:
create-next-app bs_exapmle
Colocamos reagtsrap e bootsrap:
cd bs_exapmle npm install --save reactstrap bootstrap
Então, precisamos conectar o Bootstrap. Tentar fazê-lo de frente dará apenas um erro no console. Fora da caixa, a estrutura suporta apenas componentes com estilo. Para conectar outra coisa, você precisa instalar o css-loader
zeit / next-css.
npm install --save @zeit/next-css
E configure-o em next.config.js
const withCSS = require('@zeit/next-css') module.exports = withCSS()
Só um pouquinho! Crie o arquivo pages / _documents.js. Os estilos compilados serão conectados aqui.
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> ) } }
Só isso. agora podemos usar componentes reacttstrap. O principal é não esquecer de importar o bootstrap.min.css. Sinta-se livre para editar o pages / 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> ) }
Link para um exemplo de trabalho