Sehr willkommen.
Ich war mit der Notwendigkeit konfrontiert, Bootsrtap in Next.js zu verbinden. Ein kurzer Blick auf Google gab mehrere Themen zum Thema Stackoverflow, ein paar monströse Vorlagen (alle in einem und alle Pakete sind veraltet) auf einem Github und ein wenig Off-Dock. Tatsächlich stellte sich heraus, dass alles ziemlich trivial war, aber ich hoffe, dieser Artikel spart jemandem Zeit.
Wenn jemand es nicht weiß, ist Next.js ein Framework, das sofort die Möglichkeit bietet, mit React universelle / isomorphe Anwendungen zu erstellen. Es gibt sogar ein Analogon zur Create-React-App - Create-Next-App.
Auf Habré gab
es bereits
mehrere Artikel über ihn .
Wir starten ein neues Projekt. Wenn create-next-app nicht installiert ist, legen Sie Folgendes fest:
sudo npm install -g create-next-app
Erstellen Sie als Nächstes ein neues Projekt:
create-next-app bs_exapmle
Wir setzen Reactsrap und Bootsrap:
cd bs_exapmle npm install --save reactstrap bootstrap
Also müssen wir Bootstrap verbinden. Der Versuch, es frontal zu tun, führt nur zu einem Fehler in der Konsole. Standardmäßig unterstützt das Framework nur gestaltete Komponenten. Um etwas anderes anzuschließen, müssen Sie den CSS-Loader
Zeit / Next-CSS installieren.
npm install --save @zeit/next-css
Und konfigurieren Sie es in next.config.js
const withCSS = require('@zeit/next-css') module.exports = withCSS()
Nur noch ein bisschen übrig! Erstellen Sie die Datei pages / _documents.js. Kompilierte Stile werden hier verbunden.
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> ) } }
Das ist alles. Wir können jetzt Reactstrap-Komponenten verwenden. Die Hauptsache ist, nicht zu vergessen, bootstrap.min.css zu importieren. Fühlen Sie sich frei, pages / index.js zu bearbeiten
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 zu einem Arbeitsbeispiel