I am currently working with Material UI v5.11.16 in a nextjs environment using v13.3.0. I followed the official documentation setup for my nextjs project which can be found here. So far, I have successfully integrated Material UI components without having to explicitly state "use client" at the beginning of my files.
However, when attempting to determine whether a component is server-side or client-side, I encountered an issue. I added a
console.log("type of window: ", typeof window)typeof window returns undefined (server component) or an object (client component).
import * as React from "react";
import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import { Button } from "@mui/material";
export default function Home() {
console.log("this typeof window: ", typeof window)
return (
<Container maxWidth="lg">
<Typography>
</Typography>
<Box
sx={{
my: 4,
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
>
<Typography variant="h4" component="h1" gutterBottom>
Material UI - Next.js example in TypeScript
</Typography>
<Button
variant="outlined"
onClick={() => {
console.log("clicked!");
}}
>
TESTing Button
</Button>
</Box>
</Container>
);
}
I noticed that the console.log statement is being executed on both the server side and the client side. It displays the typeof window: undefined in the server logs and the typeof window: object in the browser's console. Why is this happening?
Even after trying to include use client at the top of the file, the log appeared in the server logs as well. What could be causing this behavior?
Is it advisable to perform server-specific tasks within these components?