一个基于 Next.js 16 App Router 构建的 WebTools 集合框架。
项目目标不是只做几个固定工具，而是提供一套可持续扩展的工具站基础设施：统一的工具注册机制、分类体系、页面布局、SEO、国际化、主题切换，以及本地收藏 / 历史记录能力。你可以把它作为一个网页工具站的起点，在此基础上持续添加新的工具模块。
- 面向浏览器内即用的在线工具集合
- 工具逻辑与框架解耦，便于持续新增工具
- 支持中英文双语路由
- 支持工具级 SEO 元数据、Sitemap、robots、JSON-LD
- 支持亮色 / 暗色主题切换
- 基于 Zustand 本地持久化收藏夹与浏览记录
- 无账号系统、无数据库、无后端业务依赖
当前仓库已经内置的能力包括：
- 工具首页、分类浏览、搜索
- 工具详情页统一布局
- 收藏页与历史记录页
- 工具注册表
src/tools/registry.ts - 分类定义
src/tools/categories.ts - 工具 UI 组件库
src/components/tool-ui/ - 国际化资源
src/i18n/ - SEO 公共能力
src/lib/seo.ts
当前示例工具包括：
- Base64 编解码
- JSON 格式化
- JSON / TOML 转换
- 罗马数字转换
- 字符串格式转换
- Next.js 16.2.4
- React 19
- TypeScript 5
- Tailwind CSS 4
- shadcn/ui
- next-intl
- Zustand
- Monaco Editor（按需加载）
src/
├── app/ # App Router 路由与页面
├── components/ # 布局、共享组件、tool-ui 组件库
├── tools/ # 每个工具的 meta/core/ui 实现
├── i18n/ # 语言配置与翻译资源
├── lib/ # SEO 与通用工具函数
├── store/ # 收藏夹、历史记录的 Zustand store
└── types/ # Tool / Category 等核心类型
完整说明见：
- Node.js 20.9+
- npm 10+
npm installnpm run dev默认访问：
http://localhost:3000
根路径会自动重定向到默认语言路由：
/zh
npm run lintnpm run buildnpm run start这是一个标准的 Next.js 16 应用。按 Next.js 官方文档，最小可运行部署形态就是一个 Node.js 服务进程，因此最直接的部署方式有两类：
- 部署到 Vercel 一类的托管平台
- 自托管 Node.js 服务，使用
next build+next start
如果你需要正确生成 canonical、Open Graph URL、sitemap 等 SEO 地址，请在部署环境中设置：
NEXT_PUBLIC_SITE_URL=https://your-domain.com仓库当前的 SEO URL 构造逻辑位于：
npm install
npm run build
npm run start如果通过反向代理对外提供服务，只需要把外部域名与 NEXT_PUBLIC_SITE_URL 保持一致。
这个项目的扩展核心在 src/tools/。每个工具通常由三个文件组成：
src/tools/your-tool/
├── meta.ts # 工具元数据
├── core.ts # 纯业务逻辑
└── index.tsx # 工具 UI
接入一个新工具的基本流程：
- 确认目标分类存在，不存在就先添加分类
- 在
src/tools/<tool-id>/下创建工具目录 - 编写
meta.ts、core.ts、index.tsx - 在
src/tools/registry.ts中注册工具 - 在
src/components/shared/ToolClientLoader.tsx中接入动态加载 - 为中英文分别添加翻译文件
- 为工具补齐描述、富文本与 SEO 信息
详细步骤直接看：
这个框架不是把 SEO 当成附加项，而是把它作为工具站的基础设施来设计。
当前实现包括：
- 每个工具页通过
generateMetadata生成独立标题与描述 - 自动生成
sitemap.xml - 自动生成
robots.txt - canonical 与 hreflang 语言映射
- JSON-LD 结构化数据
- 工具页采用 SSR Shell + CSR Tool 模式，保证爬虫能看到页面主内容与富文本
关键入口：
项目使用 next-intl，通过语言前缀路由区分不同语言版本：
/zh/.../en/...
当前约定：
- 框架通用文案放在
src/i18n/locales/*/common.json - 每个工具拥有独立的
tools/<tool-id>.json - 默认语言由
src/i18n/config.ts管理 - 路由中间件负责处理语言匹配与跳转
相关入口：
项目当前不依赖后端存储，用户相关状态完全保存在浏览器本地：
- 收藏夹
- 浏览记录
实现基于 Zustand 持久化中间件，相关说明见：
这个仓库适合：
- 想快速搭建一个工具导航 + 工具详情站点
- 想持续维护多个独立网页工具，但不希望每次都重复搭建外层框架
- 需要多语言与 SEO 收录能力的工具站
- 希望先以纯前端工具为主，避免引入数据库和账号体系
当前不包含：
- 用户系统
- 数据库
- 工具插件市场
- 服务端执行型工具引擎
本项目采用 MIT License，详细条款请见仓库根目录的 LICENSE 文件。