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

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

news 来源：原创 2025/6/27 4:24:09

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>);
}

步骤三：访问页面

现在你可以访问 http://localhost:3000/todo 查看这个 TodoList 页面。

🌟 Next.js 的优势总结

自动路由：无需手动注册路由，基于文件结构自动生成。
Server Components 和 Client Components 分离：提升性能和可维护性。
集成 Tailwind CSS：轻松构建现代 UI。
支持 TypeScript：提供更强的类型安全。
SSG & SSR 支持：适合 SEO 友好型网站。
Turbopack / Fast Refresh：更快的开发体验。

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

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

编程日记 2025/6/27 4:24:09

全面掌握JSR303校验：从入门到实战

一、JSR303校验简介 JSR303是Java EE 6中的一项规范，全称为"Bean Validation 1.0"，它定义了一套基于注解的JavaBean校验机制。通过简单的注解，我们可以优雅地完成参数校验工作，避免在业务代码中编写大量的校验逻辑。 …...

编程日记 2025/6/22 11:44:27

「Java EE开发指南」如何使用MyEclipse的可视化JSF编辑器设计JSP？（二）

Visual JSF Designer（可视化JSF设计器）的目标是使创建JSF应用程序的特定于组件工作更容易可视化，在本教程中，您将使用可视化设计器设计JSF登录页面。您将学习如何： 创建一个JSF项目创建一个新的JSF页面设计JSF页面该…...

编程日记 2025/6/24 23:12:54

Python 翻译词典小程序

一、概述本工具是基于Python开发的智能翻译系统，采用有道词典进行翻译，并具有本地词典缓存以及单词本功能。版本号：v1.0 (2025-05-15) 二、核心功能说明 1. 基础翻译功能即时翻译：输入英文单词自动获取中文释义词性识别&…...

编程日记 2025/6/23 22:11:42

kafka调优

以下是 Kafka 性能调优的核心策略与参数配置建议，综合生产环境和硬件层面的优化方案，覆盖生产者、消费者、Broker 三个关键组件： 一、生产者调优批量发送优化 • batch.size：增大批量消息大小（默认 16KB，建…...

编程日记 2025/6/25 22:57:05

【hadoop】sqoop案例 hive-＞mysql

将temperature.log中的气象数据导入到Hive的temperature表中， 根据气象站id分组计算每个气象站30年来的*最高*气温， 然后将统计结果导出到MySQL当中。思路： 1.在hive中创建表 2.数据导入到表中 3.计算后的结果写入另外的表 4.用sqoop导出…...

编程日记 2025/6/23 4:51:21

Git/GitLab日常使用的命令指南来了！

在 GitLab 中拉取并合并代码的常见流程是通过 Git 命令来完成的。以下是一个标准的 Git 工作流，适用于从远程仓库（如 GitLab）拉取代码、切换分支、合并更新等操作。 🌐 一、基础命令：拉取最新代码 # 拉取远程仓库的所…...

编程日记 2025/6/25 3:25:42

遗传算法求解旅行商问题分析

目录一、问题分析二、实现步骤 1）初始化种群 2）计算适应度 3）选择操作 4）交叉操作 5）变异操作三、求解结果四、总结本文通过一个经典的旅行商问题，详细阐述在实际问题中如何运用遗传算法来进…...

编程日记 2025/6/24 20:18:38

【Hadoop】伪分布式安装

【Hadoop】伪分布式安装什么是 Hadoop 伪分布式安装？ Hadoop 伪分布式安装（Pseudo-Distributed Mode） 是一种在单台机器上模拟分布式集群环境的部署方式。它是介于本地模式（Local Mode） 和完全分布式模式&#xf…...

编程日记 2025/6/24 0:15:53

微服务概述

什么是微服务微服务是一个架构方案，属于分布式架构的一种。微服务提倡将模块以独立服务的方式独立管理，整个项目依靠多个小型的服务（单独进程）同时运作来支撑，单个服务只关注自己的业务实现并且有专业的团队进行开发。服务之间使用轻量的协议进行消息传送，并且对于单个…...

编程日记 2025/6/24 19:28:55

【网工】华为配置基础篇①

目录 ■华为设备登录配置 ■VLAN与VLANIF地址配置 ■DHCP配置命令 ■ACL访问控制列表配置 ■NAT地址转换配置 ■华为设备登录配置 <AR> system-view //进入系统模式 [AR]sysname Huawei //设备命名为Huawei [Huawei] telnet server enable //开启设备telnet功…...

编程日记 2025/6/25 1:22:09

React19源码系列之 Diff算法

