How to manage multi-region branding (colors + UI variations) in a single Next.js repo without increasing code complexity? [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? As written, this question is lacking some of the information it needs to be answered. If the author adds details in comments, consider editing them into the question. Once there's sufficient detail to answer, vote to reopen the question.

Closed 3 days ago.

Improve this question

I’m working on a telco project that will be deployed across eight different regions.
Each region will have:

Different color branding
Possibly some UI component variations

However, all API integrations, logic, and features remain the same across regions.

I want to maintain a single centralized repository, instead of creating eight separate repos.
The challenge is: if I keep all regions in one codebase, it may lead to multiple if/else checks, which will increase code complexity and reduce maintainability.

Project stack: Next.js (App Router)

saghar.fadaei · Accepted Answer · 2025-11-25 13:58:35Z

Define region config like this :


// src/config/regions.ts
export const regions = {
  eu: {
    theme: {
      primaryColor: '#0044cc',
      secondaryColor: '#ffcc00',
    },
    logo: '/assets/eu-logo.png',
    components: {
      Header: () => import('../components/regions/eu/Header'),
    },
  },
  us: {
    theme: {
      primaryColor: '#cc0000',
      secondaryColor: '#00ccff',
    },
    logo: '/assets/us-logo.png',
    components: {
      Header: () => import('../components/regions/us/Header'),
    },
  },
  // ... other regions
};

and after detect region dynamically in middleware, you can apply theme in main layout.


// layout.tsx
import { regions } from '../config/regions';

export default function RootLayout({ children }) {
  const region = getRegionFromRequest(); // from middleware or cookies
  const theme = regions[region].theme;

  return (
    <html style={{ '--primary-color': theme.primaryColor }}>
      <body>{children}</body>
    </html>
  );
}

or If you change components based on region, you can use dynamic import based on config.

Also you can use Tailwind CSS with theme.extend and CSS variables for dynamic colors.

Collectives™ on Stack Overflow

How to manage multi-region branding (colors + UI variations) in a single Next.js repo without increasing code complexity? [closed]

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related