在我的公司，我们有一个用模板构建的组件库。现在我们想把一些网站移到next.js。我创建了一个新的next.js项目，并引用了我的web组件所需的javascript文件。组件显示，但我得到警告:警告:来自服务器的额外属性[…]"有人能解释为什么会发生这种情况，也许如何告诉next.js没有什么错误的发生?
完整的错误是:
Extra attributes from the server: class
at my-ui-icon
at a
at li
at ul
at div
at div
at div
at nav
at div
at Navbar (webpack-internal:///./components/navbar.js:35:157)
at div
at Layout (webpack-internal:///./components/layout.js:37:157)
at MyApp (webpack-internal:///./pages/_app.js:21:24)
at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:258:5)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:754:24)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:893:25)
"class"属性在shadowDom中。
我刚才也遇到了同样的问题。
在我的例子中，html和body标签都存在于根app/layout.tsx文件和app/[locale]/layout.tsx文件中。将它们从后者中移除就解决了问题。
我还从NEXT.js中找到了这个链接，其中列出了可能会看到此问题的其他常见原因:https://nextjs.org/docs/messages/react-hydration-error
同样，我发现这个有趣的讨论有相同的问题和多种可能的解决方案:https://github.com/vercel/next.js/discussions/22388
希望对你有帮助。