next.js

9d3069ad - docs: Improve Content Security Policy documentation (#80580)

docs: Improve Content Security Policy documentation (#80580) # Improve Content Security Policy Documentation This PR comprehensively improves the Next.js Content Security Policy (CSP) documentation to address community feedback from Reddit and GitHub discussions about gaps in the current documentation. ## Changes Made ### 1. Enhanced Nonce Flow Explanation - Added detailed section explaining how Next.js automatically detects and applies nonces during server-side rendering - Clarified the 3-step process: middleware generation → Next.js extraction → automatic application - Explained that developers don't need to manually add nonces to every script tag ### 2. Static vs Dynamic Rendering Documentation - Added comprehensive section explaining performance implications of using nonces - Documented that nonces force all pages into dynamic rendering - Explained trade-offs: slower page loads, increased server load, no CDN caching - Added guidance on when to use nonces vs alternatives ### 3. Experimental SRI (Subresource Integrity) Documentation - Documented the experimental `sri.algorithm` configuration option - Explained hash-based CSP as an alternative to nonces that preserves static generation - Included configuration examples and benefits/limitations - Noted that SRI is webpack-only, App Router only, and experimental ### 4. Development vs Production Considerations - Added section addressing environment-specific CSP requirements - Documented need for `'unsafe-eval'` in development for HMR - Provided conditional CSP examples based on NODE_ENV ### 5. Comprehensive Troubleshooting Section - Added solutions for error pages that don't work with strict CSP - Documented third-party script integration with CSP - Included common CSP violation fixes - Added examples for both App Router and Pages Router ### 6. Practical Examples - Static site with hash-based CSP using SRI - Dynamic site with nonce-based CSP - Mixed approach for different page types - Environment-aware CSP configuration ### 7. Enhanced Pages Router Documentation - Added `_document.tsx` nonce access example - Improved `getServerSideProps` examples - Added third-party script integration examples ## Community Feedback Addressed This PR directly addresses the Reddit thread feedback about: - ❌ "it is not clear that the nonce is then picked up by the rest of the pages" → ✅ Added detailed nonce flow explanation - ❌ "it is not clear that the pages therefore are not statically generated anymore" → ✅ Added static vs dynamic rendering section - ❌ "The solution of being able to provide the sha256 hashes... is not supported, and it is not mentioned in the documentation" → ✅ Added experimental SRI documentation - ❌ Poor documentation of strict CSP implementation → ✅ Added comprehensive examples and troubleshooting ## Technical Details - **File Modified**: `docs/01-app/02-guides/content-security-policy.mdx` - **Lines Added**: 642 insertions - **Maintains**: Existing documentation structure and Next.js conventions - **Supports**: Both App Router and Pages Router with appropriate switcher components ## Testing - Verified all code examples use correct Next.js APIs and patterns - Ensured documentation follows existing Next.js docs structure - Confirmed all referenced configuration options exist in the codebase - Validated that experimental features are properly marked as such --- **Link to Devin run**: https://app.devin.ai/sessions/e7e5fa95dc0146b3ab79aac72c53ed13 **Requested by**: lee@vercel.com --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: lee@vercel.com <lee@vercel.com> Co-authored-by: Joseph Chamochumbi <joseph.chamochumbi@vercel.com>