Next.js中pages与app目录路由的差异及选型疑问

一、核心差异对比 #

• 数据获取逻辑：Pages 目录依赖getServerSideProps/getStaticProps这类专属生命周期函数处理服务端数据；App 目录则直接在服务端组件内部写异步代码完成数据获取，不需要额外的封装函数。
• 组件渲染默认规则：Pages 目录页面默认是服务端渲染，可通过'use client'标记转为客户端组件；App 目录下所有组件默认都是服务端组件，仅显式添加'use client'才会切换为客户端渲染。
• 路由架构：Pages 是单文件对应单路由的简单模型；App 目录采用嵌套路由+布局系统，支持共享布局、模板、并行路由等更灵活的页面层级管理。

二、服务端获取最后一个Slug的实现方案 #

不管用哪个目录，都能在服务端完成需求，无需转为客户端组件：

Pages 目录实现 #

通过getServerSideProps的上下文参数直接解析路由：

export async function getServerSideProps(context) {
  // 适配动态路由/path/[...slug]的场景
  const slugParts = context.params?.slug || [];
  const lastSlug = slugParts[slugParts.length - 1];
  
  // 基于slug请求数据（服务端执行）
  const data = await fetch(`/api/data?slug=${lastSlug}`);
  const result = await data.json();

  return { props: { result, lastSlug } };
}

export default function Page({ result, lastSlug }) {
  return <div>当前Slug: {lastSlug}</div>;
}

App 目录实现 #

直接从组件的params参数中提取路由信息，比如路由文件为app/path/[...slug]/page.js：

// app/path/[...slug]/page.js
export default async function Page({ params }) {
  // params.slug是路由分段数组，/path/a/b/c对应['a','b','c']
  const lastSlug = params.slug.at(-1);
  
  // 组件内直接异步请求数据（服务端执行）
  const data = await fetch(`/api/data?slug=${lastSlug}`);
  const result = await data.json();

  return <div>当前Slug: {lastSlug}</div>;
}

如果是单个slug的路由（如app/path/[slug]/page.js），直接取params.slug即可。

三、推荐选型建议 #

• 新项目优先选App目录：它是Next.js 13+主推的路由方案，原生支持服务端组件、嵌套布局等现代化特性，是官方长期演进的方向。
• 已有项目无需急于迁移：Pages目录依然处于稳定维护状态，如果现有代码能满足需求，可继续使用；若要用到新特性，再逐步分批迁移。

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