CloudFront Gives 502 Error Only for Home Page of Next.js App

0

When I try to access the homepage of my next.js Lambda app, CloudFront gives the following error:

502 ERROR
The request could not be satisfied.

The Lambda function returned invalid JSON: The JSON output is not parsable. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.

If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.

Generated by cloudfront (CloudFront)
Request ID: PHzLOmESAei4TkLHQWYQn1RjpU526tQy6VoMEgrb1bk2C7bnsx4ggQ==

But if I access any other page, the site works fine. Pages like my site's /search feature or any /video/{is} page work fine. I checked CloudWatch, the logs for the Lambda function look good. They have the typical START RequestId: b1458ffd-f1ee-4390-9735-666a3302096d Version: $LATEST beginning statement, custom logging, then the END RequestId: b1458ffd-f1ee-4390-9735-666a3302096d statement.

Where should I look to find this supposedly unparsable JSON? Everything works fine locally, and it's only the homepage which fails. Thanks!

  • I made this question but when I tried to sign in a day later, re:Post made me make another account and now I can't access the previous account which made this question.

asked 2 years ago1610 views
1 Answer
0

The problem was due to the 1 MB size limit of CloudFront Lambda@Edge responses. I didn't realize that Next.js's serverside rendering was creating a large <script id="__NEXT_DATA__"> tag on my homepage with all the fetched info from my API duplicated multiple times over. This resulted in my app's homepage being >2 MB.

I refactored my app to only send one network request, and made sure that data is only put into the NEXT_DATA tag once. The app now works.

(I still don't know how to sign in to the original account I used to ask the question)

answered 2 years ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions