前言 🚀
最近接了个有点意思的“私活”：帮一家本地老牌家政公司——宜兴雅茹家政 (Yaru Care) 做官网重构。
客户的需求很典型，也很“痛”：
- 只要静态页：之前的 WordPress 维护太麻烦，经常被挂马，客户点名要“没有后台”的纯静态页面。
- SEO 必须强：要在百度搜“宜兴保洁”、“月嫂”时排前面，毕竟这是他们吃饭的家伙。
- 性能要炸裂：移动端打开要秒开，不能让大妈们等。
面对这种需求，我没有选择传统的 jQuery 或者 Vue SPA，而是直接上了 Next.js 15 (App Router) + Google Genkit + Shadcn/ui。
很多人可能会说：“做一个展示型官网，至于上 Next.js 15 吗？”
我的结论是：至于！对于强依赖 SEO 的本地服务行业，SSR/SSG 才是降维打击。
今天就来复盘一下这套架构的落地细节。
🛠️ 技术选型：为何是 Next.js 15？
项目采用了 Next.js 的 output: 'export' 模式。
这意味着构建出来的产物是纯静态 HTML/CSS/JS，可以直接扔到 Nginx、Vercel 甚至 OSS 对象存储上，完全不需要 Node.js 服务器运行环境，安全性和速度直接拉满。
1. 动态路由的静态化 (SSG)
雅茹家政的业务主要分两块：B端工程保洁 和 C端家庭服务，且覆盖 宜兴 和 上海 两地。
如果用 SPA，搜索引擎很难抓取到这些深层页面的内容。但在 Next.js 15 中，我们可以用 generateStaticParams 把这些页面全部“预渲染”出来。
看看这段核心代码：
TypeScript
// app/services/[city]/[type]/page.tsx
// 核心：在 Build 阶段告诉 Next.js 要生成哪些 HTML
export async function generateStaticParams() {
// 定义业务枚举
const cities = ['yixing', 'shanghai'];
const services = [
'engineering-cleaning', // 工程开荒
'nanny', // 金牌月嫂
'elderly-care' // 养老陪护
];
// 排列组合，生成所有可能的路径
return cities.flatMap((city) =>
services.map((type) => ({
city,
type,
}))
);
}
// 页面组件
export default function ServicePage({ params }: { params: { city: string; type: string } }) {
// 这里的 props 在构建时就已经确定了
// 最终产物：/services/yixing/engineering-cleaning.html
return <ServiceDetail city={params.city} type={params.type} />;
}
这样构建完，目录下全是实打实的 HTML 文件，百度蜘蛛（Baidu Spider）狂喜。🕷️
🔍 SEO 策略：Metadata 的千人千面
做家政官网，SEO 是生命线。如果所有页面标题都叫“雅茹家政”，那就废了。
我们需要针对不同的服务，注入精准的 TDK (Title, Description, Keywords)。
利用 Next.js 的 Metadata API，我封装了一个动态生成器：
TypeScript
// lib/seo-helper.ts
import type { Metadata } from 'next';
export function getMetadata(city: string, type: string): Metadata {
const brand = "宜兴雅茹家政";
const region = city === 'yixing' ? '宜兴' : '上海';
// 场景1：针对找工厂保洁的 B 端客户
if (type === 'engineering-cleaning') {
return {
title: `${region}厂房开荒_工程保洁_外墙清洗 - ${brand}`,
description: `专注${region}企业清洁服务，提供新建厂房开荒、写字楼驻场保洁及石材养护。自有设备，正规发票。`,
keywords: [`${region}保洁公司`, '厂房开荒', '开荒保洁价格', brand],
};
}
// 场景2：针对找保姆的 C 端客户
if (type === 'nanny') {
return {
title: `${region}金牌月嫂_育儿嫂_住家保姆 - ${brand}`,
description: `${brand}提供专业的母婴护理服务，所有月嫂均经过背景调查与健康体检，持证上岗，安全放心。`,
keywords: [`${region}月嫂公司`, '育儿嫂价格', '照顾老人', brand],
};
}
return { title: `${brand} - 官方网站` };
}
效果立竿见影：
当用户在百度搜“宜兴厂房开荒”时，我们的页面标题精准命中需求，点击率（CTR）比那种通用的“XX家政公司”高出不少。
🤖 AI 赋能：Genkit 在后端的应用
这是个尝试性的功能。传统家政公司的痛点是“没文案”。以前发个案例就是一张图，没有文字，SEO 根本抓不到。
这次我引入了 Google Genkit SDK。
在本地构建脚本中，我写了一个小工具：当读取到一张新的案例图片（比如“清洗地毯.jpg”）时，调用 AI 自动生成一段描述：
“本案例展示了宜兴雅茹家政在某高档写字楼进行的化纤地毯清洗服务，使用了专业抽洗机和进口清洁剂，有效去除了深层污渍...”
这些由 AI 生成的文本会被直接打包进 HTML 的 alt 标签和正文中。这样，即使是不懂运营的阿姨上传图片，网站也能拥有高质量的 SEO 文本。✨
⚡ 性能表现 (Lighthouse)
既然是 output: 'export' 的纯静态站，性能自然是没得说。
配合 Tailwind CSS 的自动 Purge 和 Next.js 的图片优化，Lighthouse 跑分轻松全绿。
- FCP (First Contentful Paint) : 0.8s
- LCP (Largest Contentful Paint) : 1.2s
- SEO: 100分
对于需要在 3G/4G 环境下查看案例的客户来说，这个速度体验是非常关键的。
总结
这次重构证明了 Modern Web 技术栈（Next.js + AI） 在传统行业依然大有可为。
它不仅解决了客户最关心的 收录 和 速度 问题，还极大降低了服务器维护成本（扔到 OSS 上一年也就几块钱）。
如果你也对 Next.js 全栈开发或者传统企业数字化感兴趣，欢迎来我的线上项目“找茬”：
👉 线上实战演示：宜兴雅茹家政官网 (www.yarucare.com)
(如果有宜兴本地的朋友需要开荒或者找阿姨，也可以顺便看看我们的服务 😂，技术人保真！)
