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>
AI 代码解读

正常页面是这样的:
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>
    );
    }
    
    AI 代码解读

    我看一些 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 }),
}));
AI 代码解读

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>
  );
}
AI 代码解读

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>
  );
}
AI 代码解读

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>
  );
}
AI 代码解读

我们根据 skipGlobalLayout 属性来判断是否显示 RootLayout 布局,这样就能达到我们的目的了。

目录
打赏
0
33
33
2
54
分享
相关文章
「全网最细 + 实战源码案例」设计模式——享元模式
享元模式(Flyweight Pattern)是一种结构型设计模式,旨在减少大量相似对象的内存消耗。通过分离对象的内部状态(可共享、不变)和外部状态(依赖环境、变化),它有效减少了内存使用。适用于存在大量相似对象且需节省内存的场景。模式优点包括节省内存和提高性能,但会增加系统复杂性。实现时需将对象成员变量拆分为内在和外在状态,并通过工厂类管理享元对象。
178 92
Python 高级编程与实战:深入理解设计模式与软件架构
本文深入探讨了Python中的设计模式与软件架构,涵盖单例、工厂、观察者模式及MVC、微服务架构,并通过实战项目如插件系统和Web应用帮助读者掌握这些技术。文章提供了代码示例,便于理解和实践。最后推荐了进一步学习的资源,助力提升Python编程技能。
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
「全网最细 + 实战源码案例」设计模式——命令模式
命令模式(Command Pattern)是一种行为型设计模式,将请求封装成独立对象,从而解耦请求方与接收方。其核心结构包括:Command(命令接口)、ConcreteCommand(具体命令)、Receiver(接收者)和Invoker(调用者)。通过这种方式,命令的执行、撤销、排队等操作更易扩展和灵活。 适用场景: 1. 参数化对象以操作。 2. 操作放入队列或远程执行。 3. 实现回滚功能。 4. 解耦调用者与接收者。 优点: - 遵循单一职责和开闭原则。 - 支持命令组合和延迟执行。 - 可实现撤销、恢复功能。 缺点: - 增加复杂性和类数量。
76 14
「全网最细 + 实战源码案例」设计模式——命令模式
「全网最细 + 实战源码案例」设计模式——责任链模式
责任链模式(Chain of Responsibility Pattern)是一种行为型设计模式,允许将请求沿着处理者链进行发送。每个处理者可以处理请求或将其传递给下一个处理者,从而实现解耦和灵活性。其结构包括抽象处理者(Handler)、具体处理者(ConcreteHandler)和客户端(Client)。适用于不同方式处理不同种类请求、按顺序执行多个处理者、以及运行时改变处理者及其顺序的场景。典型应用包括日志处理、Java Web过滤器、权限认证等。
68 13
「全网最细 + 实战源码案例」设计模式——责任链模式
「全网最细 + 实战源码案例」设计模式——策略模式
策略模式(Strategy Pattern)是一种行为型设计模式,用于定义一系列可替换的算法或行为,并将它们封装成独立的类。通过上下文持有策略对象,在运行时动态切换算法,提高代码的可维护性和扩展性。适用于需要动态切换算法、避免条件语句、经常扩展算法或保持算法独立性的场景。优点包括符合开闭原则、运行时切换算法、解耦上下文与策略实现、减少条件判断;缺点是增加类数量和策略切换成本。示例中通过定义抽象策略接口和具体策略类,结合上下文类实现动态算法选择。
80 8
「全网最细 + 实战源码案例」设计模式——策略模式
「全网最细 + 实战源码案例」设计模式——模板方法模式
模板方法模式是一种行为型设计模式,定义了算法的骨架并在父类中实现不变部分,将可变部分延迟到子类实现。通过这种方式,它避免了代码重复,提高了复用性和扩展性。具体步骤由抽象类定义,子类实现特定逻辑。适用于框架设计、工作流和相似算法结构的场景。优点包括代码复用和符合开闭原则,缺点是可能违反里氏替换原则且灵活性较低。
73 7
「全网最细 + 实战源码案例」设计模式——模板方法模式
|
3月前
|
「全网最细 + 实战源码案例」设计模式——模式扩展(配置工厂)
该设计通过配置文件和反射机制动态选择具体工厂,减少硬编码依赖,提升系统灵活性和扩展性。配置文件解耦、反射创建对象,新增产品族无需修改客户端代码。示例中,`CoffeeFactory`类加载配置文件并使用反射生成咖啡对象,客户端调用时只需指定名称即可获取对应产品实例。
98 40
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
36 8
「全网最细 + 实战源码案例」设计模式——适配器模式
适配器模式(Adapter Pattern)是一种结构型设计模式,通过引入适配器类将一个类的接口转换为客户端期望的另一个接口,使原本因接口不兼容而无法协作的类能够协同工作。适配器模式分为类适配器和对象适配器两种,前者通过多重继承实现,后者通过组合方式实现,更常用。该模式适用于遗留系统改造、接口转换和第三方库集成等场景,能提高代码复用性和灵活性,但也可能增加代码复杂性和性能开销。
86 28

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等