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.

1回答
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)

回答済み 2年前

ログインしていません。 ログイン 回答を投稿する。

優れた回答とは、質問に明確に答え、建設的なフィードバックを提供し、質問者の専門分野におけるスキルの向上を促すものです。

質問に答えるためのガイドライン

関連するコンテンツ