TaskFlow是一款基于Next.js全栈框架开发的轻量级、高性能的网页端个人任务管理工具，专为现代职场人士和个人用户精心设计。系统聚焦于用户个人任务的全生命周期管理，从任务创建、分类整理、进度跟踪到完成归档的每一个环节，都提供了直观高效的操作体验。
通过清晰的任务分类功能和直观的可视化界面，TaskFlow帮助用户建立结构化的时间管理体系，有效解决任务堆积、优先级混乱和重要事项遗漏等常见痛点。系统支持多维度的任务组织方式，让用户能够根据工作性质、紧急程度和个人习惯灵活管理日常待办事项，真正实现任务驱动的高效工作流。
无论是管理工作项目、规划个人学习路径，还是组织日常生活安排，TaskFlow都能提供一致流畅的用户体验，帮助用户提升时间管理效率，减少任务遗漏，让工作和生活更加有序高效。
- 克隆仓库
git clone <repository-url>
cd next.js-taskflow- 安装依赖
npm install
# 或
yarn install-
配置环境变量 按照上述
.env.local配置要求创建并配置文件 -
启动开发服务器
npm run dev
# 或
yarn dev- 构建生产版本
npm run build
# 或
yarn build- 运行生产版本
npm start
# 或
yarn start- React 19: 构建用户界面的核心库
- TypeScript: 提供类型安全的开发体验
- Next.js 16: React框架，提供服务端渲染和路由功能
- Tailwind CSS 4: 实用优先的CSS框架，用于快速构建现代UI
- i18next: 国际化解决方案，支持多语言切换
- Next.js API Routes: 实现后端接口逻辑
- MySQL: 数据存储，通过mysql2模块连接
- jsonwebtoken: 用户认证和授权
- Node.js: v16或更高版本
- npm 或 yarn: 包管理工具
- MySQL: v5.7或更高版本
- 安全的账号体系: 支持注册、登录功能，使用JWT进行身份验证
- 全流程任务管理: 实现任务的创建、编辑、删除、完成状态切换等基础操作
- 任务结构化分类: 支持按标签、优先级、截止时间对任务进行分类筛选
- 国际化支持: 内置多语言切换功能，适配不同语言使用习惯
- 主题定制: 支持页面颜色主题切换，满足个性化视觉需求
- 登录: 支持邮箱/用户名+密码登录，记录并显示上次登录时间和地点
- 注册: 需提供用户名+邮箱+新密码，注册成功后自动创建用户专属任务表并跳转至登录页面
- 语言切换: 右上角提供国际化按钮，支持中英文切换
- 左侧: 展示logo和系统标题
- 右侧: 包含任务管理页面切换、关于我们链接及用户信息展示
- 右侧边栏: 提供新建任务按钮，展示所有任务列表，点击任务可查看详情
- 左侧内容区: 根据选中状态显示新建任务表单或任务详情，支持任务编辑与删除操作
| 字段名 | 类型 | 描述 |
|---|---|---|
| id | INT | 用户ID（主键） |
| user_name | VARCHAR | 用户名 |
| VARCHAR | 邮箱 | |
| password | VARCHAR | 密码（加密存储） |
| last_location | VARCHAR | 上次登录地点 |
| last_login_time | DATETIME | 上次登录时间 |
| create_time | DATETIME | 注册时间 |
| is_enable | TINYINT | 逻辑删除字段（1:启用，0:禁用） |
| 字段名 | 类型 | 描述 |
|---|---|---|
| id | INT | 任务ID（主键） |
| user_id | INT | 用户ID（外键） |
| task_name | VARCHAR | 任务名称 |
| task_create_time | DATETIME | 任务创建时间 |
| task_content | TEXT | 任务内容/描述 |
| task_status | TINYINT | 任务状态（0:未完成，1:已完成） |
- 用户注册接口
- 用户登录接口
- 任务创建接口
- 任务删除接口
- 任务编辑接口
- 任务列表查询接口
在项目根目录创建 .env.local 文件，并添加以下配置：
# MySQL 数据库配置
MYSQL_HOST=localhost
MYSQL_PORT=3306
MYSQL_USER=root
MYSQL_PASSWORD=your_database_password
MYSQL_DATABASE=taskflow_db
# JWT 配置
JWT_SECRET=your_jwt_secret_key本项目主要用于学习Next.js全栈开发，后端API直接在Next.js的API Routes中实现；
没有使用ORM框架。数据库操作采用原生SQL查询，为了简化开发流程；
没有提供真正的JWT验证功能；
项目的数据库设计和数据类型设计并不完美；
未进行深入的性能优化，React组件也仅实现了基本功能；
未使用Next.js的中间件进行鉴权；
Bug：在本地存储强行添加token可以跳过登录；
- 数据库连接信息请根据实际环境配置
- 生产环境中请设置强密码并妥善保管JWT_SECRET
- 开发环境中如有跨域问题，请根据需要配置CORS
- 本项目仅适用于Next.js练习项目，不建议在生产环境中使用
TaskFlow is a lightweight, high-performance web-based personal task management tool developed using the Next.js full-stack framework, specifically designed for modern professionals and individual users. The system focuses on the full lifecycle management of users' personal tasks, providing an intuitive and efficient user experience from task creation, categorization, progress tracking to completion and archiving.
Through clear task categorization functionality and an intuitive visual interface, TaskFlow helps users establish a structured time management system, effectively addressing common pain points such as task accumulation, priority confusion, and missed important matters. The system supports multi-dimensional task organization methods, allowing users to flexibly manage daily to-do items according to work nature, urgency, and personal habits, truly achieving task-driven efficient workflow.
Whether it's managing work projects, planning personal learning paths, or organizing daily life arrangements, TaskFlow provides a consistently smooth user experience, helping users improve time management efficiency, reduce task omissions, and make work and life more organized and productive.
- Clone the repository
bash
git clone <repository-url>
cd next.js-taskflow
- Install dependencies
bash
npm install
# or
yarn install
- Configure environment variables Follow the
.env.localconfiguration requirements mentioned above to create and configure the file - Start the development server
bash
npm run dev
# or
yarn dev
- Build the production version
bash
npm run build
# or
yarn build
- Run the production version
bash
npm start
# or
yarn start
- React 19: Core library for building user interfaces
- TypeScript: Provides type-safe development experience
- Next.js 16: React framework with server-side rendering and routing capabilities
- Tailwind CSS 4: Utility-first CSS framework for quickly building modern UIs
- i18next: Internationalization solution supporting multi-language switching
- Next.js API Routes: Implement backend interface logic
- MySQL: Data storage, connected via mysql2 module
- jsonwebtoken: User authentication and authorization
- Node.js: v16 or higher
- npm or yarn: Package management tools
- MySQL: v5.7 or higher
- Secure Account System: Supports registration and login functionality, using JWT for identity authentication
- Complete Task Lifecycle Management: Implements basic operations such as task creation, editing, deletion, and completion status switching
- Structured Task Categorization: Supports filtering tasks by tags, priority, and deadline
- Internationalization Support: Built-in multi-language switching functionality, adapting to different language usage habits
- Theme Customization: Supports page color theme switching to meet personalized visual needs
- Login: Supports email/username + password login, records and displays last login time and location
- Registration: Requires username + email + new password, automatically creates user-specific task table after successful registration and redirects to login page
- Language Switching: Provides internationalization button in the upper right corner, supporting Chinese-English switching
- Left Side: Displays logo and system title
- Right Side: Contains task management page switching, about us link, and user information display
- Right Sidebar: Provides new task button, displays all task lists, clicking on a task allows viewing details
- Left Content Area: Shows new task form or task details based on selected status, supports task editing and deletion operations
| Field Name | Type | Description |
|---|---|---|
| id | INT | User ID (primary key) |
| user_name | VARCHAR | Username |
| VARCHAR | ||
| password | VARCHAR | Password (encrypted storage) |
| last_location | VARCHAR | Last login location |
| last_login_time | DATETIME | Last login time |
| create_time | DATETIME | Registration time |
| is_enable | TINYINT | Logical deletion field (1: enabled, 0: disabled) |
| Field Name | Type | Description |
|---|---|---|
| id | INT | Task ID (primary key) |
| user_id | INT | User ID (foreign key) |
| task_name | VARCHAR | Task name |
| task_create_time | DATETIME | Task creation time |
| task_content | TEXT | Task content/description |
| task_status | TINYINT | Task status (0: incomplete, 1: completed) |
- User registration interface
- User login interface
- Task creation interface
- Task deletion interface
- Task editing interface
- Task list query interface
Create a .env.local file in the project root directory and add the following configuration:
Apply
# MySQL database configuration
MYSQL_HOST=localhost
MYSQL_PORT=3306
MYSQL_USER=root
MYSQL_PASSWORD=your_database_password
MYSQL_DATABASE=taskflow_db
# JWT configuration
JWT_SECRET=your_jwt_secret_key
This project is primarily used for learning Next.js full-stack development, with backend APIs directly implemented in Next.js API Routes;
No ORM framework is used. Database operations use native SQL queries to simplify the development process;
No real JWT verification functionality is provided;
The database design and data type design are not perfect;
In-depth performance optimization has not been conducted, and React components only implement basic functionality;
Next.js middleware is not used for authentication;
Bug: Forcing the addition of tokens in local storage can bypass login;
- Please configure database connection information according to the actual environment
- Please set a strong password and properly secure JWT_SECRET in the production environment
- If there are cross-domain issues in the development environment, please configure CORS as needed
- This project is only suitable for Next.js practice projects