如何在Next.js中间件中修复重定向？ 我是使用Next.js和Next-Intl插件进行国际化的项目。 我想通过强制使用我们自己的cookie来扩展下一个INTL LOCALE检测逻辑（在...

Question

next-intl

语言环境检测逻辑。

问题是，当我将自定义中间件链在

next-intl

中间件前面时，它似乎不起作用。看起来他们被链中的中间件覆盖了 我的中间件 - handlecaleredirect.ts：

export default async function handler(request: NextRequest) {
...
const newUrl = new URL(newPathname)

return NextResponse.redirect(newUrl)
}

HANDLEI18NROUTING.TS：

import { routing } from '../i18n/routing'
import createMiddleware from 'next-intl/middleware'

const handleI18nRouting = createMiddleware(routing)

export default async function handler(request: NextRequest) {
  const response = handleI18nRouting(request)

  // Remove excessive alternate links
  const link = LinkHeader.parse(response.headers.get('link') || '')
  link.refs = link.refs.filter((entry) =>
    STANDARD_LOCALES.includes(entry.hreflang)
  )
  response.headers.set('link', link.toString())

  return response
}

Middleware.ts：

import { pagesWhiteListMiddleware } from './middlewares/pagesWhiteList'
import { chain } from '@nimpl/middleware-chain'
import handleI18nRouting from './middlewares/handleI18nRouting'
import handleLocaleRedirect from './middlewares/handleLocaleRedirect'

export default chain([
  handleLocaleRedirect,
  handleI18nRouting, // <-- here the page is getting redirected again, forcing next-intl logic
  pagesWhiteListMiddleware,
])

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|next-assets|favicon.ico|sw.js|site.webmanifest).*)',
  ],
}

如何强制我的重定向？

在我说出这样的问题之后，解决方案变得很清楚。 最终请求仅在整个链完完成后才返回给客户。 这意味着临时

NextResponse.redirect

如果以后有更多重定向，则无法使用。

解决方案是将重定向逻辑放置在

next-intl

Middleware配置内，并将其从中间链中删除：

Answer 1

HANDLEI18NROUTING.TS：

const handleI18nRouting = createMiddleware(routing)

export default async function handler(request: NextRequest) {
  const newUrl = await handleLocaleRedirect(request)

  if (newUrl) {
    const resp = NextResponse.redirect(newUrl)
    resp.cookies.set(LANGUAGE_MODAL_COOKIE, 'true')
    return resp
  }
  const response = handleI18nRouting(request)

  // Remove excessive alternate links
  const link = LinkHeader.parse(response.headers.get('link') || '')
  link.refs = link.refs.filter((entry) =>
    STANDARD_LOCALES.includes(entry.hreflang)
  )
  response.headers.set('link', link.toString())

  return response
}

update：

也是因为我使用的是

@nimpl/middleware-chain

，返回确实很重要的是，如果您想重定向，然后才能击中中间的其余部分：

Middleware.ts：

FinalNextResponse