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

简介: 这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。

业务场景

在目前常见的中后台管理系统中,比较常见的是固定的布局方式包裹页面,但一些特殊页面,比如:登录页面注册页面忘记密码页面这些页面是不需要布局包裹的。

但在 Next.js AppRouter 中,必须包含一个根布局文件(RootLayout),默认情况下,文件夹层次结构中的布局也是嵌套的,这意味着它们通过其子布局的属性来包装子布局。这是 Next.js 框架的设计理念,目的是允许你创建复杂的页面结构,同时保持代码的整洁和可维护性。

以官网 Nesting layouts 为例,最后 app/blog/[slug]/page.js 生成的结果为:

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

正常页面是这样的:
nzem4zxksnpd7k3n6jpqtmgm4est097j.png

但登录页面如果不处理就会变成这样:
wyek4y2ksv439xe7afhrq6gq5xhnwfbf.png

很明显,这不是我们想要的,我们希望这些特殊页面不需要父级 layout 包裹,那这个问题该怎么去解决呢?

解决方案

我在网上几乎找不到关于 Next.js layout 嵌套布局 的资料,但我觉得这个问题挺有意思的,所以特地写篇文章讨论一下。

这个问题归根结底就是你要不要在 RootLayout 里面写入布局代码,这时候就会分两种情况:

  1. 如果你不嫌麻烦,RootLayout 根布局留空,然后在需要的页面下都新建一个 layout.tsx 文件:

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

    我看一些 Next.js 教程的源码就是这样布局的,感觉有点麻烦。

  2. 还有一种就是默认 RootLayout 是常规布局,我们需要想个办法在一些特殊页面把 RootLayout 包裹去掉。

我采用的是后者,确定方案后,决定结合 zustand 来定义一个变量用来是否显示根布局。

具体步骤

1、 新建 /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 }),
}));

2、新建 /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>
  );
}

3、 修改根目录 layout.tsx 文件:

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>
  );
}

4、 在不需要 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 布局,这样就能达到我们的目的了。

