NextJS项目中Bootstrap下拉菜单点击无法展开问题求助

问题根因 #

• 你使用的是Bootstrap 5版本，代码中还在用Bootstrap 4的旧数据属性，属性命名不匹配导致下拉功能无法被Bootstrap JS识别
• 直接在_document.js的Head中插入同步外部脚本，不符合Next.js的资源加载规范，导致Bootstrap JS可能未正常加载初始化

具体修改步骤 #

1. 替换所有Bootstrap旧数据属性 #

Bootstrap 5的交互属性统一添加了bs前缀，你需要修改两处代码：

导航栏折叠按钮修改

把原来的

data-toggle="collapse"
data-target="#navbarNavDropdown"

替换为

data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"

下拉菜单触发按钮修改

把loggedRouter函数里触发下拉的a标签中的

data-toggle="dropdown"

替换为

data-bs-toggle="dropdown"

2. 修复外部脚本加载逻辑 #

修改_document.js文件，改用Next.js官方提供的Script组件加载外部资源，避免同步脚本报错，同时保证Bootstrap JS正常初始化：
首先导入Script组件：

import Script from 'next/script'

然后把原来放在Head里的两个script标签移到body标签内，放在<Main />之后，改用Script组件书写，指定加载策略。

修改后的完整_document.js参考：

import Document, {Html, Head, Main, NextScript} from 'next/document'
import Script from 'next/script'

class MyDocument extends Document {
    render() {
        return (
            <Html lang="en">
                <Head>
                    <meta name = "description" content = "Renae.pk" />
                    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                    <Script 
                        src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
                        strategy="afterInteractive"
                    />
                    <Script 
                        src="https://kit.fontawesome.com/a076d05399.js"
                        strategy="afterInteractive"
                    />
                </body>
            </Html>
        )
    }
}

export default MyDocument

修改完成后重启开发服务器，下拉菜单即可正常触发展开。

内容的提问来源于stack exchange，提问作者Awais Shahid