Repository: next.js
Issue: Refused to apply inline style because it violates the Content Security Policy directive
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 Enterprise
  Available memory (MB): 32562
  Available CPU cores: 8
Binaries:
  Node: 20.16.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.1.1-canary.21 // Latest available version is detected (15.1.1-canary.21).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: N/A
Next.js Config:
  output: N/A
```


### Which example does this report relate to?

with-strict-csp

### What browser are you using? (if relevant)

Chrome Version 131.0.6778.205 (Official Build) (64-bit), Microsoft Edge Version 131.0.2903.112 (Official build) (64-bit)

### How are you deploying your application? (if relevant)

next start, Vercel

### Describe the Bug

It appears that some of Next.js built-in pages (e.g. not-found page) are unable to render its CSS styling because of the Content Security Policy (CSP) value `style-src 'self' 'nonce-${nonce}';`,

Console Error Message:

`Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-ZmU5NjMwMzgtOWE0Yi00MGMyLTliNTgtZjc4NzNjNDVjODky'". Either the 'unsafe-inline' keyword, a hash ('sha256-B3Jk7Rws8l6DgOhoy0oMP4k8gk16joGygBpDXz05ZXo='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.`

Console Error Screenshot:

![screenshot-of-error](https://github.com/user-attachments/assets/47867b95-2f7e-44e9-a1d5-0f056ae13f98)


Browser view Screenshot:

![browser-view-screenshot](https://github.com/user-attachments/assets/b3b5e552-acf8-47f8-bebd-e70ba95981d0)


### Expected Behavior

Since the not-found page is part of the Next.js framework, it should be able to render its CSS without any issue

The page should look like this:

![expected-behaviour-screenshot](https://github.com/user-attachments/assets/a1b22694-a632-45c8-86e5-dff78f5ff581)


### To Reproduce

**Development mode**

1. `npx create-next-app --example with-strict-csp with-strict-csp-app`
2. `npm run dev`
3. Visit `http://localhost:3000/adasd` or any other route
4. Open the browser DevTools with `Ctrl + Shift + I`
5. Click the `Console` tab to see the console error message
7. You will see the 404 page is shown without CSS styling applied. The Console will also show the error message


**Production mode**
1. `npx create-next-app --example with-strict-csp with-strict-csp-app`
2. `npm run build`
3. `npm run start`
4. Visit `http://localhost:3000/adasd` or any other route
5.  Open the browser DevTools with `Ctrl + Shift + I`
6. Click the `Console` tab to see the console error message
7. You will see the 404 page is shown without CSS styling applied. The Console will also show the error message