Back to Thoughts

Config-Driven UI with React and Next.js

Feb 7, 2026

2 min read

View raw

Config-driven UI means the layout and content of the interface come from a configuration file instead of JSX that is hard-coded in components. The app reads the config and renders the UI based on it. This makes the UI easier to change and reuse. See a basic description of this pattern at dev.to.
https://dev.to/lovishduggal/mastering-config-driven-ui-a-beginners-guide-to-flexible-and-scalable-interfaces-3l91

Why Use Config-Driven UI

In a typical React app, UI structure is written in JSX. Any change to layout or order requires editing code. With a config-driven approach:

  • You can reorder sections or swap components by updating a config file.
  • You can reuse the same rendering logic across different pages.
  • You can adapt UI structure without changing implementation code.

React Summit talks about how this works by separating layout description from rendering.
https://gitnation.com/contents/config-driven-ui-using-reactjs

Core Pattern

A config-driven UI system has three parts:

  1. Config file
    Defines UI sections, order, and props.

  2. Component registry
    Maps strings to React components.

  3. Renderer
    Reads the config, looks up components, and renders them.

Basic Example

Config (JSON)

{
  "layout": [
    {
      "id": "hero",
      "type": "HeroBanner",
      "props": {
        "title": "Welcome to the Dashboard"
      }
    },
    {
      "id": "stats",
      "type": "StatsGrid",
      "props": {
        "columns": 3
      }
    }
  ]
}

Component Registry

import HeroBanner from "@/components/HeroBanner";
import StatsGrid from "@/components/StatsGrid";

export const componentMap = {
  HeroBanner,
  StatsGrid,
};

Renderer Component

export default function ConfigRenderer({ config }) {
  return config.layout.map((item) => {
    const Component = componentMap[item.type];
    return Component ? <Component key={item.id} {...item.props} /> : null;
  });
}

Next.js Page

import config from "@/config/home.json";
import ConfigRenderer from "@/ui/ConfigRenderer";

export default function HomePage() {
  return <ConfigRenderer config={config} />;
}

Fetching Config in Next.js

You can import JSON at build time or fetch config from an API. Use getStaticProps when config rarely changes. Use client-side fetch when config should update without a deploy.

When It Helps

Config-driven UI is useful when:

  • UIs change often.
  • Product teams need to tweak layout without code changes.
  • You reuse the same components in different combinations.

Watch Outs

  • Validate config before rendering to avoid runtime errors.
  • Keep configs manageable; very large config files can be hard to read.
  • Ensure only trusted sources control config if it drives production UI.

Summary

Config-driven UI decouples layout from implementation. In React and Next.js, a JSON config describes what to show. A renderer maps config to components and renders them. This pattern reduces code changes for simple UI updates and makes UI structure easier to adapt.

Further reading:

Gopal Khadka