当前位置：首页 > article >正文

从零开始创建一个 Next.js 项目并实现一个 TodoList 示例

article 2025/9/13 22:35:46

Next.js 是一个基于 React 的服务端渲染框架，它提供了很多开箱即用的功能，如自动路由、API 路由、静态生成、增量静态再生等。本文将带你一步步创建一个 Next.js 项目，并实现一个简单的 TodoList 功能。

效果地址

🧱 安装 Next.js 项目

首先确保你的开发环境已经安装了 Node.js（推荐版本为 Node.js 18.18 或更高）。

接下来使用 create-next-app 创建一个新的 Next.js 项目：

npm i create-next-app@latest
npx create-next-app@latest nexy-app

在创建过程中，命令行会引导你选择以下配置项：

√ What is your project named? ... nexy-app
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like your code inside a `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to use Turbopack for `next dev`? ... No
√ Would you like to customize the import alias (`@/*` by default)? ... Yes
√ What import alias would you like configured? ... @/*

这些选项的作用：

选项	说明
TypeScript	启用 TypeScript 支持
ESLint	添加代码规范支持
Tailwind CSS	使用 Tailwind CSS 作为样式工具
src/ 目录	将代码结构放在 src 文件夹下
App Router	使用 Next.js 13+ 推荐的 App Router 系统
Turbopack	使用实验性的快速打包工具
导入别名	设置模块路径别名，方便引用

完成后，进入项目目录并运行开发服务器：

cd nexy-app
npm run dev

📁 Next.js 的文件系统路由机制

Next.js 13+ 引入了基于文件系统的路由系统（File-system based routing），这是其核心特性之一。

基本规则如下：

每个 src/app 下的文件夹代表一个路由段。
文件夹中的 page.tsx 是该路由的页面组件。
特殊文件有特定用途：
- layout.tsx：共享布局
- loading.tsx：加载状态组件
- error.tsx：错误边界
- not-found.tsx：404 页面

示例结构：

src/
└── app/├── page.tsx → /├── about/│   └── page.tsx → /about├── contact/│   └── page.tsx → /contact

Next.js 会在构建时自动扫描 app 目录，根据目录结构生成对应的路由配置，无需手动注册。

✅ 实现一个 TodoList 示例

下面我们将创建一个简单的 TodoList 页面，演示如何在 Next.js 中使用客户端组件和状态管理。

步骤一：创建页面文件

在 src/app 目录下新建一个 todo 文件夹，并在其内部创建 page.tsx 文件：

src/app/todo/page.tsx

步骤二：编写 TodoList 组件

"use client"; // 表示这是一个客户端组件import React, { useState } from "react";// 定义 Todo 项的类型
interface TodoItem {id: number;text: string;completed: boolean;
}export default function TodoPage() {const [todos, setTodos] = useState<TodoItem[]>([]);const [inputValue, setInputValue] = useState("");const addTodo = (e: React.FormEvent) => {e.preventDefault();if (inputValue.trim() === "") return;const newTodo: TodoItem = {id: Date.now(),text: inputValue.trim(),completed: false,};setTodos([...todos, newTodo]);setInputValue("");};const toggleTodo = (id: number) => {setTodos(todos.map((todo) =>todo.id === id ? { ...todo, completed: !todo.completed } : todo));};const deleteTodo = (id: number) => {setTodos(todos.filter((todo) => todo.id !== id));};return (<div className="min-h-screen p-8"><div className="max-w-md mx-auto"><h1 className="text-3xl font-bold mb-8 text-center">Todo List</h1>{/* 添加 Todo 的表单 */}<form onSubmit={addTodo} className="mb-8"><div className="flex gap-2"><inputtype="text"value={inputValue}onChange={(e) => setInputValue(e.target.value)}placeholder="添加新的待办事项..."className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"/><buttontype="submit"className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">添加</button></div></form>{/* Todo 列表 */}<ul className="space-y-3">{todos.map((todo) => (<likey={todo.id}className="flex items-center justify-between p-4 bg-white rounded-lg shadow"><div className="flex items-center gap-3"><inputtype="checkbox"checked={todo.completed}onChange={() => toggleTodo(todo.id)}className="w-5 h-5 text-blue-500 rounded focus:ring-blue-500"/><spanclassName={`${todo.completed? "line-through text-gray-500": "text-gray-800"}`}>{todo.text}</span></div><buttononClick={() => deleteTodo(todo.id)}className="text-red-500 hover:text-red-700 focus:outline-none">删除</button></li>))}</ul>{/* 显示 Todo 统计信息 */}{todos.length > 0 && (<div className="mt-4 text-sm text-gray-500">总计: {todos.length} 项 | 已完成:{" "}{todos.filter((t) => t.completed).length} 项</div>)}</div></div>);
}