Next.js 11 on AWS Amplify using @prismicio/next - Preview not working

Developing with Prismic
1

Hi,

We deployed a Next.js 11 app on AWS Amplify using @prismicio/next.

We have followed the steps here:
[Previews with Next.js Guide ]
(Previews with Next.js - Prismic)
[@prismicio/next Previews Tutorial Video]
(Prismic + Next.js - Setting up Previews - YouTube)
[@prismicio/client V6 Migration Guide]
(@prismicio/client v6 Migration Guide - Prismic)

Preview is working fine from Prismic on localhost. When we preview the live URL, we see a Cloudfront error for all pages.

503 ERROR

The request could not be satisfied.

The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website. 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)

Thanks,
Seif

2

I don't think this error is related to the Prismic setup. It seems like it's related to the deployment service: HTTP 503 status code (Service Unavailable) - Amazon CloudFront