Next.js 刷新分页符 css classNames

Question

我正在迁移一个 React SPA，我对 Next.js 很陌生。 我的问题是，当我加载主页时，它加载正常，但是当我刷新页面时，它会将错误的类名分配给错误的组件。 现在只发生在我的侧边栏组件上。

这是我的侧边栏组件代码

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;

你可以看到我控制台记录了类名，当我记录它们时它们是正确的，但当我刷新它们时它们会改变。

这是我的侧边栏首次加载时的外观 在此处输入图像描述 在此处输入图像描述

这就是刷新后的样子 在此处输入图像描述 在此处输入图像描述

这是侧边栏的 CSS，我使用的是 CSS 模块。

    .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 这里的可能性，

1. 装载机

尝试在 next.config.js 中添加 css 加载器，如下所示

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. 使用 (_document.js) 检查样式化组件。 https://dev.to/rsanchezp/next-js-and-styled-components-style-loading-issue-3i68