未处理的运行时错误 next.js 与 tailwindcss答案

【问题标题】：Unhandled Runtime Error next.js with tailwindcss未处理的运行时错误 next.js 与 tailwindcss
【发布时间】：2022-08-21 21:28:43
【问题描述】：

我看了一门关于 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 属性。但它不能帮助我。这是我的 github repo。

请在问题中添加相关代码。
我不知道哪里出错了？为此，我在 github 存储库中添加了帮助查找当前错误哪些页面或哪些组件。我很乐意修复这些错误
根据错误，问题似乎来自使用next/image 的Navbar 组件。
我尝试更改所有页面、组件的 classNames。做 className={theme === \"light\" 吗？ \"filter invert\" : false} 和空类做 className=\"\"。当我完成构建导航栏时，创建 nft 页面一切正常。但是今天运行服务器时会出错。

标签： next.js tailwind-css

【解决方案1】：

我解决了这个错误。在查看the documentation 时，代码应改为：

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>
  );
};

它有效。

【讨论】：