How to customise a Next.js template without fighting it

The difference between a template that adapts and one you end up fighting is rarely the template. It is usually the order the changes were made in.

Work outside-in: content first, then tokens, then composition, and only then components. Each layer is cheaper to change than the one after it, and each one you resolve at the right level is a merge conflict you never see at upgrade time.

Layer 1 — content

Change every word you can before you touch anything visual. It sounds backwards, and it is the fastest way to find out whether the template actually fits: a section whose copy you cannot write is a section you do not need.

export const FEATURES = {
  heading: 'Everything the operations team asked for',
  items: [
    { id: 'audit', title: 'Full audit trail', body: 'Every change, attributed.' },
  ],
} as const;

Layer 2 — tokens

Brand next. One file, a handful of values, and the whole template moves — including the dark theme, which is the part that silently breaks when people skip this layer and edit components instead.

@theme {
  --color-primary: oklch(0.55 0.19 258);
  --font-sans: "Inter Variable", system-ui, sans-serif;
  --radius-panel: 0.5rem;
}

Layer 3 — composition

Now reorder. A page is a list of sections; most "we need a different layout" requests are answered by moving three elements and deleting a fourth.

export default function HomePage() {
  return (
    <>
      <Hero content={HOME_HERO} />
      <Section id="proof"><Logos items={LOGOS} /></Section>
      <Section id="features"><FeatureGrid content={FEATURES} /></Section>
      <Section id="cta"><CallToAction content={HOME_CTA} /></Section>
    </>
  );
}

Layer 4 — components

Only now, and only for what the first three layers could not express. When you do reach this layer, prefer adding a component beside the existing one rather than rewriting it in place: the original keeps receiving upstream fixes, and your version is obviously yours.

Adding a route

1. Create the folder and `page.tsx` under `app/`.
2. Export metadata built from the same helper the other routes use, so the canonical is right without thinking about it.
3. Put its copy in a content module.
4. Add it to the route manifest so the sitemap includes it.

Keeping the upgrade path open