أرحب بشدة.
واجهتني الحاجة لربط Bootsrtap في Next.js. أعطت جوجل سريعة عدة مواضيع حول stackoverflow ، وزوجين من النماذج الوحشية (كلها في واحدة وجميع الحزم قديمة) على github ، وقليل من الإرساء. في الواقع ، تبين أن كل شيء تافه جدًا ، ولكن آمل أن توفر هذه المقالة وقتًا ما لشخص ما.
إذا كان أي شخص آخر لا يعرف ، فإن Next.js هو إطار يوفر القدرة على إنشاء تطبيقات عامة / متشابهة باستخدام React. حتى أن هناك تماثليًا لإنشاء-رد-تطبيق-إنشاء-التطبيق-التالي.
في حبري
كانت هناك بالفعل
عدة مقالات عنه .
نحن نبدأ مشروع جديد. إذا لم يتم تثبيت التطبيق next-next ، فقم بتعيينه:
sudo npm install -g create-next-app
بعد ذلك ، قم بإنشاء مشروع جديد:
create-next-app bs_exapmle
نضع رد فعل و جزمة:
cd bs_exapmle npm install --save reactstrap bootstrap
لذا ، نحتاج إلى ربط Bootstrap. محاولة القيام بذلك وجها لوجه لن تعطي سوى خطأ في وحدة التحكم. خارج الصندوق ، يدعم الإطار فقط المكونات ذات النمط. لتوصيل شيء آخر ، تحتاج إلى تثبيت css-loader
zeit / next-css.
npm install --save @zeit/next-css
وقم بتكوينه في next.config.js
const withCSS = require('@zeit/next-css') module.exports = withCSS()
بقي القليل فقط! أنشئ ملف Pages / _documents.js. سيتم ربط الأنماط المترجمة هنا.
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> ) } }
هذا كل شيء. يمكننا الآن استخدام مكونات Reastrap. الشيء الرئيسي هو عدم نسيان استيراد bootstrap.min.css. لا تتردد في تحرير الصفحات / 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> ) }
رابط لمثال عملي