[全栈复盘] Next.js 15 + Genkit：重构传统家政服务平台的架构演进

公告

Posted on 2026-01-09 11:13 张超的博客阅读(3) 评论(0) 收藏举报

前言

最近交付了一个非常有意思的全栈项目——宜兴雅茹家政（Yaru Care）的数字化平台。

这是一个典型的“传统行业+新技术”的碰撞案例。客户的业务横跨 C 端（月嫂/护工）和 B 端（工程开荒/驻场保洁），业务范围覆盖上海和宜兴两地。

作为开发者，我面临的技术挑战主要有三点：

SEO 是刚需： 必须在搜索引擎拿到地域+业务关键词的排名（如“宜兴保洁”、“高端月嫂”）。
性能要求极致： 客户要求页面秒开，且由于服务器预算有限，最终交付物最好是纯静态资源（Static Assets）。
智能化尝试： 需要引入 AI 能力来处理后台的内容生成。

最终，我放弃了传统的 PHP/CMS 方案，采用了一套目前业内较新的技术栈：Next.js 15 (App Router) + Google Genkit + Shadcn/ui。

本文就从架构选型、SEO 策略及静态化构建三个维度进行复盘。

一、为什么选这套“过度设计”的技术栈？

看到 package.json，很多人可能会问：做一个企业官网，至于上 Next.js 15 和 Genkit 吗？

我的答案是：对于服务型行业，快就是订单，智能就是降本。

核心依赖分析

Next.js 15.3.3: 项目底座。利用其 SSG（Static Site Generation） 能力，在构建时将页面预渲染成 HTML，直接解决了 SEO 和首屏加载问题。
Google Genkit (@genkit-ai/*): 这是一个亮点。我们利用 Genkit 接入了 LLM，用于后台自动生成不同业务线的 SEO 文案描述。
Shadcn/ui + Tailwind: 拒绝手写 CSS，利用 Headless 组件库快速堆砌界面，保证了 UI 的现代化和统一性。

二、架构核心：从动态业务到静态产物 (SSG)

客户的一个硬性要求是部署简单，希望通过 npm run build 生成纯静态文件部署到 Nginx 或 CDN 上。在 Next.js 15 中，我们采用了 output: 'export' 模式。

1. 动态路由的静态化 (generateStaticParams)

项目业务涵盖“工程保洁”和“家庭护理”，且有“上海/宜兴”两个地域。为了让这些动态路径生成静态 HTML 以利于收录，我们在 app/services/[city]/[type]/page.tsx 中使用了 generateStaticParams：

// app/services/[city]/[type]/page.tsx

// 在构建时生成所有可能的路径组合
export async function generateStaticParams() {
  const cities = ['yixing', 'shanghai'];
  const services = ['engineering-cleaning', 'home-care', 'nanny', 'elderly-care'];

  // 生成笛卡尔积，覆盖所有业务场景
  return cities.flatMap((city) =>
    services.map((type) => ({
      city,
      type,
    }))
  );
}

export default function ServicePage({ params }: { params: { city: string; type: string } }) {
  // 这里的渲染逻辑在 build 阶段就会执行完毕
  // 最终生成如 /services/yixing/engineering-cleaning.html 的纯静态文件
  return <ServiceDetail city={params.city} type={params.type} />;
}

2. 图像优化与 CLS 控制

家政网站图片素材较多（案例图、人员展示）。为了避免布局偏移（CLS），我们强制使用了 Next.js 的 <Image> 组件。

注意： 在静态导出模式（output: 'export'）下，Next.js 自带的图片优化服务会失效。我们需要配置 unoptimized: true 或者配置自定义的 loader（如 Cloudinary/AliOSS），本项目选择了自定义 loader 以适配纯静态环境。

三、 SEO 2.0：基于 Metadata API 的精准流量捕获

传统的 HTML5 开发通常是写死 meta 标签，但在 Next.js 15 中，我们可以动态生成结构化的 Metadata。

针对项目背景（上海品牌、宜兴落地），我们定制了如下策略：

// lib/metadata.ts
import type { Metadata } from 'next';

export function generateServiceMetadata(city: string, serviceType: string): Metadata {
  const baseTitle = city === 'yixing' ? '宜兴雅茹家政' : '上海雅茹家政';
  
  // 策略：针对 B 端工程业务的差异化 TDK
  if (serviceType === 'engineering-cleaning') {
    return {
      title: `${baseTitle} - 专业工程开荒_厂房清洗_写字楼驻场服务`,
      description: `雅茹家政${city}分公司提供专业的工程保洁服务，包括新建厂房开荒、外墙清洗及石材养护，上海标准验收。`,
      keywords: ['宜兴工程保洁', '厂房开荒', '驻场保洁', '雅茹家政'],
    };
  }

  // 策略：针对 C 端家庭业务
  return {
    title: `${baseTitle} - 高端月嫂_住家保姆_养老护工推荐`,
    description: `${baseTitle}（始于2015年）提供自营月嫂、育儿嫂及养老护工服务，员工制管理，安全可靠。`,
  };
}

这样一来，当爬虫抓取页面时，看到的是精准匹配 B 端需求的 Title，而不是通用的“家政公司”，极大提升了垂直领域的搜索排名。

四、 Genkit 加持：AI 如何赋能传统业务？

这是本项目引入 @genkit-ai/googleai 的主要原因。

在传统的企业官网，内容更新往往依赖人工。通过 Genkit，我们在后端构建流程中做了一层内容增强。

场景：智能案例解析

我们在后台集成了一个基于 Genkit 的处理流。当运营人员上传一个新的服务案例（比如“某工业园区开荒图片”）时：

Genkit 自动识别图片内容（“环氧地坪”、“高空作业”）。
自动生成符合 SEO 规范的 alt 描述和一段 100 字左右的技术摘要。
数据注入到静态数据源中。

这让官网不仅仅有硬广，还有了大量高质量的行业知识（Knowledge Base），有效提升了长尾词的覆盖率。

五、部署与性能复盘

执行 npm run build 后，Next.js 会在 out 目录下生成纯静态资源。

HTML: 预渲染完成，SEO 友好。
JS: 被 Webpack/Turbopack 拆分为极小的 chunks，首屏 JS 体积控制在 40kb 以内。
CSS: Tailwind 自动 purge，只保留用到的样式。

Lighthouse 跑分结果：

Performance: 98
SEO: 100
Accessibility: 100

由于是静态文件，我们直接部署在了边缘节点上，无论是上海的老客户还是宜兴的新客户，访问速度都在毫秒级。

总结

技术不仅是炫技，更是为了解决商业问题。

通过 Next.js 15 的静态生成能力，我们帮助雅茹家政完美解决了“多城市+多业务”的 SEO 区分问题；而 Genkit 的引入，则为这个传统服务品牌埋下了智能化的种子。

如果你也对 Next.js 全栈开发、SEO 优化或者传统行业数字化转型感兴趣，欢迎在评论区交流。

👉 项目实战演示： 宜兴保洁公司数字化平台 (Yaru Care)

刷新页面返回顶部

yueyue, I have fallen in love with you for

张超的博客

公告