NextJS API Lambda Execution Error AWS Amplify

Question

I have a NextJS app that runs on AWS amplify. I built a basic REST API by adding a pages/api directory to my project. The endpoint returns a 200 and some test JSON data. This works fine when I run the project locally. I deployed to AWS Amplify and the build detects that a Next API is present so it provisions a Lambda and configures the CloudFront behavior for /api/* routes to point to the Lambda function. When hitting the API CloudFront returns a 503 error:

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.
Generated by cloudfront (CloudFront)
Request ID: YnQI9alkoBXwkmkkpXwa29zqXaOT06VCXiBZWJI6xQVkhQ8MElB2bQ==

It doesn't appear that CloudFront is even calling the Lambda, as I am unable to see any logs in Cloudwatch. I've tried to debug and built a test that passes a mock CloudFront event request to the Lambda but I am unable to get my API to execute successfully.

It seems that Amplify/Next provides a lot of boilerplate code for supporting Next API routes so I'm not sure where to focus my debugging efforts.

Has anyone run into this issue before? Any guidance or suggestions would be super helpful!

Answer 1

I did have a similary problem, but i'm using serverless with @sls-next/serverless-component component. Because in moment hasn't support for NextJs 12 version.

In my package.json i'm force NextJs version for more recently in 11, this case is 11.1.4.

// package.json
 {
  "name": "next-aws",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^11.1.4",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "^14.14.37",
    "@types/react": "^17.0.3",
    "typescript": "^4.2.3"
  }
}