背景

最近接手了一個傳統家政公司——宜興雅茹家政 (Yaru Care) 的官網重構項目。

客户痛點非常明確：

1. 舊站弊端：原本的 WordPress 站點加載慢，且經常面臨安全漏洞，維護成本高。
2. SEO 剛需：作為本地服務（Local Service），必須在“宜興保潔”、“月嫂”等地域性關鍵詞上獲得百度/Google 的優待。
3. 部署環境：客户希望去除複雜的後端依賴（Node.js/PHP），實現純靜態文件部署 (Nginx/CDN)。

基於以上需求，我並沒有選擇常規的 SPA 方案，而是嘗試了 Next.js 15 (App Router) 配合 Google Genkit 的技術棧，最終實現了 Lighthouse 雙 100 分 的交付標準。

本文記錄項目開發過程中的幾個關鍵技術決策與實現細節。

架構選型

• Framework: Next.js 15.3 (App Router)
• Deploy Mode: output: 'export' (SSG 靜態導出)
• AI SDK: Google Genkit (用於構建時內容增強)
• UI: Shadcn/ui + Tailwind CSS

核心技術點覆盤

1. 靜態導出模式下的動態路由處理

在 next.config.js 開啓 output: 'export' 後，Next.js 失去了運行時的服務端渲染（SSR）能力。這意味着所有的動態路由（如 /services/[city]/[type]）都必須在 Build 階段確定。

我們需要利用 generateStaticParams 來替代舊版的 getStaticPaths。

遇到的坑：由多維度參數（城市 x 服務類型）組成的路由，需要進行笛卡爾積組合。
解決方案：

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

export async function generateStaticParams() {
  // 定義業務維度
  const cities = ['yixing', 'shanghai'];
  const serviceTypes = [
      'engineering-cleaning', // 工程保潔
      'daily-cleaning',       // 日常保潔
      'nanny',                // 月嫂
      'elderly-care'          // 養老護工
  ];

  // 核心：扁平化數組，窮舉所有路徑組合
  return cities.flatMap((city) =>
    serviceTypes.map((type) => ({
      city,
      type,
    }))
  );
}

// 頁面組件拿到的是預渲染後的 params
export default function Page({ params }: { params: { city: string; type: string } }) {
  const { city, type } = params;
  return <ServiceLayout city={city} type={type} />;
}

通過這種方式，npm run build 後會生成物理存在的 HTML 文件（例如 /services/yixing/nanny.html），這對於百度蜘蛛的抓取極其友好。

2. 基於 Metadata API 的結構化 SEO

為了滿足“宜興保潔”和“上海月嫂”不同場景的 SEO 需求，我們利用 Next.js 的 Metadata API 進行了精細化配置。注意，這裏不僅是修改 Title，更是注入結構化的 Keywords 和 Description。

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

export function getServiceMetadata(city: string, type: string): Metadata {
  const brand = "宜興雅茹家政";
  const region = city === 'yixing' ? '宜興' : '上海';

  // 策略模式處理不同業務線
  const strategies: Record<string, Metadata> = {
    'engineering-cleaning': {
      title: `${region}廠房開荒_工程保潔_外牆清洗 - ${brand}`,
      description: `專注${region}工程清潔領域，提供新建廠房開荒、企業駐場保潔及石材養護服務。專業團隊，驗收合格後付款。`,
      keywords: [`${region}保潔公司`, '廠房開荒', '開荒保潔電話', brand],
    },
    'nanny': {
      title: `${region}金牌月嫂_育兒嫂_住家保姆 - ${brand}`,
      description: `${brand}提供自營月嫂及育兒嫂服務，所有人員均通過背景調查與健康體檢，持證上崗，安全可靠。`,
      keywords: [`${region}找保姆`, '月嫂價格', '居家養老', brand],
    }
  };

  return strategies[type] || { title: `${brand}官網` };
}

這種做法比傳統的 react-helmet 更加規範，且完全運行在構建時，不會產生客户端 hydration 的開銷。

3. 引入 Genkit 做內容增強

這是一個實驗性的嘗試。為了解決靜態站點內容更新頻率低、長尾詞覆蓋不足的問題，我們在構建流程中引入了 Google 的 Genkit。

工作流：

1. 讀取 data/cases 目錄下的原始圖片和簡短 JSON 描述。
2. 構建腳本調用 Genkit 接口，針對圖片內容生成一段富含 SEO 關鍵詞的詳細描述（Alt Text + Article Summary）。
3. 將生成的內容注入到最終的 JSON 數據源中。

這使得“雅茹家政”的官網雖然是一個靜態站，但內容豐富度遠超同類競品。

性能表現

得益於 Next.js 的構建優化和純靜態部署，Lighthouse 跑分數據非常理想：

• Performance: 98+ (FCP < 0.8s)
• SEO: 100
• Best Practices: 100

靜態資源直接託管在 CDN 邊緣節點，無需擔心服務器負載，對於流量波動較大的本地廣告投放場景非常適用。

總結與演示

這次重構證明了 Modern Web 技術棧在傳統企業官網中的應用價值。Next.js 15 提供的 SSG 能力完美解決了 SEO 和性能的矛盾，而 TypeScript 的類型安全也讓後續維護變得輕鬆。

線上生產環境：
👉 宜興雅茹家政官網 (www.yarucare.com)

(歡迎技術交流，目前站點已在宜興本地穩定運行，如果您有關於 Next.js 靜態化部署的疑問，歡迎評論區討論)