Savinder
Reputation: 13
Next js(14) is requesting for assets on each request
I have started with Next.js 14(App Router). I am using a component library PrimeReact, using this library i have to switch themes. Now in primeReact if I have to switch themes for that it have different css files for each theme. Here is how my theme.css files are placed in my folder. see here
and this is my root layout.tsx file which wraps the entire app
import type { Metadata } from "next";
import { Roboto } from "next/font/google";
import localFont from "next/font/local";
import "./globals.css";
import { PrimeReactProvider } from "primereact/api";
import Tailwind from "primereact/passthrough/tailwind";
import { appColorScheme } from "@/lib/constants";
import { getSiteSettings } from "@/lib/api-service/siteSettings";
import { SiteSettings } from "@/types/api-service";
import AppWrapper from "@/components/AppWrapper";
const RobotoFont = Roboto({
subsets: ["latin"],
display: "swap",
weight: ["500", "700", "900"],
variable: "--font-roboto"
});
const PoppinsLocalFont = localFont({
src: "../lib/fonts/poppins-v15-latin-ext_latin-700.woff2",
variable: "--font-poppins"
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app"
};
export default async function RootLayout({
children
}: Readonly<{
children: React.ReactNode;
}>) {
const siteData: SiteSettings = await getSiteSettings();
const appTheme = siteData
? siteData?.color_scheme.value
: appColorScheme[0]?.value;
return (
<html
lang="en"
className={`${RobotoFont.variable} ${PoppinsLocalFont.variable}`}
suppressHydrationWarning
>
<PrimeReactProvider value={{ unstyled: false, pt: Tailwind }}>
` <head>
<link
id="theme-link"
rel="stylesheet"
href={`/${appTheme}/theme.css`}
/>
</head>`
<body>
<AppWrapper>{children}</AppWrapper>
</body>
</PrimeReactProvider>
</html>
);
}
Every time when I switch theme <head> <link id="theme-link" rel="stylesheet" href={`/${appTheme}/theme.css`} /> </head> relevent theme.css files is downloaded from server. Is there a way I can store these css files on client side so theme can change smoothly without making a http request?
Changing themes in next.js 14 using primereact
Upvotes: 1
Views: 122