استفاده از bootstrap در Reactjs و Nextjs و Typescript

در Reactjs: (با Typescript یا بدون آن)

نصب اولیه:

npm i bootstrap

دو دستور زیر را به index.js می افزاییم:

import &quotbootstrap/dist/js/bootstrap.min.js"
import 'bootstrap/dist/css/bootstrap.min.css';

در Nextjs: (بدون Typescript)

نصب اولیه:

npm i bootstrap

دستورات زیر را به app.js_ می افزاییم: (چون در nextjs روی سمت سرور صفحه ساخته می شود و آنجا document یا window نداریم، بایستی ایمپورت bootstrap.js رو در زمانی که صفحه روی مرورگر رندر شد، انجام دهیم)

import 'bootstrap/dist/css/bootstrap.min.css';
import {useEffect} from 'react';

useEffect(() => { 
import(&quotbootstrap/dist/js/bootstrap.min.js&quot);
}, []);

در Nextjs: (با Typescript)

تنها تفاوت نسبت به حالت بدون Typescript در نحوه نوشتن useEffect است:

useEffect(() => {
typeof document !== undefined ? require('bootstrap/dist/js/bootstrap'): null 
}, [])

البته اگر خواستید می تونید از react-bootstrap هم استفاده کنید که چالش های بالا رو نداشته باشید.