Theme customization in Next.js is easy to over-engineer. The clean approach: keep visual tokens and section content in structured CMS fields, keep layout components in the repo, and let editors change brandable pieces without touching React.
Split responsibilities
- Developers - components, routing, design system primitives- CMS - logo, colors (as values), hero copy, nav labels, feature sections- Build/runtime - map CMS fields into CSS variables or Tailwind theme extensions## A practical theme model
- Site settings entry: brand name, logo media, primary/secondary color- Navigation entries or a nav group- Page entries composed of widgets/sectionsOn the Next.js side, read site settings once (layout), expose CSS variables on :root, and style components with those variables. Editors change a hex once; the whole theme updates. ## Do not put CSS files in the CMS Letting marketing paste arbitrary CSS sounds flexible until specificity wars and XSS show up. Prefer constrained fields: color, font choice from an allowlist, spacing scale enums, and prebuilt section widgets. ## Workflow
- Start from a Next.js + BCMS starter- Add a Settings template- Wire settings into app/layout or _app- Build 3-5 section components editors can assemble- Document which fields are safe for non-devs## Related reading
- Optimize Next.js performance- Next.js advantages that matter- Tailwind CSS tutorialWant the full theme field map and code samples? Read the complete guide: Customizing Next.js themes with BCMS.
Top comments (0)