Muy bienvenido.
Me enfrenté a la necesidad de conectar Bootsrtap en Next.js. Un rápido google dio varios temas sobre stackoverflow, un par de plantillas monstruosas (todo en uno y todos los paquetes están desactualizados) en un github, y un poco fuera del dock. De hecho, todo resultó ser bastante trivial, pero espero que este artículo le ahorre tiempo a alguien.
Si alguien más no lo sabe, Next.js es un marco que ofrece la posibilidad de crear aplicaciones universales / isomórficas con React. Incluso hay un análogo para crear-reaccionar-aplicación: crear-próxima-aplicación.
En Habré ya había
varios artículos sobre él .
Estamos comenzando un nuevo proyecto. Si create-next-app no está instalado, configúrelo:
sudo npm install -g create-next-app
A continuación, cree un nuevo proyecto:
create-next-app bs_exapmle
Ponemos reactsrap y bootsrap:
cd bs_exapmle npm install --save reactstrap bootstrap
Entonces, necesitamos conectar Bootstrap. Intentar hacerlo de frente no dará más que un error en la consola. Fuera de la caja, el marco solo admite componentes con estilo. Para conectar algo más, necesita instalar css-loader
zeit / next-css.
npm install --save @zeit/next-css
Y configúrelo en next.config.js
const withCSS = require('@zeit/next-css') module.exports = withCSS()
¡Solo queda un poco! Cree el archivo pages / _documents.js.Los estilos compilados se conectarán aquí.
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> ) } }
Eso es todo. Ahora podemos usar componentes Reactstrap. Lo principal es no olvidar importar bootstrap.min.css. Siéntase libre de editar páginas / 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> ) }
Enlace a un ejemplo de trabajo