Blocks and components during a rebrand

ShipAny Next distinguishes blocks and components by how they receive content:

A file that reads translations is a block. A file that takes all content via props is a component.

Rewrite blocks for your product

Blocks live in src/blocks/ and include page sections such as <Hero />, <Pricing />, and <Footer />. Each one reads i18n messages, builds a content config, and passes it to a component. These are demo sections. Replace them with product-specific content when you start a project.

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

Reuse components

Components such as SiteHeader, PricingTable, and AppSidebar live in src/components/. They receive content through props and do not read translations. They don't know your app's name, your copy, or your locale. You can reuse these components when changing a brand.

Why the split matters

When you rebrand or start a new project from the template:

1. Keep the reusable components in src/components/*.
2. Rewrite src/blocks/* to supply your product content.
3. Rewrite the translation JSON files that feed the blocks.

Page files such as page.tsx compose the blocks. To change the landing page, edit its blocks and translation files. Separating blocks and components lets you change page content while reusing existing components.