Skip to content

fix: prevent Request Entity Too Large (413) errors in next-image template#770

Open
tarai-dl wants to merge 1 commit intoMerit-Systems:masterfrom
tarai-dl:rn/fix-image-entity-too-large
Open

fix: prevent Request Entity Too Large (413) errors in next-image template#770
tarai-dl wants to merge 1 commit intoMerit-Systems:masterfrom
tarai-dl:rn/fix-image-entity-too-large

Conversation

@tarai-dl
Copy link
Copy Markdown

Summary

Fixes the HTTP 413: Request Entity Too Large error that occurs when editing images in the next-image template by implementing client-side image resizing and removing invalid configuration.

Closes #561

Changes

Client-side image resizing (src/lib/image-utils.ts)

  • Added resizeImageFile() function that resizes images to max 1024px dimension before uploading
  • Converts to JPEG at 90% quality for significantly smaller payload sizes
  • Preserves aspect ratio during resize

Updated image edit flow (src/components/image-generator.tsx)

  • Edit requests now use resizeImageFile() instead of fileToDataUrl() to reduce payload size
  • A 4096x4096 PNG (~10MB base64) becomes ~500KB JPEG after resize

Removed invalid App Router config

  • Removed export const config = { api: { bodyParser: { sizeLimit: '4mb' } } } from both route files — this is Pages Router syntax and has no effect in App Router
  • Added export const maxDuration = 60 for longer image generation timeout on Vercel

Testing

The fix addresses two failure modes:

  1. Request size: Client-side resize reduces base64 payload before sending
  2. Timeout: maxDuration allows more time for image generation API calls

…late

- Add client-side image resizing (max 1024px) before edit API calls
  to reduce base64 payload size and prevent 413 errors
- Remove invalid Pages Router `config.api.bodyParser` from App Router routes
- Add `maxDuration = 60` for longer image generation timeout
- Use JPEG at 90% quality for resized images (smaller than PNG)

Fixes Merit-Systems#561
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 19, 2026

@tarai-dl is attempting to deploy a commit to the Merit Systems Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

next-image template: Request Entity Too Large

1 participant