fix(frontend): make theme-init script CSP-safe without reviving nonces

[precious-akpan]

Summary

#1031 asks for the same fix already applied to the JSON-LD script (#952/#1025): read the CSP nonce via headers() and pass it to the inline theme-init <script> in layout.tsx. I looked into implementing that literally and found it would reintroduce a regression that was deliberately fixed three days after #1031 was filed:

• e3a378c (Aug 26) added the nonce mechanism used for the JSON-LD fix.
• 669bb39 (Aug 29, "repair the red CI pipeline") removed nonces entirely and switched middleware.ts to script-src 'self' 'unsafe-inline', because nonces are incompatible with statically prerendered pages — their HTML has no per-request nonce to carry, and a nonce-source in script-src makes browsers ignore 'unsafe-inline', which blocked all client-side JS on every static route.

At current HEAD, the theme-init script already runs fine — CSP has no nonce at all, just 'unsafe-inline'. So #1031's literal premise (the script is blocked) is no longer true, and adding a nonce back would face the same wall: layout.tsx is the root layout shared by every route, so calling headers() there (a Dynamic API) would force the entire app into dynamic rendering just to mint a per-request nonce — a much bigger regression than the one 669bb39 fixed, and one that would undo #1034's Lighthouse budget work by tanking performance on every currently-static page.

Fix

Move the theme-init script out of line into a static asset (frontend/public/theme-init.js), loaded via next/script's beforeInteractive strategy:

• A same-origin external script is covered by script-src 'self' alone — it needs neither 'unsafe-inline' nor a nonce.
• beforeInteractive is next/script's documented mechanism for a script that must run before hydration/paint — the same timing the inline version relied on to avoid the theme flash.
• This sidesteps @next/next/no-sync-scripts, which a raw <script src> would trip.

Closes #1031

Test plan

• npm run build — same routes still prerender as static (○) as before this change; nothing was forced into dynamic rendering.
• npm run lint — no new warnings/errors (previously: @next/next/no-sync-scripts on a raw <script src> attempt, now clean).
• npm test -- --run — 118/118 tests pass.
• Inspected the built static HTML (.next/server/app/index.html) — confirms Next emits the beforeInteractive bootstrap (self.__next_s.push(["/theme-init.js",...]) + preload) that runs before hydration, on a statically prerendered page.

[drips-wave]

@precious-akpan Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits