我正在寻找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上浏览过这个，有人提到他在用{children}替换<body className={inter.className}>{children}</body>行后遇到了这个问题。我现在也有类似的问题。
3条答案
按热度按时间qco9c6ql1#
最上面的布局称为根布局。此必需的布局在应用程序中的所有页面之间共享。根布局必须包含html和body标记。
经过一些搜索，我认为这可能是问题所在，所以请确保身体标签是目前在顶级的应用程序后，html
字符串
另一种解决方案#2
在next/navigation下找到解决方案https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/
型
fcg9iug32#
实际上这不是问题。这是因为你正在使用顺风重置css。
只需将下面的代码添加到
tailwind.config.js文件中。字符串
更多详情：Solution issue
hvvq6cgz3#
此错误消息“未捕获错误：invariant expected app router to be mounted”表明在Next.js应用程序中安装app router可能存在问题。这可能与不正确的配置或缺少依赖项有关。一些可能的解决方案是：
确保在_app.js文件中正确设置了Next.js路由器上下文提供程序，并从'next/router'导入{ Router };声明。
确保所有依赖项都是最新的并且安装正确。在这种情况下，清理node_modules文件夹并使用npm install重新运行依赖项的安装可能会有所帮助。
检查是否无意中删除了布局组件中的标记。
检查您是否错误地将useRouter钩子导入到应用根目录中，而应用根目录只应导入到页面中。
在某些情况下，使用旧的React版本可能会导致此错误。因此，尝试使用npm install react@latest更新package.json文件中的React版本。
如果你使用的是Storybook，将其更新到最新版本并添加nextjs预置可能会有所帮助。
建议逐一执行上述步骤，以缩小此错误的根本原因。