Next.js 13是否需同时保留app与pages目录？单pages目录配置方法

方案1：移除app目录，纯用Pages Router #

• 直接删掉自动生成的app目录（包括里面的globals.css、layout.js和page.js）
• 在pages目录下新建_app.js（用TypeScript就建_app.tsx），这是Pages Router的全局入口，专门用来挂载全局样式
• 把全局样式文件（比如原app目录的globals.css）移到项目根的styles文件夹，然后在pages/_app.js里导入：

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

• 这样pages目录下的所有页面都会自动套用这套全局样式

方案2：同时保留app和pages目录，共用一套全局样式 #

如果需要暂时保留两个目录（比如做路由迁移），可以让两者共用同一份全局样式，避免重复：

• 删掉app目录下的globals.css，或者直接让app的布局文件导入pages侧的全局样式
• 在app/layout.js里导入同一套全局样式：

import '../styles/globals.css'

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

• 同时在pages/_app.js里也导入这个globals.css，这样两个路由体系就共用一套样式，不会出现重复文件的问题

额外提醒 #

• Next.js允许同时存在app和pages目录，但Pages Router的路由优先级低于App Router，要是有同名路由，App Router的页面会被优先渲染
• 要是确定只用Pages Router，直接删app目录最省心，能避免不必要的混淆

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