We’re trying to find a way to dynamically load different CSS files depending on route from the server.

We have prepared a Sandbox here: https://codesandbox.io/p/live/9eeacf04-a185-4f26-8807-e515e2005bd0

We have a dynamic route [theme]. In there, depending on the value of the parameter we want to load different css files.

We’re using code like this:

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ theme: string }>;
}) {
  const { theme } = await params;

  switch (theme) {
    case "theme1":
      await import("../theme1.scss");
      break;
    case "theme2":
      await import("../theme2.scss");
      break;
    default:
      break;
  }

  return (
    <div>
      {children}
      {theme}
    </div>
  );
}

We don't want to use a client side solution that imports the files from the client

What happens is that nextjs bundles both the imports together into one file /project/sandbox/.next/static/css/css-app_globals_scss-app_theme1_scss-app_theme2_scss.css which is then imported. But what we want to achieve is to bundle the files separately, one for theme1 and one for theme2 make sure to just import the correct one depending on the route that we’re entering.

Another alternative we were looking for is to declare the routes statically. For example /app/theme1/layout.tsx and /app/theme2/layout.tsx. But we want to be able to share the routes under each of these themes without having to declare them for each theme. So if I create I want the code for /theme1/my-cool-route and /theme2/my-cool-route to be the same. Just the CSS to be different. But if there is a way to be able to share children of a statically defined route then it would be great to know how!