ブロックとコンポーネント: リブランド後も残るもの

どのテンプレートも「簡単にカスタマイズできます」と言いますが、見出しを 1 つ変えるために 12 個のファイルを検索させることがあります。ShipAny Next は 1 つのルールでそれを避けます。

翻訳を読むファイルは ブロック。すべてのコンテンツを props で受け取るファイルは コンポーネント。

ブロックは使い捨て

ブロックは src/blocks/ にあり、<Hero />、<Pricing />、<Footer /> のようなゼロ設定のページセクションです。各ブロックは i18n メッセージを読み、コンテンツ設定を作り、コンポーネントへ渡します。これはデモ素材です。実プロジェクトを始めるときは削除して、自分のものを書きます。

// src/blocks/header.tsx - ブロック: i18n を読み、コンポーネントへ接続する
export async function Header() {
  const t = await getTranslations('landing');
  const navLinks = [{ href: '/#features', label: t('nav.features') }];
  return <SiteHeader navLinks={navLinks} />;
}

コンポーネントは長く使う

コンポーネントは src/components/ にあり、翻訳を読みません。SiteHeader、PricingTable、AppSidebar など、すべてのコンテンツは props として渡されます。アプリ名、コピー、locale を知りません。だからこそ、どんなリブランドにも残れます。

この分割が重要な理由

テンプレートから新しいプロジェクトを始めたり、リブランドしたりするときは次のように進めます。

1. 残す: src/components/* - シャーシ。
2. 書き換える: src/blocks/* - コンテンツの接続。
3. 書き換える: ブロックに渡す翻訳 JSON。

ページファイル自体は小さなままです。page.tsx はブロックを積み重ねるだけの純粋な合成になります。ランディングページ全体を変えるときに触るのはブロックと JSON であり、プリミティブではありません。この分割は見た目の整理ではなく、他人の設計判断と戦う代わりに意図を書き換えるための仕組みです。