Next.js Security Best Practices

Data Validation and Input Handling

• Always validate user inputs with schemas

  • ❌ Directly using req.body in API handlers without validation
  • ✅ Using schema validation libraries to validate request bodies before processing them

• Sanitize rendered content

  • ❌ Using dangerouslySetInnerHTML with unsanitized content
  • ✅ Using a sanitization library to clean HTML or avoiding direct HTML insertion

• Be careful with dynamic imports

  • ❌ Using unvalidated user input for dynamic imports or file paths
  • ✅ Strictly validating and limiting what can be dynamically imported

API Routes and Server Security

• Separate API route handlers from page components

  • ❌ Using fetch with sensitive operations directly in client components
  • ✅ Creating separate API route handlers and calling them from client components

• Secure API routes with proper authentication

  • ❌ Creating API routes that don't verify auth status before performing operations
  • ✅ Checking auth status at the beginning of API handlers and returning 401/403 when needed

• Implement proper CSRF protection

  • ❌ Creating custom API endpoints without CSRF tokens for state-changing operations
  • ✅ Using form actions with built-in CSRF protection or adding CSRF tokens to custom APIs

• Use proper error handling in API routes

  • ❌ Returning full error details: return res.status(500).json({ error: err.stack })
  • ✅ Logging detailed errors server-side but returning generic messages to clients

• Implement rate limiting

  • ❌ Allowing unlimited requests to sensitive endpoints
  • ✅ Using rate limiting middleware or implementing custom rate limiting

Environment and Configuration Security

• Use environment variables correctly

  • ❌ Adding API keys with NEXT_PUBLIC_ prefix or hardcoding them in client components
  • ✅ Using process.env.API_KEY in server components or API routes only

• Set appropriate Security Headers

  • ❌ Leaving default security headers without customization
  • ✅ Using the Next.js headers configuration to set appropriate security policies

Data Storage and Transmission

• Avoid client-side secrets in redirects

  • ❌ Redirecting with sensitive data in query params: router.push(/success?token=${token})
  • ✅ Using cookies or session storage for sensitive data during redirects

• Secure cookies configuration

  • ❌ Setting cookies without security attributes
  • ✅ Using appropriate httpOnly, secure, and sameSite attributes for sensitive data

Content and File Security

• Beware of metadata injection

  • ❌ Using unvalidated user input directly in page metadata
  • ✅ Sanitizing or validating any user-provided data used in metadata

• Secure file uploads

  • ❌ Accepting any file upload without validation
  • ✅ Implementing strict validation for file types, sizes, and content

Advanced Protections

• Protect against prototype pollution
  • ❌ Deep merging objects from untrusted sources without sanitization
  • ✅ Using Object.create(null) or dedicated libraries for safe object merging