在之前文章中root.render执行的过程，beginWork函数是渲染过程的核心，其针对不同类型的fiber进行不同的更新处理，在FunctionComponent（函数组件）中，会针对新旧fiber进行对比处理生成新fiber。因此此次就详细…...

编程日记 2025/6/25 5:10:16

华为2024年报：鸿蒙生态正在取得历史性突破

华为于2025年03月31日发布2024年年度报告。报告显示，华为经营结果符合预期，实现全球销售收入 8,621 亿元人民币，净利润 626 亿元人民币。2024 年研发投入达到 1,797 亿元人民币，约占全年收入的 20.8%，近十年累计投入的…...

编程日记 2025/6/24 11:09:33

如何在Firefox火狐浏览器里-安装梦精灵AI提示词管理工具

第一步：进入《梦精灵跨平台AI提示词管理工具》官网梦精灵跨平台AI提示词管理助手 - 官网梦精灵是一款专为AI用户打造的跨平台提示词管理插件，支持一键收藏、快速复制、智能分类等功能，适用于即梦、豆包、Kimi、DeepSeek等多个AI平台&…...

编程日记 2025/6/24 17:16:16

【鸿蒙开发】性能优化

语言层面的优化使用明确的数据类型，避免使用模糊的数据类型，例如ESObject。使用AOT模式 AOT就是提前编译，将字节码提前编译成机器码，这样可以充分优化，从而加快执行速度。未启用AOT时，一边运行一边进…...

编程日记 2025/6/25 6:05:56

Makefile与CMake

一、Makefile 核心内容 1. Makefile 基础结构与工作原理三要素： 目标（Target）：要生成的文件或执行的操作（如可执行文件、清理操作）。依赖（Dependency）：生成目标所需的…...

编程日记 2025/6/25 7:28:18

P8803 [蓝桥杯 2022 国 B] 费用报销

P8803 [蓝桥杯 2022 国 B] 费用报销 - 洛谷题目描述小明在出差结束后返回了公司所在的城市，在填写差旅报销申请时，粗心的小明发现自己弄丢了出差过程中的票据。为了弥补小明的损失，公司同意小明用别的票据进行报销，但是公司财…...

编程日记 2025/6/26 4:40:42

11 web 自动化之 DDT 数据驱动详解

文章目录一、DDT 数据驱动介绍二、实战一、DDT 数据驱动介绍数据驱动： 现在主流的设计模式之一（以数据驱动测试） 结合 unittest 框架如何实现数据驱动？ ddt 模块实现数据驱动的意义： 通过不同的数据对同一脚本实现…...

编程日记 2025/6/25 7:28:22

15：00开始面试，15：06就出来了，问的问题有点变态。。。

从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到4月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%…...

编程日记 2025/6/24 13:08:41

深入理解浏览器渲染引擎：底层机制与性能优化实战

现代浏览器背后是一个庞大而复杂的系统工程，渲染引擎作为核心模块之一，承担着从解析 HTML/CSS 到最终绘制页面的关键职责。本文将从底层机制出发，系统梳理渲染引擎（如 Blink）工作原理、V8 与渲染流程的协作方式&#x…...

编程日记 2025/6/23 9:57:29

【LeetCode 热题 100】56. 合并区间 —— 一文弄懂排序+遍历经典解法（附Python代码）

📌 题目链接 LeetCode 56. 合并区间 📖 一、引言：区间合并，刷题路上的绊脚石？区间类问题是算法面试中常见的经典题型，尤其是“合并区间”问题，考察你对排序、区间重叠判断及边界处理的理解和编码能力。很多同学在面对这题时，容易卡在：什么时候两个区间算重叠？…...

编程日记 2025/6/22 16:47:33

使用Mathematica绘制Clifford奇异吸引子

Clifford Attractors 是一种由微分方程生成的混沌吸引子，参数a,b,c,d不同会产生不同的分形图案。这类吸引子属于迭代函数系统，通过不断迭代参数方程来生成复杂的图形。其数学基础可能与 Clifford 代数或高维函数理论相关，例如 Clifford 代数…...

编程日记 2025/6/26 2:41:52

各个历史版本mysql/tomcat/Redis/Jdk/Apache下载地址

mysql 各版本下载地址： https://downloads.mysql.com/archives/community/ **************************************************************** tomcat 各版本下载地址： https://archive.apache.org/dist/tomcat/ ********************************…...

编程日记 2025/6/25 15:14:16

全面解析机器学习与深度学习中的模型权重文件格式与应用场景

概述随着机器学习和人工智能技术的飞速发展，高效且安全地存储、共享和部署训练有素的模型的方法变得越来越重要。模型权重文件格式在这个过程中发挥着关键作用。这些格式不仅保存了模型的学习参数，还能够实现可复现性，并且便于在各种不同环…...

