fix: resolve 413 Request Entity Too Large in next-image template#722
Open
285729101 wants to merge 2 commits intoMerit-Systems:masterfrom
Open
fix: resolve 413 Request Entity Too Large in next-image template#722285729101 wants to merge 2 commits intoMerit-Systems:masterfrom
285729101 wants to merge 2 commits intoMerit-Systems:masterfrom
Conversation
- Add client-side image compression (resize to 1024px max, JPEG with iterative quality reduction) before sending base64 data URLs to API - Increase Next.js body size limit to 4.5mb via serverActions config - Remove broken Pages Router bodyParser config from App Router routes and replace with proper route segment config (maxDuration)
Contributor
|
@285729101 is attempting to deploy a commit to the Merit Systems Team on Vercel. A member of the Team first needs to authorize it. |
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
Author
|
@rsproule this one fixes a real bug — the Pages Router |
The serverActions.bodySizeLimit config only applies to Server Actions, not Route Handlers. Since this template uses Route Handlers (route.ts), the config had no effect. The client-side image compression already handles body size reduction to prevent 413 errors.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #561
The next-image template was hitting HTTP 413 because base64 data URLs easily blow past the default 1MB body parser limit. The
export const configblocks in the route files were using Pages Router syntax which is silently ignored in App Router.This PR takes a two-pronged approach:
Server side:
serverActions.bodySizeLimitto 4.5mb (Vercel max) innext.config.tsconfigexports from both route handlers and replace withmaxDurationroute segment configClient side:
compressImageDataUrl()inimage-utils.tsthat resizes images to 1024px max dimension and converts to JPEG with iterative quality reduction (starts at 0.85, drops until under 3MB)image-generator.tsxso all attachment images get compressed before being sent as base64 to the APIThis keeps things self-hostable (no blob store dependency) while staying well within Vercel's limits. The compression is pretty lightweight -- just canvas resize + JPEG encoding, no external libs needed.