Next.js App Router 实战：5 分钟速成 TodoList 全栈应用

在前端工程化日新月异的今天，Next.js 凭借其强大的服务端渲染（SSR）、静态站点生成（SSG）以及 API 路由等特性，成为了构建现代 Web 应用的首选框架之一。本文将带你从0死磕全栈之Next.js App Router 入门实战，用 5 分钟的时间，搭建一个简单的待办事项（Todo List）应用，体验 Next.js 的强大魅力。

初始化 Next.js 项目

首先，确保你已经安装了 Node.js 和 npm（或 yarn）。打开终端，运行以下命令创建一个新的 Next.js 项目：

npm create-next-app@latest todo-app

在项目创建过程中，选择使用 TypeScript、ESLint、Tailwind CSS 等选项，以便更好地进行开发。

创建页面组件

Next.js 13 引入了 App Router，它基于 React Server Components (RSC)，提供了更灵活的路由方式。在 app 目录下创建 page.tsx 文件，作为 Todo List 应用的主页面。

// app/page.tsx
import { useState } from 'react';

export default function Home() {
  const [todos, setTodos] = useState<string[]>([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

创建 API 路由

为了实现数据的持久化存储，我们可以创建一个简单的 API 路由。在 app/api/todos 目录下创建 route.ts 文件，用于处理 Todo List 的增删改查操作。

// app/api/todos/route.ts
import { NextResponse } from 'next/server';

const todos = []; // In-memory storage for demonstration

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

export async function POST(request: Request) {
  const { todo } = await request.json();
  todos.push(todo);
  return NextResponse.json({ message: 'Todo added' });
}

注意：在实际项目中，应该使用数据库（如 MongoDB、MySQL 等）来存储数据。这里为了简化示例，使用了内存存储。

集成 API 路由到页面组件

修改 app/page.tsx 文件，调用 API 路由来获取和添加 Todo List 数据。

// app/page.tsx
'use client'; // 标记为 Client Component

import { useState, useEffect } from 'react';

export default function Home() {
  const [todos, setTodos] = useState<string[]>([]);
  const [newTodo, setNewTodo] = useState('');

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

  const addTodo = async () => {
    if (newTodo.trim() !== '') {
      await fetch('/api/todos', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ todo: newTodo }),
      });
      setTodos([...todos, newTodo]); // Optimistic update
      setNewTodo('');
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

注意：由于使用了 fetch API，需要将组件标记为 Client Component，使用 'use client'; 指令。

运行应用

在终端中运行以下命令启动 Next.js 开发服务器：

npm run dev

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

实战避坑经验总结

• Server Components vs Client Components： 理解 Server Components 和 Client Components 的区别至关重要。Server Components 默认在服务器端渲染，可以提高性能和 SEO。Client Components 则可以在客户端进行交互，处理用户事件。使用 'use client'; 指令将组件标记为 Client Component。
• API 路由的部署： Next.js API 路由可以轻松部署到 Vercel、Netlify 等云平台。在部署时，需要配置相应的环境变量和数据库连接。
• 数据持久化： 在实际项目中，需要使用数据库来存储数据。可以选择 MongoDB、MySQL、PostgreSQL 等数据库。
• 性能优化： 对于大型应用，需要进行性能优化。可以使用 Next.js 的 Image Optimization、Code Splitting、Caching 等功能来提高性能。

这个简单的待办事项应用，充分展示了 Next.js App Router 的强大功能和易用性。希望通过这个实战案例，能够帮助你快速入门 Next.js，并构建出更加强大的 Web 应用。在实际开发过程中，根据具体的业务需求，选择合适的技术方案，例如使用 Redis 进行数据缓存，或者使用 Nginx 作为反向代理服务器，进行负载均衡，提升应用的并发连接数和性能。