I was searching for a way to use theme provider in the nextjs, and I found this article:
Integrating Material UI into a React NextJS app
In this article, she creates a file called StyledRoot and wraps all the surrounding children.
This happens in the root layout file like this:
// app/StyledRoot.tsx
'use client';
import { ThemeProvider } from '@mui/material/styles';
import theme from './theme';
export function StyledRoot({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<ThemeProvider theme={theme}>
{children}
</ThemeProvider>
);
}
// app/layout.tsx
import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
import { StyledRoot } from './StyledRoot';
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<AppRouterCacheProvider>
<StyledRoot>{children}</StyledRoot>
</AppRouterCacheProvider>
</body>
</html>
);
}
Will this make every component in the app a client component?
Also, I’ve noticed that she uses static values like this:
// app/theme.ts
'use client';
import { Roboto } from 'next/font/google';
import { createTheme } from '@mui/material/styles';
const roboto = Roboto({
weight: ['300', '400', '500', '700'],
subsets: ['latin'],
display: 'swap',
});
const theme = createTheme({
typography: {
fontFamily: roboto.style.fontFamily,
},
});
export default theme;
Wouldn’t it create problems if I wanted to fetch the themes dynamically from an API?
From the nextjs 14 docs:
Interleaving Server and Client Components
When interleaving Client and
Server Components, it may be helpful to visualize your UI as a tree of
components. Starting with the root layout, which is a Server
Component, you can then render certain subtrees of components on the
client by adding the “use client” directive.Within those client subtrees, you can still nest Server Components or
call Server Actions, however there are some things to keep in mind:
- During a request-response lifecycle, your code moves from the server to the client. If you need to access data or resources on the
server while on the client, you’ll be making a new request to the
server – not switching back and forth.- When a new request is made to the server, all Server Components are rendered first, including those nested inside Client Components. The
rendered result (RSC Payload) will contain references to the locations
of Client Components. Then, on the client, React uses the RSC Payload
to reconcile Server and Client Components into a single tree.- Since Client Components are rendered after Server Components, you cannot import a Server Component into a Client Component module (since
it would require a new request back to the server). Instead, you can
pass a Server Component as props to a Client Component. See the
unsupported pattern and supported pattern sections below.
Will using material UI theme provider in Next js make everything client component?
No it won’t, as long as you extract the provider client component into a separate file. (exactly as shown in the question)