(下12.2)链接中间件

Question

我正在寻找一个nextJS项目链中间件，在最新的nextJS版本与稳定的中间件API。下面是我的middleware.ts文件的一个示例片段。

这两个都将返回一个NextResponse对象，我如何去链接它们，使cookie先添加，然后传递到寻找重定向?

我想我将不得不延长第二中间件API的反应和使用它的内容或转嫁成本。有人能举个例子吗?

export const middleware = (req: NextRequest): NextResponse | undefined => {
addCookieMiddleware(req);
findRedirectsMiddleware(req);
// How to return a singular NextResponse object with the cookie attached and the correct URL to redirect?
}

Answer 1

我也想试试。

文档说你可以链接https://nextjs.org/docs/api-reference/next/server#static-methods

next() -返回将继续中间件链的NextResponse

下面是v12.2.2的源代码(在撰写本文时是当前版本)https://github.com/vercel/next.js/blob/689626c6a4d509fe04aaf82c9971a5928669bcf4/packages/next/server/web/spec-extension/response.ts L64

static next(init?: ResponseInit) {
const headers = new Headers(init?.headers)
headers.set('x-middleware-next', '1')
return new NextResponse(null, { ...init, headers })
}

如果它做链，我认为它必须做一些与x-middleware-next头它正在设置。我看了源代码，我仍然不能确定如何链接。

另一个有趣的事情是next()返回一个新的NextResponse，但是，next()是一个静态方法。

由于next()是静态的，所以不能调用两次。

这行不通，response将是未定义的。

const response = NextResponse.next()
response.next({
headers: {
'a-test': Math.random().toString(),
},
})

---

我现在在做什么:

您通过调用next()和使用公共cookie属性来设置cookie，并使用Map操作。

const response = NextResponse.next()
response.cookies.set('a-test', Math.random().toString())

您可以通过调用next()并传入一个包含headers对象的对象来设置头。

const response = NextResponse
response.next({
headers: {
'a-test': Math.random().toString(),
},
})

我首先想到的是使用const response = new NextResponse，但没有工作，response总是未定义的。你必须使用const response = NextResponse

由于您只能调用next()一次，我能做的最好的事情是首先调用headers函数，其中需要调用next()，然后调用设置cookie的函数。

// middleware.js
import { NextResponse } from 'next/server'
const setHeaders = (response) => {
return response.next({
headers: {
'a-test': Math.random().toString(),
},
}
}
const setCookies = (response) => {
response.cookies.set('a-test', Math.random().toString())
return response
}
export async function middleware(request) {
// Limitation in config matcher, requires me to exclude here
if (request.nextUrl.pathname.startsWith('/_next')) {
return NextResponse.next()
}
let response = NextResponse
response = setHeaders(response) 
response = setCookies(response)
return response
}

希望这对你有帮助!