Dynamic templates for multi-tenant app?
Answered
Pin-tailed Snipe posted this in #help-forum
Pin-tailed SnipeOP
I'm building a multi-tenant app, I plan to pass tenant IDs in headers and I need to set custom templates for each tenant.
After login I want to match the tenant id from header with it's corresponding template id and then fetch a JSON containing layout, logo, colors, theme to build the tenant layout.
Does this make sense? If yes,
how can I then dynamically set that template for the tenant?
After login I want to match the tenant id from header with it's corresponding template id and then fetch a JSON containing layout, logo, colors, theme to build the tenant layout.
Does this make sense? If yes,
how can I then dynamically set that template for the tenant?
Answered by B33fb0n3
it makes sense, yea. When building a multi tenant app, you can also trust the host and path of the requested page. Querying your app with these data would work as well.
After that you can get your template id, get the details of the templates, fetch everything you need and where you need it and set the colors, fonts, ...
To prevent flashes of an unstyled page, you can use:
- https://nextjs.org/docs/app/building-your-application/styling/css-in-js#configuring-css-in-js-in-app
or
- https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
After that you can get your template id, get the details of the templates, fetch everything you need and where you need it and set the colors, fonts, ...
To prevent flashes of an unstyled page, you can use:
- https://nextjs.org/docs/app/building-your-application/styling/css-in-js#configuring-css-in-js-in-app
or
- https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
1 Reply
it makes sense, yea. When building a multi tenant app, you can also trust the host and path of the requested page. Querying your app with these data would work as well.
After that you can get your template id, get the details of the templates, fetch everything you need and where you need it and set the colors, fonts, ...
To prevent flashes of an unstyled page, you can use:
- https://nextjs.org/docs/app/building-your-application/styling/css-in-js#configuring-css-in-js-in-app
or
- https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
After that you can get your template id, get the details of the templates, fetch everything you need and where you need it and set the colors, fonts, ...
To prevent flashes of an unstyled page, you can use:
- https://nextjs.org/docs/app/building-your-application/styling/css-in-js#configuring-css-in-js-in-app
or
- https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
Answer