最近我遇到了同样的问题，但我是这样让事情运转起来的。
首先，我不认为你导入bootstrap到你的nextjs应用程序的方式是正确的，但是什么工作的工作，但是我认为你应该导入bootstrap到你的nextjs应用程序的方式。

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

我不想让这个过程太长，所以让我们直接开始创建解决方案。首先，你必须创建一个自定义函数，当你点击链接时关闭offCanvas。

const topicRef = useRef(null);

const closeOffCanvas = (event) => {
    event.stopPropagation();
    const bootstrap = require("bootstrap/dist/js/bootstrap");

    var myOffcanvas = topicRef.current;
    var bsOffcanvas = bootstrap.Offcanvas.getInstance(myOffcanvas);

    bsOffcanvas.hide();
  };

现在像这样创建链接并调用我们刚刚创建的函数

<Link href={`/article/18004/close-bootstrap-5-offcanvas-in-next-js`} passHref>
 <a href="#" onClick={closeOffCanvas}>navigate to page then close offCanvas</a>
</Link>

希望这对你有帮助

以下是最终对我起作用的方法：我导入的是单独的引导模块而不是所有模块，当你这样做的时候，我注意到全局window.bootstrap对象没有被设置，所以我创建了一个utility/bootstrap.ts来正确地初始化我的引导子集：

import type {
  Alert,
  Button,
  Carousel,
  Collapse,
  Dropdown,
  Modal,
  Offcanvas,
  Popover,
  ScrollSpy,
  Tab,
  Toast,
  Tooltip,
} from 'bootstrap';

export async function initBootstrap(): Promise<void> {
  if (typeof document !== 'undefined' && typeof window !== 'undefined') {
    const [buttonModule, carouselModule, dropdownModule, offcanvasModule] = await Promise.all([
      !window.bootstrap?.Button ? import('bootstrap/js/dist/button') : undefined,
      !window.bootstrap?.Carousel ? import('bootstrap/js/dist/carousel') : undefined,
      !window.bootstrap?.Dropdown ? import('bootstrap/js/dist/dropdown') : undefined,
      !window.bootstrap?.Offcanvas ? import('bootstrap/js/dist/offcanvas') : undefined,
    ]);
    if (!window.bootstrap) {
      window.bootstrap = {
        Button: undefined as unknown as Button & typeof Button,
        Carousel: undefined as unknown as Carousel & typeof Carousel,
        Dropdown: undefined as unknown as Dropdown & typeof Dropdown,
        Offcanvas: undefined as unknown as Offcanvas & typeof Offcanvas,
        Alert: undefined as unknown as Alert & typeof Alert,
        Collapse: undefined as unknown as Collapse & typeof Collapse,
        Modal: undefined as unknown as Modal & typeof Modal,
        Popover: undefined as unknown as Popover & typeof Popover,
        ScrollSpy: undefined as unknown as ScrollSpy & typeof ScrollSpy,
        Tab: undefined as unknown as Tab & typeof Tab,
        Toast: undefined as unknown as Toast & typeof Toast,
        Tooltip: undefined as unknown as Tooltip & typeof Tooltip,
      };
    }
    if (buttonModule) {
      window.bootstrap.Button ||= buttonModule.default;
    }
    if (carouselModule) {
      window.bootstrap.Carousel ||= carouselModule.default;
    }
    if (dropdownModule) {
      window.bootstrap.Dropdown ||= dropdownModule.default;
    }
    if (offcanvasModule) {
      window.bootstrap.Offcanvas ||= offcanvasModule.default;
    }
  }
}

你需要安装@bootstrap/types来使类型导入正常工作，然后，在我的组件中，在我的例子中，它是Next Js' _app.tsx我使用我的实用程序异步初始化引导：

export default function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    initBootstrap();
  }, []);
  return (
    <main>
      <Header />
      <Component {...pageProps} />
      <Footer />
    </main>
  );

它允许bootstrap正确地找到offcanvas，而不是创建副本。

export function Header() {
  const offcanvasElRef = useRef<HTMLDivElement>(null);
  const closeOffcanvas = () => {
    const offcanvas = window?.bootstrap?.Offcanvas?.getInstance(offcanvasElRef.current as Element);
    offcanvas?.hide();
  };
  return (
    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" ref={offcanvasElRef}>
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
      </div>
    </div>
  );
}

像这样导入：-

useEffect(() => {
    import("bootstrap/dist/js/bootstrap.bundle");
  }, []);