Next.js应用初始加载时共享UI库样式无法加载的问题求助

这个问题的核心是服务端与客户端的react-jss生成ID不一致，加上共享UI库可能没有复用Next.js应用的全局Jss配置，导致服务端无法收集共享库样式，最终出现初始加载样式丢失、className不匹配的警告。以下是分步解决方案：

1. 确保共享UI库复用应用的react-jss实例 #

首先确认你的共享库没有将react-jss打包进自身代码：

• 在共享库的package.json中，将react-jss移到peerDependencies而非dependencies，强制复用宿主应用的react-jss版本：

{
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-jss": "^10.0.0 || ^11.0.0"
  },
  "devDependencies": {
    "react": "^18.0.0",
    "react-jss": "^11.10.0"
  }
}

你的Next.js webpack alias已经配置了react-jss的统一路径，这步是确保共享库不会加载自己的react-jss实例。

2. 让服务端与客户端使用统一的ID生成规则 #

react-jss默认的ID生成是无状态的，服务端和客户端的生成序列会不一致，导致className不匹配。我们需要给createGenerateId添加固定seed，保证两端生成的ID完全同步：

修改你的_document.js：

import Document from "next/document";
import { SheetsRegistry, JssProvider, createGenerateId } from "react-jss";

export default class JssDocument extends Document {
  static async getInitialProps(ctx) {
    // 添加固定seed，确保服务端和客户端生成的ID规则完全一致
    const generateId = createGenerateId({ seed: "shared-ui-seed" });
    const registry = new SheetsRegistry();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: App => props => (
          <JssProvider registry={registry} generateId={generateId}>
            <App {...props} />
          </JssProvider>
        )
      });

    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <style id="server-side-styles">{registry.toString()}</style>
        </>
      )
    };
  }
}

3. 禁止共享库内部使用独立的JssProvider #

检查共享UI库的组件代码，确保没有在组件内部单独实例化JssProvider。如果共享库自己包裹了JssProvider，会脱离Next.js应用的全局SheetsRegistry，导致服务端无法收集到它的样式。

比如，共享库的组件应该直接使用createUseStyles，而不需要自己套JssProvider：

// 正确写法：依赖应用层的JssProvider上下文
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  wrapper: { /* 样式定义 */ }
});

export const Button = () => {
  const classes = useStyles();
  return <button className={classes.wrapper}>Click Me</button>;
};

4. 清理缓存并重新构建 #

最后，清理Next.js的缓存和依赖，确保所有配置生效：

rm -rf .next node_modules
npm install
npm run build

原理说明 #

• 固定seed的generateId保证了服务端和客户端生成的className完全一致，解决了Prop className did not match的警告。
• 共享库复用应用的react-jss实例，确保其样式能被Next.js服务端的SheetsRegistry收集，最终注入到初始HTML中，实现SSR样式正常渲染。

内容的提问来源于stack exchange，提问作者Seong