Как изменить объект запроса в файле промежуточного программного обеспечения Next.js?

Question

Как я могу изменить объект запроса в файле промежуточного программного обеспечения Next.js ?

Я видел этот вопрос , но он не отвечает на мой вопрос.

У меня есть файл промежуточного программного обеспечения, который выглядит следующим образом:

      // middleware.js    
export function middleware(request: NextRequest) {
    req.name = "foo";
    //If I console.log req.name I see it is equal to foo.
    console.log(req.name) // logs "foo"
}

Затем у меня есть маршрут API, как показано ниже.

      // pages/api/hello.js
export default async function handler(req, res) {
    console.log( req.name ) //logs undefined
    // what can I do so that I can access the new properties
    // I put in the req object in the middlware file here?
}

Answer 1

Начиная с NextJs v 13.0.0, существует обходной путь настройки заголовков https://nextjs.org/docs/advanced-features/middleware .

      //middleware.js
import { NextResponse } from 'next/server'

export async function middleware (req, res) {
  // NextJs doesn't allow you to modify the request object. So the only way to pass the data to the client is to add it to the headers of a new request.
  const requestHeaders = new Headers(req.headers)
  requestHeaders.set('xname', "foo")

  // And the middleware expects a response object as a return so we need to involve that as well.
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders
    }
  })

  return response
}

В API вы можете получить доступ к заголовку

      // pages/api/hello.js
export default async function handler(req, res) {
    const nameHeader = req.headers.xname
    console.log('Hello '. nameHeader) // Hello foo
}

Вы также можете установить заголовок в объект JSON, если хотите передать больше данных таким образом, но я бы рекомендовал немного ограничить размер заголовка и избежать ошибки 431 «Поля заголовка запроса слишком велики».