Modifying headers in middleware from server-side request

[darking98]

Hey there, im struggling to try to change the headers of a request in the middleware file, i've tried everything but still cant log the new headers in my api route, any ideas of whats happening?

Things to keep in mind:

My page.tsx component its a server-component
I'm using Next.js 14.1.0 and app route folder structure

app/prueba/page.tsx

import React from 'react'
const Prueba = async () => {
  const requestMe = await fetch(`http://localhost:3000/api/refresh-token/`)
  const responseMe = await requestMe.json()
  console.log(responseMe, 'en prueba')
  return <div>Prueba</div>
}
export default Prueba

api/refresh-token/route.ts

import { type NextRequest } from 'next/server'

export async function GET(req: NextRequest, res: Response) {
  console.log(req.headers, 'REQUEST')
  const response = Response.json({ message: 'something123' }, { status: 200 })
  return response
}

middleware.ts

import { NextResponse, type NextRequest } from 'next/server'
export async function middleware(request: NextRequest) {
  const requestHeaders = new Headers(request.headers)
  requestHeaders.set('xname', 'foo')
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders
    }
  })
  response.headers.set('xname', 'foo')
  return response
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * Feel free to modify this pattern to include more paths.
     */
    '/dashboard/:path*',
    '/onboarding:path*',
    '/login',
    '/prueba'
  ]
}

console.log of request.headers in api/refresh-token/route.ts

HeadersList {
  cookies: null,
  [Symbol(headers map)]: Map(11) {
    'accept' => { name: 'accept', value: '*/*' },
    'accept-encoding' => { name: 'accept-encoding', value: 'gzip, deflate' },
    'accept-language' => { name: 'accept-language', value: '*' },
    'connection' => { name: 'connection', value: 'keep-alive' },
    'host' => { name: 'host', value: 'localhost:3000' },
    'sec-fetch-mode' => { name: 'sec-fetch-mode', value: 'cors' },
    'user-agent' => { name: 'user-agent', value: 'node' },
    'x-forwarded-for' => { name: 'x-forwarded-for', value: '::1' },
    'x-forwarded-host' => { name: 'x-forwarded-host', value: 'localhost:3000' },
    'x-forwarded-port' => { name: 'x-forwarded-port', value: '3000' },
    'x-forwarded-proto' => { name: 'x-forwarded-proto', value: 'http' }
  },
  [Symbol(headers map sorted)]: [
    [ 'accept', '*/*' ],
    [ 'accept-encoding', 'gzip, deflate' ],
    [ 'accept-language', '*' ],
    [ 'connection', 'keep-alive' ],
    [ 'host', 'localhost:3000' ],
    [ 'sec-fetch-mode', 'cors' ],
    [ 'user-agent', 'node' ],
    [ 'x-forwarded-for', '::1' ],
    [ 'x-forwarded-host', 'localhost:3000' ],
    [ 'x-forwarded-port', '3000' ],
    [ 'x-forwarded-proto', 'http' ]
  ]
} REQUEST

Thanks anyways

[darking98]

any suggestion?