I'm migrating a React SPA and I'm very new to Next.js. My problem is when I load my Home page it loads fine but when I refresh the page it assigns the wrong classNames to the wrong Components. Right now is only happening with my Sidebar component.
This is my Sidebar Component Code
import React, { useContext } from "react";
import { AuthContext } from "../../../contexts/AuthContext";
import Avatar from "../Avatar";
import ArrowIcon from "../../../assets/icons/arrow.svg";
import HomeIcon from "../../../assets/icons/home-run.svg";
import ChatIcon from "../../../assets/icons/comment.svg";
import RocketIcon from "../../../assets/icons/start-button.svg";
import SchoolIcon from "../../../assets/icons/school.svg";
import QuestionIcon from "../../../assets/icons/question.svg";
import LoveIcon from "../../../assets/icons/love.svg";
import WorkIcon from "../../../assets/icons/work.svg";
import SettingsIcon from "../../../assets/icons/settings.svg";
import SearchBar from "../SearchBar";
import {useRouter} from 'next/router'
import styles from "./index.module.css";
function SideBar({ setMenuOpen, className, ...props }) {
const router = useRouter()
const { currentUser } = useContext(AuthContext);
const goTo = (link) => {
router.push(link);
if (setMenuOpen) {
setMenuOpen(false);
}
};
const avatar = styles['avatar']
console.log(styles['avatar']);
console.log(avatar);
return (
<div className={className}>
<ArrowIcon className={styles["close-button"]}
alt="close"
onClick={() => {
setMenuOpen(false);
}}/>
{currentUser && (
<>
<Avatar
width="100px"
className={"SideBar_avatar__u-NXU"}
image={
currentUser.get("profilePicture") &&
currentUser.get("profilePicture").url()
}
/>
<span className={styles.username}>
@{currentUser.attributes.username}
</span>
</>
)}
{console.log(styles.searchbar)}
<SearchBar className={styles['searchbar']} />
<ul className={styles.menu}>
<li
onClick={() => {
goTo("/home");
}}
>
<HomeIcon alt="option" className={styles["menu-icon"]}/>
{/* <img src={homeIcon} /> */}
<span>Feed</span>
</li>
<li>
<RocketIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={rocketIcon} /> */}
<span>Descubre</span>
</li>
<li>
<ChatIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={chatIcon} /> */}
<span>Chat Global</span>
</li>
<li
onClick={() => {
goTo("/schools");
}}
>
<SchoolIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={schoolIcon} /> */}
<span>Escuelas</span>
</li>
<li
onClick={() => {
goTo("/question/");
}}
>
<QuestionIcon alt="option" className={styles["menu-icon"]}/>
{/* <img
alt="option"
className={styles["menu-icon"]}
src={questionIcon}
/> */}
<span>Pregunta</span>
</li>
<li
onClick={() => {
goTo("/unicrush/");
}}
>
<LoveIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={loveIcon} /> */}
<span>UniCrush</span>
</li>
<li
onClick={() => {
goTo("/job/");
}}
>
<WorkIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={workIcon} /> */}
<span>Trabajos</span>
</li>
</ul>
<div className={styles.footer}>
<div
className={styles["settingsOption"]}
onClick={() => {
goTo("/settings");
}}
>
<SettingsIcon alt="option" className={styles["menu-icon"]}/>
{/* <img
alt="option"
className={styles["menu-icon"]}
src={settingsIcon}
/> */}
<span>Adjustes</span>
</div>
<span>Contactanos!</span>
</div>
</div>
);
}
SideBar.defaultProps = {
className: styles.container,
};
export default SideBar;
You can see I console log the classNames and they are the correct ones when I log them but they change when I refresh.
This is how my sidebar look when it firsts loads enter image description here enter image description here
And this is how it looks after refresh enter image description here enter image description here
This is the CSS of the Sidebar, I'm using CSS Modules.
.container {
display: flex;
flex-direction: column;
background: #fff;
position: absolute;
height: 100vh;
top: 0;
width: 200px;
box-shadow: 2px 0 5px 1px #a9a6a64d;
}
.close-button {
display: none;
}
.avatar {
margin: auto;
margin-top: 10px;
}
.username {
text-align: center;
font-size: large;
color: #5d5d5d;
}
.menu {
list-style: none;
display: flex;
flex-grow: 1;
flex-direction: column;
}
.menu-icon {
width: 20px;
height: 20px;
}
.menu li {
display: flex;
padding: 10px 15px;
}
.menu li span {
margin-left: 10px;
font-size: 20px;
}
.searchbar {
display: none;
}
.footer {
margin: 10px 0px;
display: flex;
width: 100%;
justify-content: space-around;
}
.settingsOption {
display: flex;
}
.settingsOption span {
margin-left: 3px;
}
/* Device = Most of the Smartphones Mobiles (Portrait) and Low Resolution tablets
Screen = B/w 320px to 767px
*/
@media (max-width: 768px) {
.container {
width: 100%;
overflow: scroll;
align-items: center;
z-index: 2;
position: fixed;
}
.searchbar {
display: flex;
margin: 15px 0px;
}
.close-button {
align-self: end;
display: flex;
width: 25px;
margin: 10px;
}
.menu {
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: center;
}
}
2 Possibilities here,
Try to add css loaders in next.config.js as below
const withImages = require('next-images')
module.exports = withImages({
target: 'serverless',
webpack: function (config, { webpack }) {
config.module.rules.push({
test: /\.(eot|svg|gif|md)$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
})
config.plugins.push(new webpack.DefinePlugin({
'process.env': {
ENV: JSON.stringify(process.env.ENV),
}
}))
return config
},
})