自部署多语言SEO工具站 Next.js

自部署多语言SEO工具站 Next.js

介绍

自部署在线工具站是一套基于 Next.js + React + TypeScript 构建的多语言 SEO 工具集，覆盖开发辅助、文本处理、时间转换、图片编辑、编码解码及常用生成等场景。支持简洁自部署，路由级多语言优化，适合个人或团队快速搭建功能型工具站，便于学习 Next.js 全栈开发与 SEO 实践。

使用说明

方式适合场景操作
Vercel零配置快速上线Deploy on Vercel
Docker云服务器 / NAS / 自托管见下方 docker pull
Node.js已有 Node.js 20 环境npm install && npm run build && npm run start

Docker 部署

docker pull licoy/utils.fun:latestdocker run -d \--name utils-fun \--restart unless-stopped \-p 3000:3000 \licoy/utils.fun:latest

访问 http://localhost:3000。

本地开发

npm installnpm run dev

站点配置

站点品牌与部署配置优先通过根目录下列文件维护：

  • site.config.default.ts

  • site.config.dev.ts

  • site.config.prod.ts

其中 i18n 字段可以按语言覆盖：

  • title

  • description

  • footerHtml

  • logoAlt

生产环境还支持全局环境变量覆盖：

SITE_TITLE SITE_TITLE_SEPARATOR SITE_DESCRIPTION SITE_URL SITE_LOGO_SRC SITE_LOGO_ALT SITE_LOGO_WIDTH SITE_LOGO_HEIGHT SITE_LOGO_HIDDEN SITE_FOOTER_HTML SITE_GITHUB_URL

开发检查

npm run lintnpm run build

新增工具

  1. 在 lib/tools/registry.ts 和 lib/tools/content/* 中补充工具元信息。

  2. 在 components/tool-icon.tsx 中补充工具图标。

  3. 在 components/tool-workbench.tsx 中注册工具实现。

  4. 执行 npm run lint 与 npm run build。

图片演示

自部署多语言SEO工具站 Next.js 图片