Next js + 样式化组件水合错误

问题描述 投票：0回答：1

我正在尝试将样式组件与下一个js结合起来，我创建了一个主页并想添加页脚和导航栏，但不仅在主页上而且在其他页面上。每当我向布局添加导航栏或页脚时，都会出现水合错误。我应该做什么？我应该给你什么来帮助我解决我的问题？

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
 return (
 <html lang="en">
  <head>
    <link rel="icon" href={icon.src} />
  </head>
  <body className={kameron.className}>
    <StyledComponentsRegistry>
      <Navbar />
      <GlobalStyle />
      {children}
      <Footer />
    </StyledComponentsRegistry>
  </body>
</html >
next.js styled-components
1个回答
0
投票

披露：我是 next-yak 的作者

您可以使用 next-yak 而不是 styled-component

来解决这个问题

它是专门为处理 Next.js 的 SSR 和 RSC 问题而构建的，同时保留您熟悉的样式组件 API：

// layout.tsx
import { styled } from 'next-yak'

const Nav = styled.nav`
  // …
`

const Footer = styled.footer`
  // …
`

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Nav>...</Nav>
        {children}
        <Footer>...</Footer>
      </body>
    </html>
  )
}

// next.config.mjs
import { withYak } from "next-yak/withYak";

export default withYak({
  // your next config if any
})

主要好处是 next-yak 在构建时提取样式 - 因此您不需要 StyledComponentsRegistry 并且不会出现水合不匹配的情况

您现有的样式组件代码应该只需进行最少的更改即可工作 - 只需更新导入即可

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.