Je vous souhaite la bienvenue.
J'étais confronté à la nécessité de connecter Bootsrtap dans Next.js. Un rapide google a donné plusieurs sujets sur stackoverflow, quelques modèles monstrueux (tout en un et tous les packages sont obsolètes) sur un github, et un peu off-dock. En fait, tout s'est avéré assez trivial, mais j'espère que cet article fait gagner du temps à quelqu'un.
Si quelqu'un d'autre ne le sait pas, Next.js est un framework qui offre immédiatement la possibilité de créer des applications universelles / isomorphes avec React. Il existe même un analogue pour create-react-app - create-next-app.
Sur Habré, il y
avait déjà
plusieurs articles à son sujet .
Nous commençons un nouveau projet. Si create-next-app n'est pas installé, définissez-le:
sudo npm install -g create-next-app
Ensuite, créez un nouveau projet:
create-next-app bs_exapmle
Nous mettons reactsrap et bootsrap:
cd bs_exapmle npm install --save reactstrap bootstrap
Nous devons donc connecter Bootstrap. Essayer de le faire de front ne donnera rien d'autre qu'une erreur dans la console. Hors de la boîte, le cadre prend uniquement en charge les composants de style. Pour connecter autre chose, vous devez installer le chargeur css
zeit / next-css.
npm install --save @zeit/next-css
Et configurez-le dans next.config.js
const withCSS = require('@zeit/next-css') module.exports = withCSS()
Encore un peu! Créez le fichier pages / _documents.js. Les styles compilés seront connectés ici.
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> ) } }
C’est tout. nous pouvons maintenant utiliser des composants reactstrap. L'essentiel est de ne pas oublier d'importer bootstrap.min.css. N'hésitez pas à éditer 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> ) }
Lien vers un exemple de travail