从0死磕全栈之Next.js App Router 入门实战：5 分钟搭建一个待办事项（Todo List）应用

想快速上手 Next.js 新一代路由系统？本文用一个超简单的 待办事项（Todo List） 例子，带你零压力掌握 App Router 的核心用法：页面、布局、动态交互、客户端/服务端组件区分。代码可直接运行，新手友好！

---

二、准备工作

确保已安装 Node.js（22+），然后创建项目：

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

// app/page.js
export default function HomePage()