中介軟體升級指南
我們致力於改進中介軟體以使其達到正式版本 (GA)，並根據您的回饋對中介軟體 API（以及您在應用程式中定義中介軟體的方式）進行了一些變更。
本升級指南將幫助您了解這些變更、變更的原因，以及如何將現有的中介軟體遷移到新的 API。本指南適用於符合以下條件的 Next.js 開發人員：
- 目前使用 Beta 版 Next.js 中介軟體功能
- 選擇升級到 Next.js 的下一個穩定版本 (
v12.2)
您可以使用最新版本 (npm i next@latest) 開始升級您的中介軟體。
注意事項：本指南中描述的變更已包含在 Next.js
12.2版中。您可以保留目前的網站結構，包含巢狀中介軟體，直到您遷移到12.2（或 Next.js 的canary版本）。
如果您已設定 ESLint，則需要執行 npm i eslint-config-next@latest --save-dev 來升級您的 ESLint 設定，以確保使用的版本與 Next.js 版本相同。您可能還需要重新啟動 VSCode 才能使變更生效。
在 Vercel 上使用 Next.js 中介軟體
如果您在 Vercel 上使用 Next.js，則您現有的使用中介軟體的部署將繼續運作，並且您可以繼續使用中介軟體部署您的網站。當您將網站升級到 Next.js 的下一個穩定版本 (v12.2) 時，您需要遵循此升級指南來更新您的中介軟體。
重大變更
無巢狀中介軟體
變更摘要
說明 和 values 等方法。
如何升級
NextResponse 現在有一個 cookies 實例，包含：
cookies.deletecookies.setcookies.getWithOptions
以及其他從 Map 擴展的方法。
之前
// pages/_middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(request: NextRequest) {
// create an instance of the class to access the public methods. This uses `next()`,
// you could use `redirect()` or `rewrite()` as well
let response = NextResponse.next()
// get the cookies from the request
let cookieFromRequest = request.cookies['my-cookie']
// set the `cookie`
response.cookie('hello', 'world')
// set the `cookie` with options
const cookieWithOptions = response.cookie('hello', 'world', {
path: '/',
maxAge: 1000 * 60 * 60 * 24 * 7,
httpOnly: true,
sameSite: 'strict',
domain: 'example.com',
})
// clear the `cookie`
response.clearCookie('hello')
return response
}之後
middleware.ts
export function middleware() {
const response = new NextResponse()
// set a cookie
response.cookies.set('vercel', 'fast')
// set another cookie with options
response.cookies.set('nextjs', 'awesome', { path: '/test' })
// get all the details of a cookie
const { value, ...options } = response.cookies.getWithOptions('vercel')
console.log(value) // => 'fast'
console.log(options) // => { name: 'vercel', Path: '/test' }
// deleting a cookie will mark it as expired
response.cookies.delete('vercel')
return response
}新的使用者代理程式輔助工具
變更摘要
- 從
next/server導入userAgent輔助函式 - 解構您需要使用的屬性
之前
pages/_middleware.ts
import { NextRequest, NextResponse } from 'next/server'
export function middleware(request: NextRequest) {
const url = request.nextUrl
const viewport = request.ua.device.type === 'mobile' ? 'mobile' : 'desktop'
url.searchParams.set('viewport', viewport)
return NextResponse.rewrite(url)
}之後
middleware.ts
import { NextRequest, NextResponse, userAgent } from 'next/server'
export function middleware(request: NextRequest) {
const url = request.nextUrl
const { device } = userAgent(request)
const viewport = device.type === 'mobile' ? 'mobile' : 'desktop'
url.searchParams.set('viewport', viewport)
return NextResponse.rewrite(url)
}不再提供頁面匹配資料
變更摘要 來檢查中間件是否正在針對特定頁面匹配進行調用。
說明
使用 URLPattern 來檢查中間件是否正在針對特定頁面匹配進行調用。
之前
pages/_middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest, NextFetchEvent } from 'next/server'
export function middleware(request: NextRequest, event: NextFetchEvent) {
const { params } = event.request.page
const { locale, slug } = params
if (locale && slug) {
const { search, protocol, host } = request.nextUrl
const url = new URL(`${protocol}//${locale}.${host}/${slug}${search}`)
return NextResponse.redirect(url)
}
}之後
middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
const PATTERNS = [
[
new URLPattern({ pathname: '/:locale/:slug' }),
({ pathname }) => pathname.groups,
],
]
const params = (url) => {
const input = url.split('?')[0]
let result = {}
for (const [pattern, handler] of PATTERNS) {
const patternResult = pattern.exec(input)
if (patternResult !== null && 'pathname' in patternResult) {
result = handler(patternResult)
break
}
}
return result
}
export function middleware(request: NextRequest) {
const { locale, slug } = params(request.url)
if (locale && slug) {
const { search, protocol, host } = request.nextUrl
const url = new URL(`${protocol}//${locale}.${host}/${slug}${search}`)
return NextResponse.redirect(url)
}
}