Next.js项目找不到pages/_app.js，无法添加Bootstrap全局样式如何解决

你当前的项目目录结构如下：

问题原因 #

你通过npx create-next-app创建的是Next.js 13及以上版本的项目，默认启用了App Router 路由模式，该模式下不存在官方旧指引中提到的pages/_app.js文件，全局样式的配置入口已替换为根目录下的app/layout.js。

解决方案 #

方案1：沿用当前App Router模式（推荐） #

无需调整路由模式，直接按以下步骤配置即可：

• 打开根目录下的app/layout.js文件，该文件是全局布局入口，承担原有_app.js的全局配置功能
• 在文件顶部导入Bootstrap全局样式：

// app/layout.js 代码示例
import 'bootstrap/dist/css/bootstrap.min.css'
// 若需要使用Bootstrap的JS交互组件（如模态框、下拉菜单等），可在对应客户端组件顶部额外导入JS包
// import 'bootstrap/dist/js/bootstrap.bundle.min.js'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

方案2：切换为Pages Router模式 #

如果你更适配旧版本的Pages Router开发逻辑，可按以下步骤切换：

• 删除项目根目录下的app文件夹
• 手动创建根目录pages文件夹，在pages文件夹内新建_app.js文件
• 在_app.js中按官方指引导入Bootstrap样式即可，基础示例如下：

// pages/_app.js 代码示例
import 'bootstrap/dist/css/bootstrap.min.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

内容的提问来源于stack exchange，提问作者Tâm Đỗ