Next.js 14 App Router 实战：5 分钟速成 Todo List 应用

还在为复杂的 React 项目配置而烦恼吗？Next.js 14 的 App Router 带来了全新的开发体验，极大简化了项目搭建流程。本文将带你从 0 开始，用 Next.js App Router 在 5 分钟内搭建一个功能完善的待办事项（Todo List）应用。通过这个实战项目，你将快速掌握 Next.js App Router 的核心概念。

需求分析与技术选型

我们的 Todo List 应用需要具备以下基本功能：

• 添加待办事项：允许用户输入文本并添加到列表中。
• 显示待办事项列表：展示所有已添加的待办事项。
• 标记完成状态：允许用户标记某个待办事项为已完成。
• 删除待办事项：允许用户删除不再需要的待办事项。

基于以上需求，我们选择的技术栈如下：

• Next.js 14：作为前端框架，提供 SSR、路由、构建等能力。
• React：用于构建 UI 组件。
• 客户端状态管理 (useState)：用于管理组件内部状态。
• CSS Modules：用于编写组件级别的样式，避免样式冲突。

环境搭建与项目初始化

首先，确保你已经安装了 Node.js (>= 16.8) 和 npm/yarn/pnpm。然后，使用以下命令创建一个 Next.js 项目：

npx create-next-app@latest todo-app --typescript

选择 App Router 和其他默认选项即可。项目创建完成后，进入项目目录：

cd todo-app

核心代码实现

1. 创建 TodoItem 组件

在 app 目录下创建一个 components 文件夹，并在其中创建一个 TodoItem.tsx 文件：

// app/components/TodoItem.tsx
import React from 'react';

interface TodoItemProps {
  id: number;
  text: string;
  completed: boolean;
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

const TodoItem: React.FC<TodoItemProps> = ({ id, text, completed, onToggle, onDelete }) => {
  return (
    <li>
      <input
        type="checkbox"
        checked={completed}
        onChange={() => onToggle(id)}
      />
      <span style={{ textDecoration: completed ? 'line-through' : 'none' }}>
        {text}
      </span>
      <button onClick={() => onDelete(id)}>删除</button>
    </li>
  );
};

export default TodoItem;

2. 创建 TodoList 组件

在 components 文件夹中创建一个 TodoList.tsx 文件：

// app/components/TodoList.tsx
import React from 'react';
import TodoItem from './TodoItem';

interface TodoListProps {
  todos: { id: number; text: string; completed: boolean }[];
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

const TodoList: React.FC<TodoListProps> = ({ todos, onToggle, onDelete }) => {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem
        key={todo.id}
          id={todo.id}
          text={todo.text}
          completed={todo.completed}
          onToggle={onToggle}
          onDelete={onDelete}
        />
      ))}
    </ul>
  );
};

export default TodoList;

3. 修改 app/page.tsx 文件

修改 app/page.tsx 文件，引入 TodoList 组件并添加状态管理：

// app/page.tsx
'use client'

import React, { useState } from 'react';
import TodoList from './components/TodoList';

export default function Home() {
  const [todos, setTodos] = useState<{ id: number; text: string; completed: boolean }[]>([
    { id: 1, text: '学习 Next.js App Router', completed: false },
    { id: 2, text: '完成 Todo List 应用', completed: true },
  ]);
  const [newTodo, setNewTodo] = useState('');

  const handleToggle = (id: number) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  const handleDelete = (id: number) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const handleAddTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, { id: Date.now(), text: newTodo, completed: false }]);
      setNewTodo('');
    }
  };

  return (
    <main>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>添加</button>
      <TodoList todos={todos} onToggle={handleToggle} onDelete={handleDelete} />
    </main>
  );
}

4. 运行项目

在终端中运行以下命令启动项目：

npm run dev
# 或 yarn dev
# 或 pnpm dev

打开浏览器访问 http://localhost:3000，即可看到 Todo List 应用。

部署与性能优化

Next.js 应用的部署方式有很多种，常见的包括：

• Vercel：Next.js 官方推荐的部署平台，提供自动部署和 CDN 加速等功能。
• Netlify：另一个流行的静态网站托管平台，也支持 Next.js 应用的部署。
• Docker：可以使用 Docker 将 Next.js 应用打包成镜像，然后部署到任何支持 Docker 的服务器上，例如阿里云、腾讯云、AWS 等云服务商的 ECS 或 Kubernetes 集群。

为了提高应用的性能，可以考虑以下优化策略：

• 代码分割：使用 Next.js 的动态导入功能，将代码分割成更小的块，按需加载。
• 图片优化：使用 Next.js 的 next/image 组件，对图片进行优化，例如压缩、格式转换等。
• 缓存：利用 Next.js 的缓存机制，缓存页面和 API 请求的结果，减少服务器的负载。
• CDN 加速：使用 CDN (内容分发网络) 将静态资源缓存到全球各地的服务器上，加速用户访问速度。

如果服务器端渲染（SSR）压力过大，可以考虑使用 ISR (Incremental Static Regeneration) 增量静态生成，定期重新生成静态页面，减少服务器的实时渲染压力。

避坑经验总结

• 'use client' 指令：在客户端组件中必须添加 'use client' 指令，否则会导致错误。
• 服务端组件与客户端组件混用：注意区分服务端组件和客户端组件，避免在服务端组件中直接使用客户端 hooks。
• 数据获取策略：根据不同的场景选择合适的数据获取策略，例如 getServerSideProps、getStaticProps、getStaticPaths 等。
• API 路由：使用 app/api 目录创建 API 路由，处理后端逻辑。在开发阶段，可以使用 node server.js 启动一个简单的 node 服务器来模拟真实后端。

从 0 死磕全栈：Next.js App Router 的进阶应用

通过本文的实践，你已经成功搭建了一个简单的 Todo List 应用。想要深入掌握 Next.js App Router，还需要继续学习更多高级特性，例如：

• 中间件：使用中间件进行请求拦截和处理。
• 认证与授权：实现用户登录、注册、权限控制等功能。可以考虑使用 NextAuth.js 等库来简化认证流程。
• 数据库集成：连接数据库，实现数据的持久化存储。常用的数据库包括 MySQL、PostgreSQL、MongoDB 等。
• GraphQL API：使用 GraphQL 替代 REST API，提高数据获取效率。
• 单元测试与集成测试：编写单元测试和集成测试，保证代码质量。

学习全栈开发是一条漫长的道路，希望本文能够帮助你快速入门 Next.js App Router，并为你的全栈之旅打下坚实的基础。 记住，实践是检验真理的唯一标准，多写代码，多踩坑，才能真正掌握技术！

最后的一些想法

如果要把项目部署到生产环境，别忘了配置 Nginx 反向代理，利用其强大的负载均衡能力，应对高并发请求。 可以考虑使用宝塔面板简化服务器管理和配置，或者直接使用云服务商提供的云服务器。同时，需要关注 Nginx 的并发连接数设置，根据实际情况进行调整。