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

吴城發表於 2026-1-9 11:13:00

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

<h2 id="前言">前言</h2>
最近交付了一个非常有意思的全栈项目——宜兴雅茹家政（Yaru Care）的数字化平台。
这是一个典型的“传统行业+新技术”的碰撞案例。客户的业务横跨 C 端（月嫂/护工）和 B 端（工程开荒/驻场保洁），业务范围覆盖上海和宜兴两地。
作为开发者，我面临的技术挑战主要有三点：
<ol>
<li>SEO 是刚需： 必须在搜索引擎拿到地域+业务关键词的排名（如“宜兴保洁”、“高端月嫂”）。</li>
<li>性能要求极致： 客户要求页面秒开，且由于服务器预算有限，最终交付物最好是纯静态资源（Static Assets）。</li>
<li>智能化尝试： 需要引入 AI 能力来处理后台的内容生成。</li>
</ol>
最终，我放弃了传统的 PHP/CMS 方案，采用了一套目前业内较新的技术栈：Next.js 15 (App Router) + Google Genkit + Shadcn/ui。
本文就从架构选型、SEO 策略及静态化构建三个维度进行复盘。
<hr>
<h2 id="一-为什么选这套过度设计的技术栈">一、为什么选这套“过度设计”的技术栈？</h2>
看到 <code>package.json</code>，很多人可能会问：做一个企业官网，至于上 Next.js 15 和 Genkit 吗？
我的答案是：对于服务型行业，快就是订单，智能就是降本。
<h3 id="核心依赖分析">核心依赖分析</h3>
<ul>
<li>Next.js 15.3.3: 项目底座。利用其 SSG（Static Site Generation） 能力，在构建时将页面预渲染成 HTML，直接解决了 SEO 和首屏加载问题。</li>
<li>Google Genkit (@genkit-ai/*): 这是一个亮点。我们利用 Genkit 接入了 LLM，用于后台自动生成不同业务线的 SEO 文案描述。</li>
<li>Shadcn/ui + Tailwind: 拒绝手写 CSS，利用 Headless 组件库快速堆砌界面，保证了 UI 的现代化和统一性。</li>
</ul>
<hr>
<h2 id="二-架构核心从动态业务到静态产物-ssg">二、架构核心：从动态业务到静态产物 (SSG)</h2>
客户的一个硬性要求是部署简单，希望通过 <code>npm run build</code> 生成纯静态文件部署到 Nginx 或 CDN 上。在 Next.js 15 中，我们采用了 <code>output: 'export'</code> 模式。
<h3 id="1-动态路由的静态化-generatestaticparams">1. 动态路由的静态化 (generateStaticParams)</h3>
项目业务涵盖“工程保洁”和“家庭护理”，且有“上海/宜兴”两个地域。为了让这些动态路径生成静态 HTML 以利于收录，我们在 <code>app/services///page.tsx</code> 中使用了 <code>generateStaticParams</code>：
<pre><code class="language-typescript">// app/services///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} />;
}
</code></pre>
<h3 id="2-图像优化与-cls-控制">2. 图像优化与 CLS 控制</h3>
家政网站图片素材较多（案例图、人员展示）。为了避免布局偏移（CLS），我们强制使用了 Next.js 的 <code><Image></code> 组件。
注意： 在静态导出模式（<code>output: 'export'</code>）下，Next.js 自带的图片优化服务会失效。我们需要配置 <code>unoptimized: true</code> 或者配置自定义的 loader（如 Cloudinary/AliOSS），本项目选择了自定义 loader 以适配纯静态环境。
<hr>
<h2 id="三-seo-20基于-metadata-api-的精准流量捕获">三、 SEO 2.0：基于 Metadata API 的精准流量捕获</h2>
传统的 HTML5 开发通常是写死 meta 标签，但在 Next.js 15 中，我们可以动态生成结构化的 Metadata。
针对项目背景（上海品牌、宜兴落地），我们定制了如下策略：
<pre><code class="language-typescript">// 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年）提供自营月嫂、育儿嫂及养老护工服务，员工制管理，安全可靠。`,
};
}
</code></pre>
这样一来，当爬虫抓取页面时，看到的是精准匹配 B 端需求的 Title，而不是通用的“家政公司”，极大提升了垂直领域的搜索排名。
<hr>
<h2 id="四-genkit-加持ai-如何赋能传统业务">四、 Genkit 加持：AI 如何赋能传统业务？</h2>
这是本项目引入 <code>@genkit-ai/googleai</code> 的主要原因。
在传统的企业官网，内容更新往往依赖人工。通过 Genkit，我们在后端构建流程中做了一层内容增强。
场景：智能案例解析
我们在后台集成了一个基于 Genkit 的处理流。当运营人员上传一个新的服务案例（比如“某工业园区开荒图片”）时：
<ol>
<li>Genkit 自动识别图片内容（“环氧地坪”、“高空作业”）。</li>
<li>自动生成符合 SEO 规范的 <code>alt</code> 描述和一段 100 字左右的技术摘要。</li>
<li>数据注入到静态数据源中。</li>
</ol>
这让官网不仅仅有硬广，还有了大量高质量的行业知识（Knowledge Base），有效提升了长尾词的覆盖率。
<hr>
<h2 id="五-部署与性能复盘">五、部署与性能复盘</h2>
执行 <code>npm run build</code> 后，Next.js 会在 <code>out</code> 目录下生成纯静态资源。
<ul>
<li>HTML: 预渲染完成，SEO 友好。</li>
<li>JS: 被 Webpack/Turbopack 拆分为极小的 chunks，首屏 JS 体积控制在 40kb 以内。</li>
<li>CSS: Tailwind 自动 purge，只保留用到的样式。</li>
</ul>
Lighthouse 跑分结果：
<ul>
<li>Performance: 98</li>
<li>SEO: 100</li>
<li>Accessibility: 100</li>
</ul>
由于是静态文件，我们直接部署在了边缘节点上，无论是上海的老客户还是宜兴的新客户，访问速度都在毫秒级。
<hr>
<h2 id="总结">总结</h2>
技术不仅是炫技，更是为了解决商业问题。
通过 Next.js 15 的静态生成能力，我们帮助雅茹家政完美解决了“多城市+多业务”的 SEO 区分问题；而 Genkit 的引入，则为这个传统服务品牌埋下了智能化的种子。
如果你也对 Next.js 全栈开发、SEO 优化或者传统行业数字化转型感兴趣，欢迎在评论区交流。
👉 项目实战演示： 宜兴保洁公司数字化平台 (Yaru Care) 
来源：https://www.cnblogs.com/zhangchao1988/p/19460473

頁: [1]

琼殿技术论坛's Archiver

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