Sangat menyambut.
Saya dihadapkan dengan kebutuhan untuk menghubungkan Bootsrtap di Next.js. Google cepat memberi beberapa topik tentang stackoverflow, beberapa templat mengerikan (semua dalam satu dan semua paket sudah kedaluwarsa) pada github, dan sedikit off-dock. Sebenarnya, semuanya ternyata sangat sepele, tapi saya harap artikel ini menghemat waktu seseorang.
Jika orang lain tidak tahu, Next.js adalah kerangka kerja yang menawarkan kemampuan untuk membuat aplikasi universal / isomorfik dengan React. Bahkan ada analog dengan create-react-app - create-next-app.
Di Habré sudah ada
beberapa artikel tentang dia .
Kami sedang memulai proyek baru. Jika create-next-app tidak diinstal, kemudian atur:
sudo npm install -g create-next-app
Selanjutnya, buat proyek baru:
create-next-app bs_exapmle
Kami menaruh reactsrap dan bootsrap:
cd bs_exapmle npm install --save reactstrap bootstrap
Jadi, kita perlu menghubungkan Bootstrap. Mencoba melakukannya secara langsung tidak akan menghasilkan apa-apa selain kesalahan di konsol. Di luar kotak, kerangka kerja hanya mendukung komponen yang ditata. Untuk menghubungkan sesuatu yang lain, Anda perlu menginstal
ce -loader
zeit / next-css.
npm install --save @zeit/next-css
Dan konfigurasikan di next.config.js
const withCSS = require('@zeit/next-css') module.exports = withCSS()
Hanya sedikit yang tersisa! Buat file halaman / _documents.js. Gaya yang dikompilasi akan terhubung di sini.
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> ) } }
Itu saja. kita sekarang dapat menggunakan komponen reactstrap. Hal utama adalah jangan lupa untuk mengimpor bootstrap.min.css. Jangan ragu untuk mengedit halaman / 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> ) }
Tautan ke contoh yang berfungsi