چطور میتونم از بوت استرپ با Next.js استفاده کنم؟
How can I use Bootstrap 5 with Next.js?
چطور میتونم از بوت استرپ ۵ با Next.js استفاده کنم؟ مراحل نصب و کانفیگ بوت استرپ تو پروژه های Next.js چطور انجام میشه و آیا نکته خاصی وجود داره؟
سلام برای استفاده از بوت استرپ ۵ در پروژه های Next.js مراحل زیر رو انجام بده
اول از همه باید بوت استرپ ۵ رو به پروژه Next.js اضافه کنی. برای این کار میتونی از npm یا yarn استفاده کنی.
npm install bootstrapyarn add bootstrap
: بعد از نصب بوت استرپ، باید فایل‌های CSS بوت استرپ رو به پروژه اضافه کنی. برای این کار، به فایل pages/_app.js یا pages/_app.tsx برو و کد زیر رو اضافه کن
import 'bootstrap/dist/css/bootstrap.min.css';
import '../styles/globals.css';
این کار باعث میشه که استایل های بوت‌استرپ در تمام صفحات پروژه در دسترس باشه.
اگه نیاز به استفاده از جاوا اسکریپت بوت استرپ داری (مثل کار با مودال‌ها یا منوهای کشویی)، باید فایل‌های جاوا اسکریپت بوت‌استرپ رو هم به پروژه اضافه کنی. این کار رو میتونی با اضافه کردن bootstrap/dist/js/bootstrap.bundle.min.js به فایل pages/_document.js انجام بدی:
import Document, { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<Script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
با این کار، فایل‌های جاوا اسکریپت بوت استرپ به پروژه اضافه میشن و میتونی از قابلیت های جاوا اسکریپت بوت استرپ استفاده کنی.و از کامپوننت‌های بوت استرپ تو پروژه Next.js خودت استفاده کنی
import { Button } from 'react-bootstrap';
function HomePage() {
return (
<div className="container">
<h1>Hello, Next.js with Bootstrap!</h1>
<Button variant="primary">Bootstrap Button</Button>
</div>
);
}
export default HomePage;
توجه کن که برای استفاده از کامپوننت های بوت استرپ به صورت React، باید react-bootstrap رو نصب کنی:
npm install react-bootstrapحالا باید بتونی به راحتی از بوت‌استرپ ۵ در پروژه های Next.js خودت استفاده کنی