How can I customize theme for each tennant?

[muhammedalibilgin]

is it possible?
for example in "test-1.vercel.pub/" must be header is fixed but another website "test-2.vercel.pub/" must be hamburger menu or many other changes html/css/js.

[gpiresdev]

I have been doing this by creating a new model in prisma.schema file containing the TailwindCSS classes to each specific page.

model Site {
  id            String   @id @default(cuid())
  ...
  theme         Theme?   @relation(fields: [themeId], references: [id])
  themeId       String?

  @@index([userId])
}

model Theme {
  id           String   @id @default(cuid())
  name         String   @unique
  classes      String   @default("")
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt
  site Site[]
}

Then update getSiteData to include Theme and load the TailwindCSS classes directly on components.

export async function getSiteData(domain: string) {
  const subdomain = domain.endsWith(`.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`)
    ? domain.replace(`.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`, "")
    : null;

  return await unstable_cache(
    async () => {
      return prisma.site.findUnique({
        where: subdomain ? { subdomain } : { customDomain: domain },
        include: {
          user: true,
          theme: true,
        },
      });
    },
    [`${domain}-metadata`],
    {
      revalidate: 900,
      tags: [`${domain}-metadata`],
    },
  )();
}

// app -> [domain] -> layout.tsx

import { getSiteData } from "@/lib/fetchers";

export default async function SiteLayout({
  params,
  children,
}: {
  params: { domain: string };
  children: ReactNode;
}) {
  const data = await getSiteData(domain);
  ...

  return (
    <header className={data?.theme.classes} />
  );
}