相关文章
|
12天前
|
设计模式 存储 缓存
「全网最细 + 实战源码案例」设计模式——享元模式
享元模式(Flyweight Pattern)是一种结构型设计模式,旨在减少大量相似对象的内存消耗。通过分离对象的内部状态(可共享、不变)和外部状态(依赖环境、变化),它有效减少了内存使用。适用于存在大量相似对象且需节省内存的场景。模式优点包括节省内存和提高性能,但会增加系统复杂性。实现时需将对象成员变量拆分为内在和外在状态,并通过工厂类管理享元对象。
147 83
|
8天前
|
设计模式 存储 算法
「全网最细 + 实战源码案例」设计模式——命令模式
命令模式(Command Pattern)是一种行为型设计模式,将请求封装成独立对象,从而解耦请求方与接收方。其核心结构包括:Command(命令接口)、ConcreteCommand(具体命令)、Receiver(接收者)和Invoker(调用者)。通过这种方式,命令的执行、撤销、排队等操作更易扩展和灵活。 适用场景: 1. 参数化对象以操作。 2. 操作放入队列或远程执行。 3. 实现回滚功能。 4. 解耦调用者与接收者。 优点: - 遵循单一职责和开闭原则。 - 支持命令组合和延迟执行。 - 可实现撤销、恢复功能。 缺点: - 增加复杂性和类数量。
48 14
「全网最细 + 实战源码案例」设计模式——命令模式
|
8天前
|
设计模式 存储 Java
「全网最细 + 实战源码案例」设计模式——责任链模式
责任链模式(Chain of Responsibility Pattern)是一种行为型设计模式,允许将请求沿着处理者链进行发送。每个处理者可以处理请求或将其传递给下一个处理者,从而实现解耦和灵活性。其结构包括抽象处理者(Handler)、具体处理者(ConcreteHandler)和客户端(Client)。适用于不同方式处理不同种类请求、按顺序执行多个处理者、以及运行时改变处理者及其顺序的场景。典型应用包括日志处理、Java Web过滤器、权限认证等。
47 13
「全网最细 + 实战源码案例」设计模式——责任链模式
|
10天前
|
设计模式 算法 开发者
「全网最细 + 实战源码案例」设计模式——策略模式
策略模式(Strategy Pattern)是一种行为型设计模式,用于定义一系列可替换的算法或行为,并将它们封装成独立的类。通过上下文持有策略对象,在运行时动态切换算法,提高代码的可维护性和扩展性。适用于需要动态切换算法、避免条件语句、经常扩展算法或保持算法独立性的场景。优点包括符合开闭原则、运行时切换算法、解耦上下文与策略实现、减少条件判断;缺点是增加类数量和策略切换成本。示例中通过定义抽象策略接口和具体策略类,结合上下文类实现动态算法选择。
46 8
「全网最细 + 实战源码案例」设计模式——策略模式
|
10天前
|
设计模式 SQL 算法
「全网最细 + 实战源码案例」设计模式——模板方法模式
模板方法模式是一种行为型设计模式,定义了算法的骨架并在父类中实现不变部分,将可变部分延迟到子类实现。通过这种方式,它避免了代码重复,提高了复用性和扩展性。具体步骤由抽象类定义,子类实现特定逻辑。适用于框架设计、工作流和相似算法结构的场景。优点包括代码复用和符合开闭原则,缺点是可能违反里氏替换原则且灵活性较低。
57 7
「全网最细 + 实战源码案例」设计模式——模板方法模式
|
22天前
|
设计模式
「全网最细 + 实战源码案例」设计模式——模式扩展(配置工厂)
该设计通过配置文件和反射机制动态选择具体工厂,减少硬编码依赖,提升系统灵活性和扩展性。配置文件解耦、反射创建对象,新增产品族无需修改客户端代码。示例中,`CoffeeFactory`类加载配置文件并使用反射生成咖啡对象,客户端调用时只需指定名称即可获取对应产品实例。
86 40
|
16天前
|
设计模式 Java 开发者
「全网最细 + 实战源码案例」设计模式——适配器模式
适配器模式(Adapter Pattern)是一种结构型设计模式,通过引入适配器类将一个类的接口转换为客户端期望的另一个接口,使原本因接口不兼容而无法协作的类能够协同工作。适配器模式分为类适配器和对象适配器两种,前者通过多重继承实现,后者通过组合方式实现,更常用。该模式适用于遗留系统改造、接口转换和第三方库集成等场景,能提高代码复用性和灵活性,但也可能增加代码复杂性和性能开销。
66 28
|
12天前
|
设计模式 存储 安全
「全网最细 + 实战源码案例」设计模式——组合模式
组合模式(Composite Pattern)是一种结构型设计模式,用于将对象组合成树形结构以表示“部分-整体”的层次结构。它允许客户端以一致的方式对待单个对象和对象集合,简化了复杂结构的处理。组合模式包含三个主要组件:抽象组件(Component)、叶子节点(Leaf)和组合节点(Composite)。通过这种模式,客户端可以统一处理简单元素和复杂元素,而无需关心其内部结构。适用于需要实现树状对象结构或希望以相同方式处理简单和复杂元素的场景。优点包括支持树形结构、透明性和遵循开闭原则;缺点是可能引入不必要的复杂性和过度抽象。
72 22
|
16天前
|
设计模式 缓存 Java
「全网最细 + 实战源码案例」设计模式——代理模式
代理模式(Proxy Pattern)是一种结构型设计模式,通过代理对象控制对目标对象的访问并添加额外功能。它分为静态代理和动态代理,后者包括JDK动态代理和CGLIB动态代理。JDK动态代理基于接口反射生成代理类,而CGLIB通过继承目标类生成子类。代理模式适用于延迟初始化、访问控制、远程服务、日志记录和缓存等场景,优点是职责分离、符合开闭原则和提高安全性,缺点是增加系统复杂性。
69 25
|
14天前
|
设计模式 前端开发 数据库
「全网最细 + 实战源码案例」设计模式——桥接模式
桥接模式(Bridge Pattern)是一种结构型设计模式,通过将抽象部分与实现部分分离,使它们可以独立变化,从而降低代码耦合度,避免类爆炸,提高可扩展性。其结构包括实现类接口、具体实现类、抽象类和精确抽象类。适用于多维度扩展类、隐藏实现细节、简化庞杂类以及运行时切换实现方法的场景。优点包括高扩展性、隐藏实现细节、遵循开闭原则和单一职责原则;缺点是可能增加代码复杂度。示例中展示了不同操作系统播放不同格式视频文件的实现。
46 19

热门文章

最新文章