Unable to set request headers in middleware.js while returning i18nRouter

[zohaib-saeed]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
  Available memory (MB): 16182
  Available CPU cores: 8
Binaries:
  Node: 18.17.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.6 // There is a newer version (14.2.10) available, upgrade recommended!
  eslint-config-next: 14.2.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A
 ⚠ There is a newer version (14.2.10) available, upgrade recommended!

   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.        
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which example does this report relate to?

examples/app-dir-i18n-routing/middleware.ts

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Using Ngnix for deployment

Describe the Bug

I want to implement Content Securty Policy with nonces but since I have internationalization applied, I am returning i18nRouter that takes the default request object and i18Config. I want to add CSP and x-nonce among the headers but I am unable to do so. Here is my current middlware.js file:
`import { i18nRouter } from "next-i18n-router";
import i18nConfig from "./i18n.config";
import { NextResponse } from "next/server";

export function middleware(request) {
const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
const cspHeader = default-src 'self'; script-src 'self' 'nonce-${nonce}' 'strict-dynamic'; style-src 'self' 'unsafe-inline'; img-src 'self' blob: data:; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-src 'self' https://www.google.com https://www.gstatic.com; frame-ancestors 'none'; upgrade-insecure-requests;;

// Replace newline characters and spaces
const contentSecurityPolicyHeaderValue = cspHeader
.replace(/\s{2,}/g, " ")
.trim();

// const requestHeaders = new Headers(request.headers)
// requestHeaders.set('x-nonce', nonce)

// requestHeaders.set(
'Content-Security-Policy',
contentSecurityPolicyHeaderValue
)

// const response = NextResponse.next({
request: {
headers: requestHeaders,
},
})
// response.headers.set(
'Content-Security-Policy',
contentSecurityPolicyHeaderValue
)

request.headers.set("x-nonce", nonce);
request.headers.set(
"Content-Security-Policy",
contentSecurityPolicyHeaderValue
);

return i18nRouter(request, i18nConfig);
}

export const config = {
matcher: ["/((?!api|_next/static|_next/image|images|icons|favicon.ico).*)"],
};
`

"request" is readable only and if I update headers in i18Response variable, then routing does not works. I tried numerous way but its an issue here.

Expected Behavior

Need to be able to update the headers while using 18nRouter.

To Reproduce

Just need to update the request headers somehow in middleware.js file while using i18nRouter.