Next.js 刷新分页符 css classNames

Question

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;
  }
}

Answer 1

2 Possibilities here,

1. Loaders

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
},

})

2. Check about styled components using (_document.js). https://dev.to/rsanchezp/next-js-and-styled-components-style-loading-issue-3i68