I need to create a project of multiple website using the same NextJS app but with a different backend and a different theme. For the backend it’s quite easy since I just use process.env
at building time to get different connection.
But I struggle regarding the theme.
The project is structured with mono repo like this:
- apps/
- website-1/
- src/
- app/
- [[...route]]/
- page.tsx
- website-2/
- packages/
- generic-frontend/
- src/
- app/
- [[...route]]/
- page.tsx
The content page.tsx
of the library looks like this:
export default async function Page({ params, searchParams }: PageProps) {
});
And the page.tsx
of website-1 and website-2 like this:
import Page from 'generic-frontend/[[...route]]/page';
export default Page;
Now the ugly part, I pass the theme inside apps/website-1/src/app/[[...route]]/layout.tsx
like this:
import { theme } from '../theme';
global.theme = theme;
I know it’s not good but until now it was working. If I update NextJS from 14.1.4 to 14.2.0 it does not work anymore.
The theme is needed at building time in server component and probably the update of NextJS changes the way things are loaded. Now global.theme
is undefined when I need it.
So my question is, how should I implement this pattern the right way in NextJS?