Next.js 13 App Router 速成：5分钟构建 Todo List 全栈应用

内容摘要：Next.js 13 App Router 速成：5分钟构建 Todo List 全栈应用,

对于想要快速上手全栈开发的同学来说，Next.js App Router 提供了一种非常便捷的方式。本文将带你从 0 开始，使用 Next.js App Router 在 5 分钟内搭建一个简单的待办事项（Todo List）应用。通过这个实战项目，你可以快速了解 Next.js 的核心概念，以及如何构建一个完整的前后端一体化应用。

项目初始化与目录结构

首先，我们需要初始化一个新的 Next.js 项目。确保你已经安装了 Node.js 和 npm (或 yarn, pnpm)。

npm create next-app todo-app
cd todo-app

在创建项目时，选择使用 App Router。项目创建完成后，默认的目录结构如下：

app/
  page.js         # 首页
  layout.js       # 根布局
  api/
    todos/
      route.js    # API 路由处理
public/
  ...

app 目录下存放的是所有的页面和 API 路由。page.js 对应于首页，layout.js 是应用的根布局。api/todos/route.js 用于处理与待办事项相关的 API 请求。这个目录结构与 Pages Router 相比有了显著的变化，更加强调组件化的路由方式。

构建前端界面

首先，我们需要修改 app/page.js 文件，创建前端界面。这里我们使用 React 的 useState hook 来管理待办事项列表和输入框的值。

// app/page.js
'use client'
import { useState } from 'react';

export default function Home() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

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

  const handleDeleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

这段代码创建了一个简单的输入框和按钮，用于添加待办事项。同时，使用 useState hook 来管理待办事项列表，并提供删除功能。这里需要注意 'use client' 指令，它表明这是一个客户端组件，需要运行在浏览器环境中。

创建 API 路由

接下来，我们需要创建 API 路由来处理后端的逻辑。在 app/api/todos/route.js 文件中，我们可以定义 GET, POST, PUT, DELETE 等 HTTP 方法来处理不同的请求。为了简化示例，我们先实现一个简单的 GET 方法，用于获取待办事项列表。

// app/api/todos/route.js

import { NextResponse } from 'next/server';

const todos = [
  { id: 1, text: 'Learn Next.js' },
  { id: 2, text: 'Build a Todo List App' },
];

export async function GET(request) {
  return NextResponse.json(todos);
}

这段代码定义了一个简单的 GET 方法，返回一个包含两个待办事项的 JSON 数组。NextResponse.json() 是 Next.js 提供的用于返回 JSON 数据的便捷方法。

前后端联调

现在，我们需要将前端界面与 API 路由连接起来。修改 app/page.js 文件，使用 useEffect hook 在组件挂载时从 API 获取待办事项列表。

// app/page.js
'use client'
import { useState, useEffect } from 'react';

export default function Home() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    async function fetchTodos() {
      const response = await fetch('/api/todos');
      const data = await response.json();
      setTodos(data);
    }

    fetchTodos();
  }, []);

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

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

  const handleDeleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

现在运行你的 Next.js 应用：

npm run dev

在浏览器中访问 http://localhost:3000，你应该能看到从 API 获取的待办事项列表。

深入理解 Next.js App Router 的优势

Next.js App Router 的核心优势在于它提供了一种更简洁、更灵活的方式来构建全栈应用。与传统的 Pages Router 相比，App Router 具有以下优势：

• 服务器组件：允许你在服务器端渲染组件，提高性能和 SEO。
• 客户端组件：允许你在客户端端渲染组件，实现交互式的功能。
• 路由处理：内置的路由处理机制，简化了路由配置和管理。
• 数据获取：提供了强大的数据获取能力，支持多种数据获取方式。

避免踩坑：一些常见问题

在使用 Next.js App Router 时，可能会遇到一些常见问题。以下是一些建议，帮助你避免踩坑：

• 客户端组件与服务器组件的区分：理解客户端组件和服务器组件的区别非常重要。客户端组件需要使用 'use client' 指令标记。
• 数据获取策略：根据不同的场景选择合适的数据获取策略，例如静态生成 (SSG)、服务器端渲染 (SSR) 或客户端数据获取。
• 错误处理：合理处理 API 请求中的错误，避免程序崩溃。

优化方向：提升性能与用户体验

为了进一步提升 Todo List 应用的性能和用户体验，我们可以考虑以下优化方向：

• 数据持久化：使用数据库（例如 MongoDB 或 PostgreSQL）来持久化存储待办事项，而不是保存在内存中。这涉及到数据库连接池的配置，例如使用 Prisma 或 Mongoose 来简化数据库操作。
• 状态管理：使用状态管理库（例如 Redux 或 Zustand）来更好地管理应用的状态。
• 性能优化：使用代码分割、图片优化等技术来提高应用的加载速度。可以考虑使用 Nginx 作为反向代理，进行负载均衡，优化静态资源缓存，提升并发连接数。
• 用户认证：添加用户认证功能，允许用户创建和管理自己的待办事项列表。

通过上述步骤，你已经成功搭建了一个简单的待办事项（Todo List）应用。这是一个很好的起点，你可以继续扩展这个应用，学习更多 Next.js 的高级特性，构建更复杂的全栈应用。例如，你可以尝试部署到 Vercel 平台，体验一键部署的便捷性。如果涉及到服务器运维，宝塔面板也是一个不错的选择，可以简化服务器管理。