”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > Next.js 中间件简介:它如何工作并提供示例

Next.js 中间件简介:它如何工作并提供示例

发布于2024-10-06
浏览:196

Introduction to Next.js Middleware: How It Works with Examples

我们来谈谈Nextjs中的路由。今天,我们来谈谈最强大的事物中间件之一。 Nextjs 中的中间件提供了一种强大而灵活的方法来拦截来自服务器的请求并控制请求流(重定向、URL 重写)并全局增强身份验证、标头、cookie 持久性等功能。

创建中间件

让我们创建 Middleware Next.js 应用程序。首先,我们将在 src 文件夹中为中间件创建一个新文件,例如 middleware.js 或 middleware.ts。 Next.js 中的中间件需要允许您精细控制其活动位置(即自定义匹配器配置,或使用 isXXX 函数)

重定向

以重定向为例,让我们想象一个场景,导航到 /profile 应将用户重定向到主页。使用自定义匹配器配置方法,我们可以通过导入必要的类型、定义中间件函数并指定匹配器配置来实现此目的:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

export const config = {
  matcher: '/profile',
};

在此示例中,中间件功能检查请求 URL 路径是否为 /profile 并将用户重定向到主页。

对于条件语句的方式,我们可以修改代码如下:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/profile') {
    return NextResponse.redirect('/hello');
  }
  return NextResponse.next();
}

在这种情况下,中间件会检查请求 URL 路径,如果路径为 /profile,则将用户重定向到 /hello 路由。

Next.js 中的中间件不仅仅是处理重定向。它还允许 URL 重写,这对于旧版 URL 支持或 SEO 优化非常有用。通过在前面的示例中将重定向更改为重写,浏览器中的 URL 将保持不变(/profile),但响应内容将更改为 /hello 路由中的内容。

使用 Cookie

最后,让我们探讨一下 cookie 和 headers 在中间件中的使用。我们可以修改我们的中间件来处理用户对主题的偏好,并为所有响应添加自定义标头:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Handle user theme preference
  const themePreference = request.cookies.get('theme');
  if (!themePreference) {
    response.cookies.set('theme', 'dark');
  }

  // Add a custom header
  response.headers.set('Custom-Header', 'Custom Value');

  return response;
}

在此示例中,我们首先检查用户是否在 cookie 中存储了主题首选项。如果没有,我们通过添加 cookie 将主题设置为“深色”。然后,我们向响应添加自定义标头,这对于传递附加信息或用于调试目的非常有用。

如您所见,Next.js 中的中间件是一个功能强大的工具,可让您有效地控制和拦截请求响应周期、启用重定向、URL 重写以及标头和 cookie 的操作。通过掌握中间件,您可以增强 Next.js 应用程序中的路由体验,并创建更强大和可定制的用户体验。

“Next.js 中的中间件是一项强大的功能,它提供了一种强大的方法来拦截和控制应用程序中的请求和响应流。” - Next.js 文档

结论

总之,我们学习了如何在 Next.js 中定义中间件,探索两种主要方法(自定义匹配器配置和条件语句),以及应用中间件来处理重定向、URL 重写以及 cookie 和标头的管理。这些知识将帮助您利用中间件提供的灵活性和控制力,将 Next.js 应用程序提升到一个新的水平。

