1

In my Next JS build, I have multiple website which have common Components and API's, they only differ in their design and layout. Each website has its own static hosting. Colors, logo etc can all be switched out by the static files. I would like to only maintain one repo and so would want the sites to all connect to it and then using a data driven approach select the corresponding layout and page designs for that website.

I would like to achieve something like:

/app/(DesignOne)/layout.tsx
/app/(DesignOne)/page.tsx
/app/(DesignOne)/about/page.tsx
/app/(DesignOne)/contact/page.tsx
/app/(DesignTwo)/layout.tsx
/app/(DesignTwo)/page.tsx
/app/(DesignTwo)/about/page.tsx
/app/(DesignTwo)/contact/page.tsx
etc.

Where url - designone.com shows all DesignOnes pages and layout and designtwo.com shows the pages and layout DesignTown and so on.. Configuration could either be in a database or part of the environment variables.

Craig P
  • 477
  • 6
  • 12
  • What you are looking for is building a multi-tenant Next.js app, a tutorial of which can be found [here](https://vercel.com/guides/nextjs-multi-tenant-application). – OGreeni Aug 06 '23 at 03:01
  • Thanks @OGreeni I’ll review and post my findings as the answer should I get it to work – Craig P Aug 07 '23 at 23:32

0 Answers0