带有尾风的未处理运行时错误next.js

Question

我看了一门关于nft市场的课程。在设计中使用顺风css。我在录像里做什么。但我会犯错。我不知道这是在哪怎么解决的。在浏览器上得到以下信息：

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

控制台得到这个：

Warning: Received `false` for a non-boolean attribute `className`.

If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}.

If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead.
    at img
    at ImageElement (webpack-internal:///./node_modules/next/dist/client/image.js:575:11)
    at span
    at Image (webpack-internal:///./node_modules/next/dist/client/image.js:18:11)
    at div
    at nav
    at Navbar (webpack-internal:///./components/Navbar.jsx:95:88)
    at div
    at c (C:\Users\Feruz\Desktop\crypto\nft-marketplace\node_modules\next-themes\dist\index.js:1:291)
    at exports.ThemeProvider (C:\Users\Feruz\Desktop\crypto\nft-marketplace\node_modules\next-themes\dist\index.js:1:3566)      
    at MyApp (webpack-internal:///./pages/_app.js:19:18)
    at StyleRegistry (C:\Users\Feruz\Desktop\crypto\nft-marketplace\node_modules\styled-jsx\dist\index\index.js:671:34)
    at AppContainer (C:\Users\Feruz\Desktop\crypto\nft-marketplace\node_modules\next\dist\server\render.js:321:29)
    at AppContainerWithIsomorphicFiberStructure (C:\Users\Feruz\Desktop\crypto\nft-marketplace\node_modules\next\dist\server\render.js:350:57)
    at div
    at c (C:\Users\Feruz\Desktop\crypto\nft-marketplace\node_modules\next-themes\dist\index.js:1:291)
    at exports.ThemeProvider (C:\Users\Feruz\Desktop\crypto\nft-marketplace\node_modules\next-themes\dist\index.js:1:3566)      
    at MyApp (webpack-internal:///./pages/_app.js:19:18)
    at StyleRegistry (C:\Users\Feruz\Desktop\crypto\nft-marketplace\node_modules\styled-jsx\dist\index\index.js:671:34)
    at AppContainer (C:\Users\Feruz\Desktop\crypto\nft-marketplace\node_modules\next\dist\server\render.js:321:29)
    at AppContainerWithIsomorphicFiberStructure (C:\Users\Feruz\Desktop\crypto\nft-marketplace\node_modules\next\dist\server\render.js:350:57)
    at div
    at Body (C:\Users\Feruz\Desktop\crypto\nft-marketplace\node_modules\next\dist\server\render.js:596:21)

我尝试更改className属性。但这帮不了我。这里是我的集线器存储库。

Answer 1

我解决了这个错误。在查看文献资料时，应该将代码更改为：

const MyApp = ({ Component, pageProps }) => {
  const [mounted, setMounted] = useState(false);
  // const { theme, setTheme } = useTheme();

  useEffect(() => setMounted(true), []);
  if (!mounted) return null;
  return (
    <ThemeProvider attribute="class">
      <div className="dark:bg-nft-dark bg-white min-h-screen">
        <Navbar />
        <div className="pt-65">
          <Component {...pageProps} />
        </div>
        <Footer />
      </div>
      <Script src="https://kit.fontawesome.com/7409f70bd9.js" crossorigin="anonymous" />
    </ThemeProvider>
  );
};

而且起作用了。