英文:
Can't run Chakra UI with Next.js 13
问题
我在查看附加链接中的 Chakra UI 安装与 Next.js 13 时，我相信我已经完全完成了。
然而，当我保存我的文件后，我注意到自动页面没有刷新，我遇到了一些水合错误。在控制台中看到的错误代码如下：
layout.tsx 文件如下：
import './globals.css'import { Inter } from 'next/font/google'import Providers from "@/app/chakra-provider";export const metadata = {title: 'Create Next App',description: 'Generated by create next app',}export default function RootLayout({children,}: {children: React.ReactNode}) {return (<html lang="en"><Providers>{children}</Providers></html>)}
provider.tsx
'use client'import { CacheProvider } from '@chakra-ui/next-js'import { ChakraProvider } from '@chakra-ui/react'export default function Providers({children}: {children: React.ReactNode}) {return (<CacheProvider><ChakraProvider>{children}</ChakraProvider></CacheProvider>)}
我在 Stack Overflow 上查找了关于这个问题的信息，有人提到在替换
<body className={inter.className}>{children}</body> 行之后，他遇到了相似的问题。我现在也遇到了类似的问题。
英文:
I was looking the Chakra UI installation with Next.js 13 from the attached link and I believe did it completely.
However, when I saved my file afterwards, I noticed that the automatic page did not refresh and I encountered a hydration error in places. The error code seen in the console is as follows:
layout.tsx file in below,
import './globals.css'import {Inter} from 'next/font/google'import Providers from "@/app/chakra-provider";export const metadata = {title: 'Create Next App',description: 'Generated by create next app',}export default function RootLayout({children,}: {children: React.ReactNode}) {return (<html lang="en"><Providers>{children}</Providers></html>)}
provider.tsx
'use client'import { CacheProvider } from '@chakra-ui/next-js'import { ChakraProvider } from '@chakra-ui/react'export default function Providers({children}: {children: React.ReactNode}) {return (<CacheProvider><ChakraProvider>{children}</ChakraProvider></CacheProvider>)}
I was browsing about this on Stack Overflow, and someone mentioned that he experienced this after replacing the
<body className={inter.className}>{children}</body> line
with just {children}. I am having a similar problem right now.
答案1
得分: 0
顶级布局称为根布局。此必需布局在应用程序中的所有页面之间共享。根布局必须包含html和body标记。
在搜索后，我认为这可能是问题
所以确保body标记出现在html之后的应用程序顶层
export default function RootLayout({ children }: {children: React.ReactNode;}) {return (<html lang="en"><body>{children}</body></html>);}
另一种解决方案 #2
在此找到解决方案https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/下的next/navigation
export const Example = {parameters: {nextjs: {appDirectory: true,},},};
英文:
The top-most layout is called the Root Layout. This required layout is shared across all pages in an application. Root layouts must contain html and body tags.
After some searching I think this maybe the problem
So make sure body tag is present in top-level of the app after html
export default function RootLayout({ children }: {children: React.ReactNode;}) {return (<html lang="en"><body>{children}</body></html>);}
Another Solution #2
Found the solution here https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/ under next/navigation
export const Example = {parameters: {nextjs: {appDirectory: true,},},};
答案2
得分: 0
实际上这不是一个问题。这是因为你正在使用 Tailwind，它重置了 CSS。
只需将以下代码添加到你的 tailwind.config.js 文件中：
corePlugins: {preflight: false,}
更多详情请查看：解决方案问题
英文:
Acutally it was not an issue. it is because of you are using tailwind which reseting the css.
Just add this below code in your tailwind.config.js file.
corePlugins: {preflight: false,}
For more details: Solution issue
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论