3

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.

Abdullah Mujahid
  • 888
  • 1
  • 12
  • 34

4 Answers4

3

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.

Abdullah Mujahid
  • 888
  • 1
  • 12
  • 34
3

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

  1. Use Next.js to v11.1.3 and

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

    
  //next.config.js

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

  module.exports = nextConfig
sohammondal
  • 635
  • 6
  • 12
1

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

happyhappy
  • 35
  • 9
1

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)

John Hughes
  • 11
  • 1