I am currently in the process of migrating a React SPA to Next.js, and I am relatively new to this framework. The issue I am encountering is that when I initially load the Home page, everything appears as expected. However, if I refresh the page, incorrect classNames are being assigned to certain components, particularly with the Sidebar component.
Below is the code for my Sidebar Component:
import React, { useContext } from "react";
import { AuthContext } from "../../../contexts/AuthContext";
import Avatar from "../Avatar";
import ArrowIcon from "../../../assets/icons/arrow.svg";
// Additional imports....
function SideBar({ setMenuOpen, className, ...props }) {
// Component logic here...
}
SideBar.defaultProps = {
className: styles.container,
};
export default SideBar;
Even though the console logs display the correct classNames when I check them, they seem to change unexpectedly after a page refresh.
Here is how the sidebar looks upon initial loading: Link to Image Link to Image
And this is the altered appearance after refreshing the page: Link to Image Link to Image
The CSS styling for the Sidebar is implemented using CSS Modules:
.container {
/* CSS styles for container */
}
/* Additional CSS styling */
@media (max-width: 768px) {
/* Responsive CSS styles */
}