编程日记 2025/6/25 1:08:30

鸿蒙OSUniApp 实现的地图定位与导航功能#三方框架 #Uniapp

UniApp 实现的地图定位与导航功能随着移动互联网的发展，地图定位与导航功能已成为众多应用的标配。本文将详细介绍如何在 UniApp 框架下实现地图定位与导航功能，并探讨如何适配鸿蒙系统，助力开发者打造更加流畅的地图体验。前言最近在做一…...

编程日记 2025/6/23 22:55:27

【HarmonyOS 5】鸿蒙星闪NearLink详解

【HarmonyOS 5】鸿蒙星闪NearLink详解一、前言鸿蒙星闪NearLink Kit 是 HarmonyOS 提供的短距离通信服务，支持星闪设备间的连接、数据交互。例如，手机可作为中心设备与外围设备（如鼠标、手写笔、智能家电、车钥匙等）通过星闪进…...

编程日记 2025/6/26 23:37:01

Java并发编程面试题总结

目录线程有哪几种状态?状态如何流转? 创建线程的方式? 多线程有什么应用? 线程池的好处? 线程池的七个参数? 为什么不推荐使用jdk的Executors创建线程池? 线程池的执行流程? 任务拒绝策略有哪些，怎么选择? 线程池的核心线程数和最大线程数怎么设定…...

编程日记 2025/6/22 1:53:47

LAMP项目部署实战

一、LAMP部署前期准备 1.1 关闭防火墙 # systemctl stop firewalld # systemctl disable firewalld 1.2 关闭SELinux SELinux(Security-EnhancedLinux)是美国国家安全局（NSA）对于强制访问控制的实现，是Linux历史上最杰出的新安全子系统。 …...

编程日记 2025/6/25 13:56:04

Dify与n8n全面对比指南：AI应用开发与工作流自动化平台选择【2025最新】

Dify与n8n全面对比指南：AI应用开发与工作流自动化平台选择【2025最新】随着AI技术与自动化工具的迅速发展，开发者和企业面临着多种平台选择。Dify和n8n作为两个备受关注的自动化平台，分别专注于不同领域：Dify主要面向AI应用开发&…...

编程日记 2025/6/24 14:44:43

VBA_NZ系列工具NZ10：VBA压缩与解压工具

我的教程一共九套及VBA汉英手册一部，分为初级、中级、高级三大部分。是对VBA的系统讲解，从简单的入门，到数据库，到字典，到高级的网抓及类的应用。大家在学习的过程中可能会存在困惑，这么多知识点该如何组织…...

编程日记 2025/6/23 18:01:31

EFT不过整改思路与调试经验

EFT是如何影响EUT的： EFT试验是为了验证电气和电子设备对诸如来自切换瞬态过程(切断感性负载、继电器触点弹跳等)的各种类型瞬变骚扰的抗扰度。EFT干扰是在电路中感性负载断开时产生的，它的特点是干扰信号不是单个脉而是一连串的脉冲群。EFT 干扰可以在…...

编程日记 2025/6/24 16:34:49

2.安卓逆向2-adb指令

免责声明：内容仅供学习参考，请合法利用知识，禁止进行违法犯罪活动！ 内容参考于：图灵Python学院工具下载： 链接：https://pan.baidu.com/s/1bb8NhJc9eTuLzQr39lF55Q?pwdzy89 提取码&#xff1…...

编程日记 2025/6/24 9:58:42

VSCode CMake工作流

Foreword 之前看到CMake有这么多选项，感觉不简单，还是看下别人在这里设计了多少东西 CMake 整体来说CMake遵循这样一套结构操作-操作预设（如果有的话）-操作目标（如果有的话）比如 Configure-Configure…...

编程日记 2025/6/23 19:03:24

【上位机——WPF】App.xml和Application类简介

App.xml和Application类简介概述App.xamlApp.xaml.cs 入门代码App.xamlMainWindow.xml Application生命周期窗体的声明周期概述 xaml类型的文件包含两部分，一部分以.xaml扩展名结尾的前端代码，另一部分以.xaml.cs结尾的后端代码，通常我们也…...

编程日记 2025/6/24 23:35:17

MySQL 8.0 OCP 1Z0-908 101-110题

Q101.which two queries are examples of successful SQL injection attacks? A.SELECT id, name FROM backup_before WHERE name‘; DROP TABLE injection; --’; B. SELECT id, name FROM user WHERE id23 oR id32 OR 11; C. SELECT id, name FROM user WHERE user.id (SEL…...

编程日记 2025/6/25 20:53:57