如何在服务端渲染的Next.js项目中正确导入Bootstrap JS库？

你可以通过拆分客户端组件的方式加载Bootstrap JS，既不用给根布局加"use client"，也能保持项目的SSR特性，具体步骤如下：

• 第一步：创建单独的客户端组件用于加载Bootstrap JS
  在项目中新建一个组件文件（比如components/BootstrapClient.jsx），内容如下：

  'use client';
  
  import { useEffect } from 'react';
  
  export default function BootstrapClient() {
    useEffect(() => {
      // 动态导入Bootstrap JS，确保只在客户端执行
      import('bootstrap/dist/js/bootstrap.min.js');
    }, []);
  
    // 这个组件不需要渲染任何内容
    return null;
  }
  

• 第二步：在根布局中引入该客户端组件
  修改你的根布局文件，导入刚才创建的BootstrapClient组件，并将它放在<body>标签内即可：

  import { Inter } from "next/font/google";
  import "./globals.css";
  import "bootstrap/dist/css/bootstrap.min.css";
  import BootstrapClient from './components/BootstrapClient'; // 导入组件
  
  const inter = Inter({ subsets: ["latin"] });
  
  export const metadata = {
    title: "Create Next App",
    description: "Generated by create next app",
  };
  
  export default function RootLayout({ children }) {
    return (
      <html lang="en">
        <body className={inter.className}>
          {children}
          <BootstrapClient /> {/* 插入客户端组件 */}
        </body>
      </html>
    );
  }
  

原理说明 #

• 根布局依然保持服务端组件身份，不会影响页面的SSR渲染流程，Bootstrap的CSS仍会在服务端就注入到页面中。
• BootstrapClient是单独的客户端组件，仅负责在浏览器环境中加载Bootstrap JS，完全符合Bootstrap对window对象的依赖要求。
• 这种拆分方式既保留了项目的SSR优势，又能正常使用Bootstrap的所有交互功能。

内容的提问来源于stack exchange，提问作者Carl.t_