Next.js App Router 架构设计与实践

📅 2026-05-15 📁 React ⏱ 约 4 分钟

Next.js 的 App Router 基于 React Server Components 构建，它用文件系统路由替代了 Pages Router 的约定式路由，带来了更灵活的布局嵌套和更高效的数据获取方式。

App Router 的核心是布局嵌套：

// app/layout.tsx - 根布局
export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="zh">
            <body>
                <nav>{/* 导航栏，跨路由保持状态 */}</nav>
                {children}
            </body>
        </html>
    );
}

// app/blog/layout.tsx - 博客布局
export default function BlogLayout({ children }) {
    return (
        <div className="flex">
            <aside>{/* 侧边栏 */}</aside>
            <main>{children}</main>
        </div>
    );
}

数据获取从 getServerSideProps 变为直接在组件中 async/await：

// app/blog/page.tsx
async function BlogPage() {
    const posts = await fetch("https://api.example.com/posts", {
        next: { revalidate: 3600 }, // ISR: 每小时重新验证
    }).then(r => r.json());

    return (
        <section>
            {posts.map(post => (
                <article key={post.id}>
                    <h2>{post.title}</h2>
                    <p>{post.excerpt}</p>
                </article>
            ))}
        </section>
    );
}

迁移过程中最大的坑是客户端组件和服务端组件的边界划分。原则是：默认使用 Server Component，只在需要交互（useState、useEffect、事件处理）时才添加 "use client" 指令。我们通过将交互逻辑抽离为叶子组件，成功将客户端 JS 体积减少了 60%。

Next.jsAppRouterSSR架构