introduction

next/server提供了仅服务器 帮助器去在中间件以及 Edge API 路由中使用 .

NextRequest

NextRequest对象是原生Request接口的扩展,并包含了以下增加的方法和属性

• cookies 一个来自Request的cookie(是一个map),查看 Using cookies in Middleware
• nextUrl包括了一个扩展的,解析的,URL 对象(能够让我们访问Next.js 特殊的属性,例如 pathname,basePath,trailingSlash以及 i18n,包括以下的属性 ..
• basePath(string)
• buildId(string || undefined)
• defaultLocale(string || undefined)
• domainLocale
  • defaultLocale: (string)
  • domain : (string)
  • http: (boolean || undefined)
  • locales: (string[] || undefined)
• locale(string || undefined)
• url(URL)
• ip(string || undefined), 包含了请求的IP 地址,这些信息是由我们的发出请求的主机平台提供的 ..
• geo从请求中获取的地理 位置信息 … 这个信息由我们的主机平台提供,包括以下的属性
  • city(string || undefined)
  • country(string || undefined)
  • region(string || undefined)
  • latitude(string || undefined)
  • longitude(string || undefined)

你能够使用NextRequest,作为原始Request接口的直接替换,让我们能够能够基于这个对象操作请求以及做出更多的控制 ..

NextRequest能够从next/server中导出

import type { NextRequest } from 'next/server'

NextFetchEvent

同样扩展了原生的 FetchEvent 对象, 包括ExtendableEvent.waitUntil() - Web APIs | MDN方法 ..

import { NextResponse } from 'next/server'
import type { NextFetchEvent, NextRequest } from 'next/server'
export async function middleware(req: NextRequest, event: NextFetchEvent) {
  event.waitUntil(
    fetch('https://my-analytics-platform.com', {
      method: 'POST',
      body: JSON.stringify({ pathname: req.nextUrl.pathname }),
    })
  )
  return NextResponse.next()
}

NextFetchEvent对象能够从next/server中导入

import type { NextFetchEvent } from 'next/server'

NextResponse

同样扩展了Response接口

public methods

在NextResponse实例上的方法是可用的,取决于使用情况,你可以创建一个实例并分配给一个变量,然后访问以下公共方法

• cookies一个使用了Map的cookie 对象(来自Response)

静态方法

以下的静态方法可以直接在NextResponse 类上直接调用

• redirect()返回一个具有一个重定向集合的NextResponse
• rewrite()返回一个具有重写集合的NextResponse
• next()返回一个持续中间件链处理的NextResponse

为了使用上述的方法,你必须返回一个NextResponse,NextResponse能够从nex/server中导入 …

userAgent

这个帮助器能够允许你和来自请求的用户代理对象进行交互,它来自原始的Request对象的抽象,并且作为一种特性加入,它具有以下的属性:

• isBot: boolean 这个请求来自一个已知的机器人 ..
• browser
  • name: (string || undefined) 浏览器的名称
  • version: (string || undefined) 浏览器的版本,动态决定
• device
  • model(string || undefined) 设备的型号,动态决定
  • type: (string || undefined) 浏览器的类型,能够是以下的值之一(console,mobile,tablet,smarttv,wearable,embeddedor undefined)
  • vendor : (string || undefined),设备的厂商,动态决定的 ..
• engine
  • name: (string || undefined) 浏览器引擎的名称,可以是以下值之一:

- `version`: (`string || undefined`) 浏览器引擎的版本,动态决定或者 `undefined`

• os
  • name: (string || undefined) OS 的名称,可以是undefined
  • version: (string || undefined) OS 版本,动态决定的,或者 undefined
• cpu
  • architecture: (string || undefined),CPu 架构,可以是: 68k, amd64, arm, arm64, armhf, avr, ia32, ia64, irix, irix64, mips, mips64, pa-risc, ppc, sparc, sparc64 or undefined

FAQ

为什么重定向使用307 / 308

当使用redirect()你也许会注意到状态码使用的是307临时重定向,然后308作为永久重定向 .. 然而传统的是 302作为临时重定向,301作为永久重定向,许多浏览器改变重定向的请求方法,当使用302的时候从POST到 GET请求,不管原始的请求方法 ..

给定以下的重定向(/users到 /people),如果你发送一个POST请求到 /users创建一个新的用户,然后应答一个302临时重定向,这个请求方法将会从POST改变为 GET请求,这并没有任何好处,因为创建了一个用户,应该发出一个POST请求到 people，而不是GET请求 ..

这就是为什么使用307作为临时重定向的原因(因为它会将请求方法保留为原始的请求方法(或者说POST)

• 302临时重定向,从POST改变到 GET请求方法类型
• 307临时重定向,将保留请求方法为POST

这个redirect()方法默认使用307,而不是302临时重定向,意味着你的请求总是保留为POST请求 ..

如果你想要让GET响应改变为 POST请求,使用303 ..

Learn more about HTTP Redirects.

如何访问环境变量

process.env可以用来访问环境变量

因为它不是一个 js 对象 ..

例如从Edge 中间件中访问环境变量 ..

他们将在next build上进行评估 …

且它们应该静态访问,而不是通过变量的形式访问 …