关于NextJS路由目录的困惑：app目录与pages目录该如何选择

两种目录结构的本质区别 #

你遇到的是NextJS的两套官方路由系统：

• Pages Router：就是你之前看到的pages目录结构，是NextJS 13之前的默认方案，至今仍被官方支持，多数旧教程基于它编写。
• App Router：NextJS 13推出的全新路由系统，现在npx create-next-app@latest默认使用这套方案，它基于React Server Components构建，支持更多现代特性。
  不存在谁“更正确”，两者都是官方认可的方案——旧项目可以继续用Pages Router，新项目推荐用App Router，也可以在同一个项目中混合使用两套系统。

旧Pages Router核心特性的App Router替代方案 #

• 旧pages/index.tsx → 新app/page.tsx：作为路由的入口页面，对应根路径/
• 旧pages/_app.tsx：全局App组件的替代是app/layout.tsx，根布局文件会包裹所有路由页面，负责全局样式、状态共享等。如果需要可复用且每次路由切换都会重新渲染的布局，可以用app/templates.tsx

App Router下创建路由与子页面的方法 #

• 一级路由：比如要创建/about路径，直接在app目录下新建about文件夹，在其中创建page.tsx文件即可
• 子路由：比如要创建/blog/post-1，就建app/blog/post-1/page.tsx；如果是动态路由（比如/blog/[slug]），则创建app/blog/[slug]/page.tsx，方括号包裹的部分就是动态参数，在组件中通过params获取
• 嵌套布局：每个路由文件夹都可以创建layout.tsx，用于给当前路由及其子路由提供专属布局

API目录的变化 #

App Router下不再依赖单独的pages/api目录，而是直接在app目录下创建api文件夹，示例：

// app/api/hello/route.ts
export async function GET() {
  return new Response(JSON.stringify({ message: 'Hello World' }), {
    headers: { 'Content-Type': 'application/json' },
  })
}

这个文件对应/api/hello接口，通过导出GET/POST/PUT等函数来处理不同请求方法。
如果你在项目中保留了Pages Router的pages目录，原来的pages/api仍然可以正常使用，两套API系统可以共存。

NextJS最新发展方向 #

App Router是官方主推的未来方案，它带来了React Server Components、流式渲染、Server Actions、并行路由等核心特性，能大幅优化应用的性能和开发体验。Pages Router会被长期维护，但不会再添加新特性，官方建议新项目优先采用App Router，旧项目可以根据需求逐步迁移。

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