Blocos e componentes: o que permanece quando a marca muda

Todo modelo promete personalização fácil e depois exige buscar em vários arquivos para mudar um título. O ShipAny Next evita isso com uma regra:

Um arquivo que lê traduções é um bloco. Um arquivo que recebe todo o conteúdo por propriedades é um componente.

Blocos são substituíveis

Os blocos ficam em src/blocks/ e são seções de página prontas para inserir, como <Hero />, <Pricing /> e <Footer />. Cada bloco lê as mensagens de idioma, monta o conteúdo e o entrega a um componente. Eles são material de demonstração: num projeto real, você os substitui pelos seus.

// 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} />;
}

Componentes são duráveis

Os componentes ficam em src/components/ e não leem traduções. SiteHeader, PricingTable e AppSidebar recebem todo o conteúdo por propriedades. Não conhecem o nome do aplicativo, seus textos ou idioma. Por isso permanecem úteis quando a marca muda.

Por que essa divisão importa

Ao mudar a marca ou começar um novo projeto:

1. Mantenha src/components/* — a estrutura.
2. Reescreva src/blocks/* — a conexão do conteúdo.
3. Reescreva os arquivos JSON de tradução usados pelos blocos.

Os arquivos de página ficam pequenos: page.tsx apenas combina blocos. Mudar toda a página inicial afeta blocos e JSON, mantendo os componentes básicos. Essa separação permite expressar sua intenção sem lutar contra decisões de design de outra pessoa.