从零搭建 SEO 双站：在线工具箱 + AI 导航站

这个项目是一套代码跑两个站：一个在线工具箱（12 个工具）和一个 AI 工具导航站，纯静态导出，目标是靠 SEO 自然流量 + 广告变现。

整体架构

flowchart LR
    subgraph 源码["一套 Next.js 代码库"]
        SRC[src/app 11语言路由]
        TOOLS[12个工具组件]
        DICT[字典文件]
    end
    subgraph 构建["静态导出 out/"]
        ZH[zh/*.html]
        EN[en/*.html]
        AR[ar/*.html RTL]
        XML[sitemap.xml]
    end
    subgraph 部署["服务器 Nginx"]
        TOOL[工具站 domain]
        AI[导航站 domain]
    end
    SRC --> 构建
    TOOLS --> 构建
    DICT --> 构建
    构建 --> TOOL
    构建 --> AI

核心思路：一套代码、一次构建、双站部署。两个站点共用同一份静态产物，只覆盖各自的 sitemap 和首页跳转逻辑。

技术选型

维度	选择	理由
框架	Next.js 16	SSR 输出静态 HTML，天然适配 SEO
样式	Tailwind CSS v4	原子化，逻辑属性支持 RTL
部署	静态导出 (output: 'export')	快、便宜、安全、可批量

12 个在线工具

分类	工具
文本处理	JSON 格式化、Base64、URL 编解码、正则测试、文本对比、字数统计
生成	UUID、时间戳转换、MD5/SHA 哈希、颜色转换
实用	二维码生成、IP 查询

每个工具是独立的动态路由页，都配了教程、示例和 FAQ，避免"纯工具页"对搜索引擎不友好。

核心路由结构：

src/app/[lang]/tools/[slug]/page.tsx   # 动态工具页
src/components/tools/*.tsx             # 工具组件
src/lib/tool-content.ts                # 教程/FAQ 内容

多语言与 RTL

支持 11 种语言，其中阿拉伯语是 RTL（从右到左）。关键点：

1. 静态导出下每语言生成独立目录
2. 字典文件管理翻译，共享键优先
3. RTL 适配：动态设置 dir="rtl"，物理属性改逻辑属性

// 根据路径判断语言，动态设置方向
var m = location.pathname.split('/')[1];
document.documentElement.dir = (m === 'ar') ? 'rtl' : 'ltr';

SEO 基础设施

• sitemap.xml / robots.txt：搜索引擎发现入口
• 每页独立 meta 描述 + JSON-LD 结构化数据
• 站长验证文件（Google + 百度）放进版本库防流失

性能优化

统计脚本会抢首屏网络资源，改成 load 后延迟注入：

window.addEventListener('load', function(){
  setTimeout(loadStats, 1500); // 首屏稳定后再加载统计
});

踩过的坑

坑	原因	解决
二维码文件丢失	游离文件不在版本库，全量部署被删	所有资源进 public/
构建卡死	Turbopack 缓存损坏	清 .next + node_modules/.cache
工具页 301	nginx 缺路由配置	补充 try_files 规则

这个项目仍在持续迭代，是验证 SEO 增长 + 广告变现的重要实践。