503 ERROR The request could not be satisfied (AWS Amplify)

Question

I have deployed a Next.js server side rendering app on AWS Amplify. I am new to AWS and don't know exactly why I am encountering this error. I have read so many articles and documentations but I am unable to solve this issue.

I am using getServerSideProps to get params and props from API etc. On Vercel and Netlify, my app is running fine but I am getting errors on Amplify AWS.

My app is loading static pages, but giving me an error on dynamic pages. E.g. www.example.com/test-1

Here test-1 is a dynamic route "/:id"

The error I get:

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 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.

I know this error is specifically towards permissions, but I don't know how to configure them.

user_14224895 · Answer

The problem was with my Lambda functions they were defined for my application and some of them were unrecognized fixing them and giving permissions to the user is the only solution.

user_6335249 · Answer

Firstly, do check the version of Next.js you're using as AWS Amplify officially supports version 11. Also, Next.js 11 by default uses webpack5 which is again not supported by Amplify. So, you can do a few things to fix this (like I did) -

Use Next.js to v11.1.3 and

In the next.config.js set webpack5 to false -


  //next.config.js

  const nextConfig = {
    ...
    ...
    webpack5: false,
    ...
    ...
  }

  module.exports = nextConfig

user_16765312 · Answer

Most likely you may have a permission issue or something with your lambda functions. Also, as someone has mentioned, try doing amplify init.

user_18444858 · Answer

There are several issues still with getting Next and Amplify to work nicely. The best two pages I found are here

https://github.com/aws-amplify/amplify-hosting/blob/main/FAQ.md#error-accessdenied-access-denied

And here

https://aws.amazon.com/blogs/mobile/host-a-next-js-ssr-app-with-real-time-data-on-aws-amplify/ (specifically the comments below the blog post)

In my case I made several key changes:

1-Install or downgrade to Next 10.0.0.8 (npm install next@10.0.8)

2-Be sure all of your Environment variables are added to Amplify’s console

3-Add this Env variable too: AMPLIFY_NEXTJS_EXPERIMENTAL_TRACE=true

4-Modify your next.config.js for the Environment Variables Workaround mentioned in the 1st article above.

Also, it doesn’t hurt to test an api/ file with bare min code to ensure there aren’t errors in your code. LambdaEdge doesn’t seem to have great logging. (At least not that I found)

user_17104731 · Answer

I fixed the issue. The issue is you need to downgrade your next version to 11.3.3 and make sure the AWS Amplify is not getting the latest Next js version. You can set the Next Version in AWS Amplify -> Build settings -> Edit

https://github.com/vercel/next.js/discussions/40597

503 ERROR The request could not be satisfied (AWS Amplify)

5 Answers