Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式

来自云龙湖轮廓分明的月亮 · 2025-1-9 11:05:46

业务场景

在目前常见的中背景管理系统中，比较常见的是固定的布局方式包裹页面，但一些特别页面，好比：登录页面、注册页面、忘记密码页面这些页面是不必要布局包裹的。
但在 Next.js AppRouter 中，必须包含一个根布局文件(RootLayout)，默认情况下，文件夹层次布局中的布局也是嵌套的，这意味着它们通过其子布局的属性来包装子布局。这是 Next.js 框架的设计理念，目的是允许你创建复杂的页面布局，同时保持代码的整洁和可维护性。
以官网 Nesting layouts 为例，最后 app/blog/[slug]/page.js 天生的结果为：

<RootLayout>
<BlogLayout>
{children}
</BlogLayout>
</RootLayout>

复制代码

正常页面是这样的：

但登录页面如果不处理就会变成这样：

很明显，这不是我们想要的，我们希望这些特别页面不必要父级 layout 包裹，那这个题目该怎么去办理呢？
办理方案

我在网上险些找不到关于 Next.js layout 嵌套布局的资料，但我觉得这个题目挺故意思的，以是特地写篇文章讨论一下。
这个题目归根结底就是你要不要在 RootLayout 内里写入布局代码，这时候就会分两种情况：

如果你不嫌贫困，RootLayout 根布局留空，然后在必要的页面下都新建一个 layout.tsx 文件：

export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang={locale} suppressHydrationWarning>
<body>
{children}
</body>
</html>
);
}

复制代码

我看一些 Next.js 教程的源码就是这样布局的，感觉有点贫困。

另有一种就是默认 RootLayout 是常规布局，我们必要想个办法在一些特别页面把 RootLayout 包裹去掉。

我采用的是后者，确定方案后，决定结合 zustand 来定义一个变量用来是否表现根布局。
具体步调

新建 /store/layoutStore.ts 文件：

import { create } from 'zustand';
type LayoutState = {
skipGlobalLayout: boolean;
setSkipGlobalLayout: (skip: boolean) => void;
};
export const useLayoutStore = create<LayoutState>((set) => ({
skipGlobalLayout: false,
setSkipGlobalLayout: (skip) => set({ skipGlobalLayout: skip }),
}));

复制代码

新建 /components/GlobalLayout 文件：

'use client';
import { SessionProvider } from 'next-auth/react';
import AppSideBar from '@/components/AppSideBar';
import GlobalFooter from '@/components/GlobalFooter'; // 底部版权
import GlobalHeader from '@/components/GlobalHeader'; // 头部布局
import PageAnimatePresence from '@/components/PageAnimatePresence';
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
import { useLayoutStore } from '@/store/layoutStore';
type GlobalLayoutProps = {
children: React.ReactNode;
};
export default function GlobalLayout({ children }: GlobalLayoutProps) {
// 是否跳过全局布局
const skipGlobalLayout = useLayoutStore((state) => state.skipGlobalLayout);
return skipGlobalLayout ? (
<>{children}</>
) : (
<SessionProvider>
<SidebarProvider>
<AppSideBar />
<SidebarInset>
{/* 头部布局 */}
<GlobalHeader />
<PageAnimatePresence>{children}</PageAnimatePresence>
{/* 底部版权 */}
<GlobalFooter />
</SidebarInset>
</SidebarProvider>
</SessionProvider>
);
}

复制代码

import GlobalLayout from '@/components/GlobalLayout'; // 全局布局
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang={locale} suppressHydrationWarning>
<body>
<GlobalLayout>{children}</GlobalLayout>
</body>
</html>
);
}

复制代码

在不必要 RootLayout 的页面 layout.tsx 文件中：

'use client';
import { useMount, useUnmount } from 'ahooks';
import LangSwitch from '@/components/LangSwitch';
import ThemeModeButton from '@/components/ThemeModeButton';
import { useLayoutStore } from '@/store/layoutStore';
export default function LoginLayout({ children }: { children: React.ReactNode }) {
useMount(() => {
useLayoutStore.setState({ skipGlobalLayout: true });
});
useUnmount(() => {
// 如果需要在离开页面时重置状态
useLayoutStore.setState({ skipGlobalLayout: false });
});
return (
<div className="relative flex h-[calc(100vh_-_2rem)] w-[calc(100vw_-_2rem)] overflow-hidden justify-center items-center">
{children}
<div className="flex absolute top-0 right-0">
<ThemeModeButton />
<LangSwitch />
</div>
</div>
);
}

复制代码

我们根据 skipGlobalLayout 属性来判定是否表现 RootLayout 布局，这样就能达到我们的目的了。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块