·tech·FEATURED

Next.js 14 App Router 深度实战 — 从 Pages 到 App 的迁移指南

从 Pages Router 到 App Router 的完整迁移实战：Server Components、数据流、路由设计、性能优化。

Next.js前端React教程

Next.js 14 App Router 深度实战

Next.js 14 的 App Router 已经稳定，本文将记录从 Pages Router 迁移到 App Router 的完整过程。

核心差异

特性Pages RouterApp Router
路由定义文件即路由文件夹 + page.tsx
数据获取getStaticPropsasync 组件 + fetch
布局_app.tsxlayout.tsx 嵌套
加载状态手动处理loading.tsx
错误处理_error.tsxerror.tsx
元数据Head 组件generateMetadata

Server Components vs Client Components

默认情况下，App Router 中的所有组件都是 Server Components：

tsx13 L
// 这是 Server Component — 可以直接访问数据库
import { getAllPosts } from "@/lib/posts";

export default async function PostList() {
  const posts = await getAllPosts();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>{post.title}</li>
      ))}
    </ul>
  );
}

需要交互时，使用 "use client" 声明 Client Component：

tsx14 L
"use client";

import { useState } from "react";

export function SearchBar() {
  const [query, setQuery] = useState("");
  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="搜索文章..."
    />
  );
}

数据流最佳实践

原则：尽可能在 Server Component 中获取数据，通过 props 传递给 Client Component。 这样可以减少客户端 JS 体积，提升首屏性能。

迁移检查清单

  • 创建 app/ 目录结构
  • 迁移路由页面
  • 实现 layout.tsx 嵌套布局
  • 添加 loading.tsx 加载态
  • 添加 error.tsx 错误边界
  • 替换 Head 为 generateMetadata
  • 拆分 Server/Client Components
  • 迁移 API Routes 到 Route Handlers

完整迁移项目已同步至 [GitHub 仓库]。

Next.js前端React教程