블록 대 구성 요소: 브랜드 변경 후에도 살아남는 것

모든 템플릿은 "손쉬운 사용자 정의"를 약속하며 12개의 파일을 검색하여 헤드라인을 변경할 수 있습니다. ShipAny 다음은 한 가지 규칙으로 이를 방지합니다.

번역을 읽는 파일은 블록입니다. props를 통해 모든 콘텐츠를 가져오는 파일은 컴포넌트입니다.

블록은 일회용입니다.

블록은 src/blocks/에 있으며 구성이 없는 페이지 섹션(<Hero />, <Pricing />, <Footer />)입니다. 각각은 i18n 메시지를 읽고, 콘텐츠 구성을 구축하고, 이를 구성 요소에 전달합니다. 이는 데모 자료입니다. 실제 프로젝트를 시작할 때 이를 삭제하고 직접 작성하면 됩니다.

// src/blocks/header.tsx — a block: reads i18n, wires a component
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를 통해 도착합니다. 그들은 귀하의 앱 이름, 사본 또는 로케일을 모릅니다. 그것이 바로 그들이 모든 브랜드 변경에서 살아남는 이유입니다.

분할이 중요한 이유

템플릿에서 새 프로젝트를 시작하거나 브랜드를 변경하는 경우:

1. 유지 src/components/* — 섀시.
2. 다시 작성 src/blocks/* — 콘텐츠 배선.
3. 블록을 제공하는 번역 JSON 파일을 다시 작성하세요.

페이지 파일 자체는 아주 작게 유지됩니다. page.tsx는 블록의 스택인 순수한 구성입니다. 전체 랜딩 페이지를 변경하면 기본 요소가 아닌 블록과 JSON이 변경됩니다. 분할은 외관상의 문제가 아닙니다. 이는 다른 사람의 디자인 결정에 맞서 싸우는 대신 맞춤화를 의도의 재작성으로 만드는 것입니다.