👩🏾‍✈️ 🕵🏻 🙏🏻 Next.js में बूटस्ट्रैप कनेक्ट करें 🛌🏼 👈 🚛

जोरदार स्वागत।

मैं Next.js. में Bootsrtap को जोड़ने की आवश्यकता का सामना कर रहा था एक त्वरित Google ने स्टैकओवरफ्लो पर कई विषयों को दिया, एक गिथब पर एक राक्षसी (एक में सभी और सभी पैकेज पुराने हैं) टेम्पलेट, और थोड़ा ऑफ-डॉक। वास्तव में, सब कुछ बहुत मामूली निकला, लेकिन मुझे उम्मीद है कि यह लेख किसी को समय बचाता है।

अगर किसी और को नहीं पता है, तो Next.js एक ढांचा है जो बॉक्स से बाहर प्रतिक्रिया के साथ सार्वभौमिक / आइसोमोर्फिक एप्लिकेशन बनाने की क्षमता प्रदान करता है। यहां तक कि क्रिएट-रिएक्शन-ऐप - क्रिएट-नेक्स्ट-ऐप का भी एक एनालॉग है।

Habré पर उनके बारे में पहले से ही कई लेख थे ।

हम एक नई परियोजना शुरू कर रहे हैं। अगर बनाने के लिए अगले-एप्लिकेशन स्थापित नहीं है, तो इसे सेट करें:

sudo npm install -g create-next-app

अगला, एक नया प्रोजेक्ट बनाएं:

 create-next-app bs_exapmle

हमने रीएस्प्रैप और बूटस्ट्रैप लगाए:

 cd bs_exapmle npm install --save reactstrap bootstrap

तो, हमें बूटस्ट्रैप कनेक्ट करने की आवश्यकता है। इसे हेड-ऑन करने की कोशिश कंसोल में एक त्रुटि के अलावा कुछ नहीं देगी। बॉक्स से बाहर, रूपरेखा केवल स्टाइल-घटकों का समर्थन करती है। कुछ और कनेक्ट करने के लिए आपको css-loader zeit / next-css इंस्टॉल करना होगा।

 npm install --save @zeit/next-css

और इसे next.config.js में कॉन्फ़िगर करें

 const withCSS = require('@zeit/next-css') module.exports = withCSS()

बस थोड़ा सा बचा है! पेज / _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> ) } }

वह सब है। अब हम रिएक्टस्ट्रैप घटकों का उपयोग कर सकते हैं। मुख्य बात यह नहीं है कि 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> ) }

एक कार्यशील उदाहरण के लिए लिंक

Next.js में बूटस्ट्रैप कनेक्ट करें

More articles: