想快速上手 Next.js 新一代路由系统？本文用一个超简单的 待办事项（Todo List） 例子，带你零压力掌握 App Router 的核心用法：页面、布局、动态交互、客户端/服务端组件区分。代码可直接运行，新手友好！
二、准备工作
确保已安装 Node.js（22+），然后创建项目：
bash
npx create-next-app@latest todo-app-router安装过程中：
- Would you like to use TypeScript? → No（本文用 JavaScript）
- Would you like to use ESLint? → Yes（可选）
- Would you like to use Tailwind CSS? → No（简化样式）
- Would you like to use
src/directory? → No - Would you like to use App Router? → Yes ✅（关键！）
项目创建后，你会看到 app/ 目录------这就是 App Router 的起点！
三、第一步：创建首页（显示待办列表）
编辑文件：app/page.js
jsx
// app/page.js
export default function HomePage() {
// 模拟待办数据（真实项目可从数据库或 API 获取）
const todos = [
{ id: 1, text: '学习 Next.js App Router', completed: false },
{ id: 2, text: '写一篇技术博客', completed: true },
{ id: 3, text: '喝杯咖啡休息一下', completed: false },
];
return (
<div style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
<h1>✅ 我的待办事项</h1>
<ul style={{ listStyle: 'none', padding: 0 }}>
{todos.map(todo => (
<li
key={todo.id}
style={{
padding: '0.5rem',
margin: '0.5rem 0',
backgroundColor: todo.completed ? '#e6ffe6' : '#fff0f0',
textDecoration: todo.completed ? 'line-through' : 'none'
}}
>
{todo.text}
</li>
))}
</ul>
</div>
);
}🔍 注意：这个页面没有用
'use client'，所以它是 服务端组件（Server Component） ------页面在服务端渲染，HTML 直接包含列表内容，加载快、SEO 好！
运行项目：
bash
npm run dev访问 http://localhost:3000，就能看到待办列表了！
四、第二步：添加交互功能
现在我们想点击待办项，切换"完成/未完成"状态。
但！服务端组件不能用 useState 或 onClick。怎么办？
👉 解决方案：把需要交互的部分拆成客户端组件。
1. 创建客户端组件：app/TodoItem.js
jsx
// app/TodoItem.js
'use client'; // 告诉 Next.js：这是客户端组件！
import { useState } from 'react';
export default function TodoItem({ text, initialCompleted }) {
const [completed, setCompleted] = useState(initialCompleted);
const toggle = () => {
setCompleted(!completed);
};
return (
<li
onClick={toggle}
style={{
padding: '0.5rem',
margin: '0.5rem 0',
backgroundColor: completed ? '#e6ffe6' : '#fff0f0',
textDecoration: completed ? 'line-through' : 'none',
cursor: 'pointer'
}}
>
{text} {completed ? '✅' : '⏳'}
</li>
);
}2. 在首页中使用它：修改 app/page.js
jsx
// app/page.js
import TodoItem from './TodoItem';
export default function HomePage() {
const todos = [
{ id: 1, text: '学习 Next.js App Router', completed: false },
{ id: 2, text: '写一篇技术博客', completed: true },
{ id: 3, text: '喝杯咖啡休息一下', completed: false },
];
return (
<div style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
<h1>✅ 我的待办事项</h1>
<ul style={{ listStyle: 'none', padding: 0 }}>
{todos.map(todo => (
<TodoItem
key={todo.id}
text={todo.text}
initialCompleted={todo.completed}
/>
))}
</ul>
</div>
);
}✅ 现在点击任意待办项，就能切换状态了！而且只有 TodoItem 是客户端组件，其余页面仍是服务端渲染，性能最优。
五、第三步：添加全局布局（Header）
我们希望所有页面顶部都有个标题栏。
创建 app/layout.js：
jsx
// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="zh">
<body>
<header style={{
backgroundColor: '#000',
color: 'white',
padding: '1rem',
textAlign: 'center'
}}>
<h1>📝 我的 Todo 应用</h1>
</header>
<main>{children}</main>
</body>
</html>
);
}保存后刷新页面，你会发现标题栏自动出现在首页顶部！
这就是 App Router 的 自动布局嵌套 能力。
六、App Router 核心知识点总结
| 概念 | 说明 | 本文例子 |
|---|---|---|
app/ 目录 |
App Router 的根目录 | 项目结构基础 |
page.js |
定义一个页面 | app/page.js → 首页 |
| 服务端组件 | 默认组件类型，不能用 useState/useEffect | HomePage |
'use client' |
标记客户端组件，支持交互 | TodoItem |
layout.js |
定义布局，自动包裹子页面 | 全局 Header |
| 组件拆分 | 交互部分独立为客户端组件，其余保持服务端渲染 | 最佳实践 ✅ |
结语
通过一个简单的 Todo List，我们轻松掌握了 Next.js App Router 的核心思想：
"能服务端渲染的尽量服务端渲染，需要交互的才用客户端组件。"
这种架构让应用更快、更轻、更易维护。现在，你已经具备了用 App Router 开发真实项目的基础！
快去创建你的下一个 Next.js 应用吧 🚀