英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论