版本声明 本文转载于:https://dev.to/sheraz4194/introduction-to-nextjs-middleware-how-it-works-with-examples-46pp?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何使用 CSS 让图像随浏览器大小自动调整大小?
    如何使用 CSS 让图像随浏览器大小自动调整大小?
    使用 CSS 根据浏览器大小自动调整图像大小您希望在调整浏览器窗口大小时自动调整图像大小,但提供的代码不工作。让我们研究一个解决方案。为了使图像灵活,您需要向它们添加 max-width: 100% 和 height: auto 。然而,IE8 有一个错误,这不起作用。要修复此问题,请为 IE8 添...
    编程 发布于2024-11-07
  • Next.js:Web 开发的 React 框架
    Next.js:Web 开发的 React 框架
    I'm thrilled to introduce Next.js, a game-changing React framework for web development. It makes it easy to build fast, server-rendered, and staticall...
    编程 发布于2024-11-07
  • 了解网络存储
    了解网络存储
    目录 曲奇饼 本地存储 会话存储 索引数据库 对比分析 安全考虑 结论 介绍 数据存储是现代 Web 应用程序的一个重要方面。无论是保存用户首选项、缓存数据以供离线使用,还是跟踪会话,在浏览器中管理数据的方式都会显着影响用户体验。我们有多种在浏览器中存储数据的选项,...
    编程 发布于2024-11-07
  • 指针如何影响 Go 函数中的值修改?
    指针如何影响 Go 函数中的值修改?
    理解 Go 中指针的值修改在 Go 中,指针允许间接访问和修改值。然而,在将指针传递给函数时,了解指针的工作原理至关重要。将指针传递给函数时,会出现两种情况:值修改与指针重新分配。场景 1 : 值修改考虑这段代码:type Test struct { Value int } func main() ...
    编程 发布于2024-11-07
  • 将 django 部署到生产环境
    将 django 部署到生产环境
    我最近将我自己的 django 应用程序部署到生产环境中。该网站名为 videoeiro.com,是用 django HTML/CSS/JS Tailwind 开发的。 设置 我正在使用 debian 12 服务器,它将通过 cloudflare 隧道公开我的应用程序。所有静态文件都...
    编程 发布于2024-11-07
  • 实施雪花 ID 生成器
    实施雪花 ID 生成器
    什么是雪花 ID? 雪花 ID 在分布式环境中用于生成无冲突、简短、唯一的 ID。与依赖数据库生成 ID 或使用长 128 位 UUID 等传统方法不同,Snowflake ID 使用时间和简单的按位运算。这种巧妙的技术允许每个微服务独立生成唯一的 ID,而不需要中央系统来避免冲突...
    编程 发布于2024-11-07
  • 如何在没有 JS 框架的情况下使用 CSS 设计 SVG 图像样式?
    如何在没有 JS 框架的情况下使用 CSS 设计 SVG 图像样式?
    使用 CSS 设置 SVG 图像样式:一种新颖的方法在本文中,我们将探索一种使用 CSS 嵌入 SVG 图像并操纵其外观的新颖方法,而无需使用 CSS使用 JS-SVG 框架。问题陈述以前,集成 SVG 图像同时通过 CSS 保持对其元素的访问一直是一个挑战。虽然 JS-SVG 框架提供了解决方案,...
    编程 发布于2024-11-07
  • ## 你能确定用户是否可以在 JavaScript 中单击后退按钮吗?
    ## 你能确定用户是否可以在 JavaScript 中单击后退按钮吗?
    浏览器历史记录导航:确定后退按钮可用性开发 Web 应用程序时,确定用户是否可以在他们的浏览器历史记录。然而,出于安全考虑,JavaScript 缺乏直接手段来确定浏览器历史记录是否存在。尝试的解决方案及其局限性:1。 History.previous:虽然该属性理论上提供了有关历史记录中上一页的信...
    编程 发布于2024-11-07
  • 如何在保持模糊背景的同时去除子元素的背景模糊?
    如何在保持模糊背景的同时去除子元素的背景模糊?
    从子元素中删除背景模糊您有一个 ,其背景图像应用了模糊效果。但是,所有子元素也会受到这种模糊的影响,这是不希望的。本文提供了解决此问题的解决方案,允许您在保持背景图像的模糊效果的同时保留子元素的清晰度。解决方案:创建叠加元素要实现此目的,您可以在父元素中创建一个单独的 并将背景图像和模糊效果应用到...
    编程 发布于2024-11-07
  • Leetcode:字符串的最大公约数
    Leetcode:字符串的最大公约数
    问题陈述 1071. 字符串的最大公约数 对于两个字符串 s 和 t,当且仅当 s = t t t ... t t (即 t 与自身连接一次或多次)时,我们才说“t 除 s”。 给定两个字符串 str1 和 str2,返回使 x 整除 str1 和 str2 的最大字符串 x。 ...
    编程 发布于2024-11-07
  • Vue 黑暗面备忘单 |部分反应性
    Vue 黑暗面备忘单 |部分反应性
    Hi there DEV.to community! This article will include multiple aspects of Vue 3 that are mostly used or are kind of on the dark side and not paid atten...
    编程 发布于2024-11-07
  • 如何在 Pygame 中同时运行多个 While 循环?
    如何在 Pygame 中同时运行多个 While 循环?
    如何在Pygame中同时实现多个While循环在Pygame中,可以同时执行多个While循环,允许独立和程序中的连续操作。克服执行阻塞在提供的代码片段中,问题是由于存在两个试图同时运行的 while 循环而引起的。第二个循环包含 time.sleep() 函数来引入延迟,它会干扰第一个循环的执行,...
    编程 发布于2024-11-07
  • Go 中如何根据元素的第一次出现来拆分字符串?
    Go 中如何根据元素的第一次出现来拆分字符串?
    仅根据 Go 中元素的第一次出现来拆分字符串使用 git 分支名称时,可能需要拆分它们以区分远程和远程分支名称。分支名称本身。虽然最初采用了按第一个斜杠分割,但由于分支名称中可能存在多个斜杠,事实证明它是不够的。为了解决这个问题,提出了一种更简洁的方法,可以避免手动元素移动和重新合并。利用strin...
    编程 发布于2024-11-07
  • 如何在Python中检查列表是按升序还是降序排序?
    如何在Python中检查列表是按升序还是降序排序?
    验证列表顺序的 Pythonic 方法处理按升序 (ASC) 或降序 (DESC) 顺序的值列表时,通常需要验证元素的正确排序。 Python 以其用户友好的语法而闻名,提供了一种优雅的方式来执行此检查。要确定列表是按 ASC 还是 DESC 排序,请考虑以下 Pythonic 解决方案:all(l...
    编程 发布于2024-11-07
  • Django 适合所有人。
    Django 适合所有人。
    即使对于“小型”网站,Django 也很棒 我认为人们倾向于认为 Django 要么用于构建老式的、工业强度的整体应用程序,要么用于 API 并使用 React 之类的东西作为前端。我在这里告诉您,即使对于您的个人网站,普通的 Django 也是一个不错的选择!在我看来,如果你需要...
    编程 发布于2024-11-07

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3