Next.js中React-Bootstrap Modal无法在页面顶层弹出问题解决

问题场景与现象 #

• 项目结构：components/modal.js、pages/index.js、pages/about.js
• 操作：参照React-Bootstrap官网的垂直居中模态框示例实现Modal组件，在index.js中通过按钮触发该组件
• 问题：模态框未在页面顶层弹出，仅作为页面内的div元素显示

解决方法 #

在pages/_document.js文件中引入Bootstrap的CSS文件，代码如下：

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

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