I’m trying to use react-bootstrap components in my NextJS project but in App router you need to have ‘use client’ directive in top of your client components. So I did a trick and imported all bootstrap components inside my BS.js file and exported them like this

'use client';

import { Accordion, Card, Carousel, FormControl, Pagination } from "react-bootstrap";

export const CarouselCaption = Carousel.Caption;
export const CardBody = Card.Body;
export const CardTitle = Card.Title;
export const CardText = Card.Text;
export const FormControlFeedback = FormControl.Feedback;
export const PaginationItem = Pagination.Item;
export const PaginationEllipsis = Pagination.Ellipsis;
export const PaginationNext = Pagination.Next;
export const PaginationPrev = Pagination.Prev;
export const AccordionBody = Accordion.Body;
export const AccordionHeader = Accordion.Header;
export const AccordionItem = Accordion.Item;
export * from "react-bootstrap";

Know the problem is, NextJS includes all react-bootstrap components in the build bundle even if I use just one component from react-bootstrap. I’m looking for workaround to this problem

I tried importing directly from ‘react-bootstrap’ and it worked but for some components It requires react hooks and breaks the app