Blocks 與 Components:改版後留下的是什麼

每個模板都宣稱"輕鬆定製",然後讓你為了改一句標題翻遍十二個檔案。ShipAny Next 用一條規則避免這種局面:

讀取翻譯文案的檔案是 block,所有內容都透過 props 傳入的檔案是 component。

Block 是可拋棄的

Block 放在 src/blocks/,是零配置的頁面區塊——<Hero />、<Pricing />、<Footer />。每個 block 讀取 i18n 文案,組裝內容配置,再傳給 component。它們是演示素材:真正開始專案時,刪掉它們,寫你自己的。

// src/blocks/header.tsx — block:讀 i18n,裝配 component
export async function Header() {
  const t = await getTranslations('landing');
  const navLinks = [{ href: '/#features', label: t('nav.features') }];
  return <SiteHeader navLinks={navLinks} />;
}

Component 是耐用的

Component 放在 src/components/,永遠不讀翻譯。SiteHeader、PricingTable、AppSidebar——所有內容都來自 props。它們不知道你的應用叫什麼、文案是什麼、語言是什麼,這正是它們能挺過每一次改版的原因。

為什麼這個切分重要

當你改版或基於模板開新專案時:

1. 保留 src/components/* —— 底盤。
2. 重寫 src/blocks/* —— 內容裝配層。
3. 重寫餵給 block 的翻譯 JSON 檔案。

頁面檔案本身始終很小——page.tsx 是純組合,一摞 block 而已。重做整個落地頁只需要動 block 和 JSON,永遠不碰基礎元件。這個切分不是表面功夫:它讓定製變成"重寫意圖",而不是和別人的設計決策搏鬥。