Next.js 13与Sanity Studio布局异常：导航栏显示问题求助

问题分析 #

你遇到的核心问题是Next.js 13路由分组的布局隔离未生效，导致导航栏在Sanity Studio页面异常显示、返回用户端后又消失。根源在于你将(admin)和(user)分组的layout.tsx都作为独立根布局（包含<html>和<body>），跨分组导航时Next.js无法正确处理全页面替换，引发DOM渲染和 hydration 异常。

解决方案 #

调整布局结构，让根目录的全局布局负责基础HTML结构，路由分组的子布局单独控制导航栏显示：

1. 创建根全局布局app/layout.tsx

这是所有路由的父布局，负责统一渲染<html>和<body>：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  )
}

2. 修改用户端子布局app/(user)/layout.tsx

移除根布局标签，仅负责渲染导航栏和用户端内容：

import Header from '@/components/Header'
import '../../styles/globals.css'

export default function UserLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <Header />
      {children}
    </>
  )
}

3. 修改管理端子布局app/(admin)/layout.tsx

同样移除根布局标签，仅渲染Studio内容：

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <>{children}</>
}

4. 验证Sanity Studio页面配置

确保app/(admin)/studio/[[...index]]/page.tsx正确渲染Studio：

import { NextStudio } from 'next-sanity/studio'
import config from '@/sanity.config'

export default function StudioPage() {
  return <NextStudio config={config} />
}

生效原理 #

调整后，根布局统一管理HTML基础结构，路由分组的子布局作为嵌套内容存在：

• 用户端路由（/(user)下的页面）会嵌套UserLayout，自动带上导航栏
• Studio路由（/studio）会嵌套AdminLayout，仅显示Studio内容
• 跨分组导航时，Next.js会正确切换子布局，避免DOM渲染异常

最后可以清除浏览器缓存并重启开发服务器，确保布局变更完全生效。

内容的提问来源于stack exchange，提问作者Mark Scholes