Repository: next.js
Issue: Unable to set request headers in middleware.js while returning i18nRouter
Labels: examples

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
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.