Next.js 13中pages与app文件夹适用场景及导出问题咨询

一、Pages 和 App 目录的必用场景 #

得用 Pages 文件夹的情况 #

• 要做自定义 App（_app.js/_app.tsx）或自定义 Document（_document.js/_document.tsx）：目前 App 目录还没替代这俩文件的方案，要是你需要全局样式注入、自定义页面模板结构，只能在 Pages 文件夹下创建这两个文件。
• 开发 API 路由：App 目录的 Route Handlers 虽然能顶一部分 API 功能，但如果要用到旧版 API 路由的特性（比如特定中间件兼容、旧生态工具），或者项目里已经有一堆 Pages 下的 API 路由代码，就得保留 Pages 的pages/api目录。
• 兼容旧版代码：如果项目是从 Next.js 12 及更早版本升上来的，还有一大堆基于 Pages 目录的页面组件，短期内没法全迁到 App 目录，那必须留着 Pages 文件夹维持原有功能。

得用 App 目录的情况 #

• 搞嵌套路由和布局：App 目录的核心优势就是原生支持嵌套路由和共享布局，要是你需要多层级页面嵌套（比如/dashboard/settings这种，共享 dashboard 的侧边栏布局），只能靠 App 目录的文件夹结构实现，Pages 目录原生做不了这个。
• 用 React Server Components（RSC）：App 目录默认开了 RSC，要是想利用服务端组件的好处（减小客户端包体积、直接在服务端拿数据），就得在 App 目录下建页面或组件。
• 实现并行路由或拦截路由：这俩是 App 目录独有的特性，比如做页面动态切换、模态框路由这类场景，只能通过 App 目录的特殊命名文件夹（比如@modal、(.)前缀）来实现。

二、不用 Pages 文件夹时静态导出没 HTML 文件的问题 #

当你全用 App 目录构建并跑next export时，out 文件夹里看不到.html文件，是因为 Next.js 13 对 App 目录的静态导出默认用了增量静态再生（ISR）或静态站点生成（SSG）的现代输出格式，文件会以.json和其他资源形式存在，不是传统的.html文件。

解决办法：

• 在next.config.js里明确配置静态导出模式，确保开全静态生成：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true, // 可选，生成带尾斜杠的目录结构，每个页面对应一个index.html
}

module.exports = nextConfig

• 配了trailingSlash: true之后，跑next build && next export，out 文件夹里就会给每个页面生成对应的目录，目录下有index.html文件，比如/about页面会生成out/about/index.html。

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