从零开始：Next.js 14 App Router 完全指南

为什么选择 Next.js

在 React 生态中，Next.js 已经成为全栈开发的首选框架。它提供了文件系统路由、服务端渲染（SSR）、静态生成（SSG）、API 路由等开箱即用的能力，让你专注于业务逻辑而非基础设施。

Next.js 14 引入了全新的 App Router，基于 React Server Components 构建，带来了更优雅的数据获取方式和更快的页面加载速度。

创建项目

npx create-next-app@latest my-blog --typescript --tailwind --app

这条命令会创建一个包含 TypeScript、Tailwind CSS 和 App Router 的项目。

App Router 核心概念

文件即路由

在 app 目录下，每个文件夹代表一个路由段。文件名决定了路由的行为：

app/
├── page.tsx          → /
├── about/
│   └── page.tsx      → /about
├── posts/
│   └── [slug]/
│       └── page.tsx  → /posts/:slug
└── layout.tsx        → 共享布局

Server Components 与 Client Components

App Router 默认所有组件都是 Server Components，在服务端渲染，不发送 JavaScript 到客户端。

如果需要交互（useState、onClick 等），需要添加 "use client" 指令：

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

数据获取

在 Server Components 中，可以直接使用 async/await 获取数据：

export default async function PostPage() {
  const posts = await fetch("https://api.example.com/posts");
  const data = await posts.json();

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

动态路由与静态参数

使用 [slug] 创建动态路由，通过 generateStaticParams 预生成页面：

export function generateStaticParams() {
  return posts.map((post) => ({ slug: post.slug }));
}

export default function PostPage({ params }: { params: { slug: string } }) {
  // 根据 slug 获取文章
}

布局与模板

layout.tsx 定义共享布局，在路由切换时保持不重新渲染：

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Header />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  );
}

部署

Next.js 应用最简单的部署方式是使用 Vercel：

npx vercel

也可以通过 next build && next start 自托管，或导出为静态站点。

总结

Next.js 14 的 App Router 通过 Server Components 重新定义了 React 应用的开发方式。文件即路由的约定、灵活的渲染策略、内置的数据获取——这些都让全栈开发变得前所未有地简洁。

如果你在构建博客、文档站或内容驱动的应用，Next.js + Markdown 是一个极佳的组合。