更新记录

1.1.0（2025-09-19） 下载此版本

v1.1.0 新功能

1.0.0（2025-07-14） 下载此版本

• v1.0.0
  • 一键创建 Next.js 项目
  • 启动 Next.js 开发服务器
  • 构建 Next.js 项目
  • 预览 Next.js 生产环境

平台兼容性

HBuilderX插件通用注意事项

HBuilderX-2.7.12以下版本安装插件市场内的插件后，卸载时需手动卸载，详细教程参考：如何手动卸载插件

# HBuilderX Next.js 工具插件

插件简介

本插件为 HBuilderX 提供 Next.js 项目开发的常用工具命令，帮助开发者在 HBuilderX 内高效创建、开发、构建和预览 Next.js 项目。

版本更新

v1.1.0 新功能 🎉

• ✨ 智能项目检测：自动识别 Next.js 项目，提供相应提示
• 🎯 用户体验优化：增强的日志输出、进度提示、错误处理
• 🛠️ 新增实用命令：安装依赖、清理缓存、打开浏览器
• 🔄 进程管理：支持进程状态跟踪和清理
• 📝 友好提示：带时间戳的彩色日志输出

主要功能

核心功能

• 🚀 一键创建 Next.js 项目
• 🔧 启动 Next.js 开发服务器
• 📦 构建 Next.js 项目
• 👀 预览 Next.js 生产环境

新增功能 (v1.1.0)

• 📦 安装依赖：快速执行 npm install
• 🧹 清理缓存：清理 .next 和 node_modules/.cache 目录
• 🌐 打开浏览器：快速打开指定 URL（默认 localhost:3000）

安装与调试

1. 使用 HBuilderX 打开本插件工程目录。
2. 点击工具栏的"运行"按钮，或按快捷键 Ctrl + r（Mac 下为 Cmd + r），会打开一个新的 HBuilderX 窗口并加载插件。
3. 在新窗口中即可通过右键菜单或命令面板（F1）使用插件命令。
4. 修改插件代码后，需重新运行插件窗口以生效。

命令列表及使用说明

1. 创建 Next.js 项目

• 命令名称：创建 Next.js 项目
• 触发方式：右键菜单或命令面板输入"创建 Next.js 项目"
• 功能说明：
  • 输入项目名称和目标路径
  • 自动执行 create-next-app <项目名> 创建新项目
  • 支持项目名称验证
  • 显示创建进度和详细日志
  • 创建完成后自动打开项目文件夹

2. 启动 Next.js 开发服务器

• 命令名称：启动 Next.js 开发服务器
• 触发方式：右键菜单或命令面板输入"启动 Next.js 开发服务器"
• 功能说明：
  • 智能检测当前是否为 Next.js 项目
  • 在当前项目目录下执行 npm run dev
  • 自动检测服务器启动状态
  • 服务器启动成功后提供"打开浏览器"选项

3. 构建 Next.js 项目

• 命令名称：构建 Next.js 项目
• 触发方式：右键菜单或命令面板输入"构建 Next.js 项目"
• 功能说明：
  • 验证当前目录为 Next.js 项目
  • 在当前项目目录下执行 npm run build
  • 显示构建进度和详细日志
  • 构建完成后显示成功提示

4. 预览 Next.js 项目

• 命令名称：预览 Next.js 项目
• 触发方式：右键菜单或命令面板输入"预览 Next.js 项目"
• 功能说明：
  • 验证当前目录为 Next.js 项目
  • 检查项目是否已构建，未构建时提供构建选项
  • 在当前项目目录下执行 npm run start
  • 服务器启动成功后提供"打开浏览器"选项

5. 安装依赖 🆕

• 命令名称：安装依赖
• 触发方式：右键菜单或命令面板输入"安装依赖"
• 功能说明：
  • 检查当前目录是否包含 package.json
  • 执行 npm install 安装项目依赖
  • 显示安装进度和详细日志
  • 支持安装过程的状态提示

6. 清理缓存 🆕

• 命令名称：清理缓存
• 触发方式：右键菜单或命令面板输入"清理缓存"
• 功能说明：
  • 清理 .next 构建缓存目录
  • 清理 node_modules/.cache 缓存目录
  • 操作前显示确认对话框
  • 显示清理进度和结果

7. 打开浏览器 🆕

• 命令名称：打开浏览器
• 触发方式：右键菜单或命令面板输入"打开浏览器"
• 功能说明：
  • 支持输入自定义 URL（默认 localhost:3000）
  • 自动检测操作系统并使用相应的打开命令
  • 支持 macOS、Windows、Linux 系统
  • URL 格式验证

智能功能特性

🔍 项目检测

• 自动检测当前目录是否为 Next.js 项目
• 检查 package.json 中的 Next.js 相关依赖
• 根据项目类型提供相应的操作建议

📊 用户体验优化

• 带时间戳的日志：所有操作都有详细的时间记录
• 彩色状态提示：使用 emoji 和符号区分不同类型的消息
• 进度指示：状态栏显示当前操作进度
• 智能提示：根据操作结果提供后续建议

🔄 进程管理

• 跟踪所有运行中的进程
• 插件卸载时自动清理进程
• 防止进程泄漏和资源占用

⚠️ 错误处理

• 完善的错误捕获和处理机制
• 友好的错误提示信息
• 详细的错误日志记录

注意事项

• 请确保已在本地全局安装 Node.js 和 npm
• 各命令需在相应的项目目录下执行
• 创建项目时会使用淘宝镜像源以提高下载速度
• 长时间运行的操作（如安装依赖）可以在输出面板查看进度
• 插件会自动管理进程，无需手动清理

系统兼容性

• 操作系统：支持 macOS、Windows、Linux
• HBuilderX 版本：要求 2.7.0 及以上版本
• Node.js 版本：建议使用 Node.js 16+ 版本

开发与贡献

如需查看更多插件开发文档，请访问：https://hx.dcloud.net.cn

更新日志

v1.1.0 (2024-09-19)

• ✨ 新增智能项目检测功能
• 🎯 优化用户体验，增加进度提示和彩色日志
• 🛠️ 新增"安装依赖"命令
• 🧹 新增"清理缓存"命令
• 🌐 新增"打开浏览器"命令
• 🔄 改进进程管理和错误处理
• 📝 完善文档和使用说明

v1.0.0 (2024-09-18)

• 🚀 初始版本发布
• 基础的 Next.js 项目创建、开发、构建、预览功能

如有建议或问题，欢迎反馈！