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