503 issues when deploying with NextJS@^11.1.2

[chris-lee-code]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React, Next.js

Amplify APIs

Authentication, GraphQL API, DataStore

Amplify Categories

hosting

Environment information

``` # Put output below this line System: OS: macOS 11.6 CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz Memory: 311.82 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.2.0 - /usr/local/bin/node Yarn: 1.22.15 - ~/Documents/workxp-platform/node_modules/.bin/yarn npm: 7.15.0 - ~/node_modules/.bin/npm Browsers: Chrome: 94.0.4606.81 Safari: 15.0 npmPackages: @ampproject/toolbox-optimizer: undefined () @atlaskit/spinner: ^15.1.2 => 15.1.2 @atlaskit/spinner/constants: undefined () @atlaskit/spinner/spinner: undefined () @atlaskit/spinner/types: undefined () @babel/core: undefined () @fortawesome/fontawesome-svg-core: ^1.2.36 => 1.2.36 @fortawesome/free-brands-svg-icons: ^5.15.4 => 5.15.4 @fortawesome/free-solid-svg-icons: ^5.15.4 => 5.15.4 @fortawesome/react-fontawesome: ^0.1.15 => 0.1.15 @fullcalendar/common: ^5.9.0 => 5.9.0 @fullcalendar/core: 5.9.0 => 5.9.0 @fullcalendar/daygrid: ^5.9.0 => 5.9.0 @fullcalendar/interaction: 5.9.0 => 5.9.0 @fullcalendar/react: ^5.9.0 => 5.9.0 @next/bundle-analyzer: ^11.1.2 => 11.1.2 @vercel/nft: undefined () amazon-cognito-identity-js: ^5.2.0 => 5.2.0 amphtml-validator: undefined () arg: undefined () async-retry: undefined () async-sema: undefined () aws-amplify: ^4.3.2 => 4.3.2 bfj: undefined () cacache: undefined () chart.js: 3.5.1 => 3.5.1 chart.js-auto: undefined () chart.js-helpers: undefined () check-password-strength: ^2.0.3 => 2.0.3 ci-info: undefined () classnames: 2.3.1 => 2.3.1 (2.2.6) cli-select: undefined () comment-json: undefined () compression: undefined () compression-webpack-plugin: ^9.0.0 => 9.0.0 conf: undefined () content-type: undefined () cookie: undefined () cross-env: ^7.0.3 => 7.0.3 cross-spawn: undefined () crypto-browserify: ^3.12.0 => 3.12.0 css-loader: undefined () debug: undefined () devalue: undefined () dropzone: 5.9.3 => 5.9.3 email-validator: ^2.0.4 => 2.0.4 escape-string-regexp: undefined () file-loader: undefined () find-cache-dir: undefined () find-up: undefined () fresh: undefined () fullcalendar: ^5.9.0 => 5.9.0 glob: undefined () gzip-size: undefined () http-proxy: undefined () ignore-loader: undefined () is-animated: undefined () is-docker: undefined () is-wsl: undefined () json-parse-better-errors: ^1.0.2 => 1.0.2 json5: undefined () jsonwebtoken: undefined () loader-utils: undefined () lodash.curry: undefined () log-symbols: ^5.0.0 => 5.0.0 lru-cache: undefined () mini-css-extract-plugin: undefined () moment: 2.29.1 => 2.29.1 nanoid: undefined () neo-async: undefined () next: ^11.1.2 => 11.1.2 next-compose-plugins: 2.2.1 => 2.2.1 next-fonts: 1.5.1 => 1.5.1 next-transpile-modules: ^8.0.0 => 8.0.0 nouislider: 15.5.0 => 15.5.0 ora: undefined () password-validator: ^5.1.1 => 5.1.1 path: 0.12.7 => 0.12.7 postcss: ^8.3.9 => 8.3.9 (8.2.15) postcss-flexbugs-fixes: undefined () postcss-loader: undefined () postcss-preset-env: undefined () postcss-scss: undefined () pretty-checkbox: ^3.0.3 => 3.0.3 prop-types: 15.7.2 => 15.7.2 rc-checkbox: ^2.3.2 => 2.3.2 react: ^17.0.2 => 17.0.2 react-anchor-link-smooth-scroll: ^1.0.12 => 1.0.12 react-bootstrap-sweetalert: 5.2.0 => 5.2.0 react-checkmark: ^1.4.0 => 1.4.0 react-copy-to-clipboard: 5.0.4 => 5.0.4 react-datetime: 3.1.1 => 3.1.1 react-dom: ^16.8.0 => 16.14.0 react-jvectormap: 0.0.16 => 0.0.16 react-light-accordion: ^0.1.4 => 0.1.4 react-loading-skeleton: ^2.2.0 => 2.2.0 react-notification-alert: 0.0.13 => 0.0.13 react-perfect-scrollbar: 1.5.8 => 1.5.8 react-quill: 1.3.5 => 1.3.5 react-tagsinput: 3.19.0 => 3.19.0 react-toastify: ^8.0.3 => 8.0.3 reactstrap: 8.10.0 => 8.10.0 recast: undefined () resolve-url-loader: undefined () sass: ^1.42.1 => 1.42.1 sass-loader: undefined () schema-utils: undefined () semver: undefined () send: undefined () slugify: ^1.6.1 => 1.6.1 source-map: undefined () source-map-explorer: ^2.5.2 => 2.5.2 stream: ^0.0.2 => 0.0.2 string-hash: undefined () strip-ansi: undefined () terser: undefined () text-table: undefined () unistore: undefined () validator: ^13.6.0 => 13.6.0 web-vitals: undefined () webpack: ^5.58.1 => 5.58.1 () webpack-bundle-analyzer: ^4.4.2 => 4.4.2 (4.3.0) webpack-sources: undefined () yarn: ^1.22.15 => 1.22.15 zen-observable: undefined () npmGlobalPackages: @aws-amplify/cli: 6.3.1 @nestjs/cli: 7.5.6 babel-cli: 6.26.0 codesandbox: 2.2.1 create-react-app: 3.4.1 cross-env: 7.0.3 expo-cli: 3.17.16 firebase-tools: 9.18.0 next: 10.0.6 nodemon: 2.0.4 npm-check-updates: 11.8.3 npm: 8.0.0 npx: 10.2.2 prisma: 1.34.10 prisma1: 1.34.11 react-dom: 17.0.1 react: 17.0.1 source-map-explorer: 2.5.2 yarn: 1.22.10 ```

Describe the bug

Having an issue with deploying and hosting the website I made with Next.JS with the version of ^11.1.2. I do see four green checks with provisioning, build, etc. So I don't think it's the problem with the AWS Amplify Console deployment.

I have seen previous bug reports saying that several recent versions of Next.JS are not supported by AWS Amplify yet. Could you provide me the version of the most recent one that does work on Amplify?

Expected behavior

Should work...

Reproduction steps

https://beta.dekc4p24zvjqs.amplifyapp.com/

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[github-actions[bot]]

Hi :wave:, thanks for opening! While we look into this...

If this issue is related to custom domains, be sure to check the custom domains troubleshooting guide to see if that helps. Also, there is a more general troubleshooting FAQ that may be helpful for other questions.

Lastly, please make sure you've specified the App ID and Region in the issue!

[chris-lee-code]

@chrisbonifacio Hi! The problem is not related to the custom domains. I'm just using the amplifyapp.com domain as given by default.

region: us-east-2 App ID: dekc4p24zvjqs

https://beta.dekc4p24zvjqs.amplifyapp.com/

[ghost]

Hi @chris-lee-code 👋🏽 , can you provide reproduction steps so we can reproduce this behavior and try to diagnose the cause?

[chris-lee-code]

hello @hloriana! Sure, I can. But I would like to know what are some pieces of information you would need for the reproduction.

Also, do you guys have a history of version support of AWS Amplify to NextJS? Mainly, the issue was caused by the too recent version that Amplify yet doesn't support according to other bug reports.

[ghost]

@chris-lee-code we support 11.1.2, so your deployment should be working 🤔 . I just need to know what steps you took to deploy your application. Did you follow these instructions: https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html

[ferdingler]

Hi @chris-lee-code, The 503 error in your screenshot is likely due to missing IAM permissions on the Lambda@Edge functions.

We create those functions along with their IAM roles on the first deployment, but if you added new permissions on your Amplify App IAM role after the first deployment, unfortunately we don't propagate those to the Lambda functions on subsequent deployments. The workaround is to find those IAM roles associated to the L@E functions in your account, and add the permissions manually.

Here is a list of all the permissions that your app may need: https://github.com/aws-amplify/amplify-console/blob/master/FAQ.md#error-accessdenied-access-denied . If you are using ISR for example, then you need the sqs: permissions.

[chris-lee-code]

@ferdingler Thanks for the advice! I haven't got any chances to try out the suggestions yet.

By the way, I also realized there's a size limit for the Amplify app deployment (I believe 50MB?).

Is there any effective and accurate way for me to test the file size of the entire website? Thanks!

[osnodegeoffrey]

Hi @chris-lee-code Are you using webpack 5 (the default in Next 11)? If so, you need to downgrade. See https://github.com/aws-amplify/amplify-console/issues/1872

[interstellard]

Is this issue resolved yet?

I have exactly the same issue (with ISR), and also confirmed that the IAM role permissions include all mentioned in https://github.com/aws-amplify/amplify-console/blob/master/FAQ.md#error-accessdenied-access-denied.

However, I still see the 503 errors.

The tricky part is that there won't be any 503 error right after a fresh deployment. The 503 errors will only show up after a certain period, like roughly 12 - 24 hours.

Any one see the same kind "delayed“ 503 errors?

[jnastaskin]

Also seeing this issue, have the 503 errrors right off the back from a deployed page using get static props/paths.

[jnastaskin]

@interstellard based on the link you provided, do you know what is meant by the 'Amplify App Role' they mentioned for the IAM permissions? What role name does that translate to in the IAM console?

[interstellard]

@jnastaskin I think they were referring to the "IAM roles" (https://console.aws.amazon.com/iam/home?#/roles) for the Lambda functions used in the Amplify App Deployment.

And here are the steps to find out the exact role used in the deployment:

(1) In each build (connected branch) of the Amplify app, there's a 'Deploy' tab showing the Lambda functions (along with each function ID) used for the deployment, such as "SSR Lambda@Edge", "ISR Lambda", etc.

(2) In the Lambda Functions page (e.g. https://console.aws.amazon.com/lambda/home?region=us-east-1#/functions), you can find the corresponding Lambda functions using the function IDs, and then find the "Role name" in the function's "Configuration" tab.

(3) Click the "Role name" ID and it will link you to the role details page, and you can modify the policy manually (using the {} JSON view).

[jnastaskin]

@interstellard amazing, thank you!

[Hadjimina]

Hi sorry to open this up again. I'm still having this issue. I followed @interstellard 's guide but it still seem broken. Is there any updates on this? Cheers

[stokaace]

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/ (Including 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)

[victorccccc]

Hi @Hadjimina , Currently, Amplify doesn't support Next 12. If you are seeing 503 error in Next 12, please try to downgrade to Next 11.

If you are already in Next 11 or lower version, please follow this instruction to attach logs here https://github.com/aws-amplify/amplify-hosting/blob/main/FAQ.md#access-lambda-edge-logs . Thanks

[ferdingler]

Hi, we have deployed a fix for NextJS API routes throwing a 503 error. To get the fix, simply rerun a build/deploy on your app again.

[raffibag]

Hi @Hadjimina , Currently, Amplify doesn't support Next 12. If you are seeing 503 error in Next 12, please try to downgrade to Next 11.

If you are already in Next 11 or lower version, please follow this instruction to attach logs here https://github.com/aws-amplify/amplify-hosting/blob/main/FAQ.md#access-lambda-edge-logs . Thanks

I downgraded to Next 11 and continue to get the error. Like @interstellard, the error doesn't present immediately - rather only after navigating around the site (for me, it typically takes ~20 clicks on various pages). Seems to be an issue with getStaticPaths and/or getStaticProps... I was not getting the error when using getServerSiderProps.

Note I had to upgrade to Next 11+ since 10 was throwing a bundle size error (too large) when using getStaticProps, despite exclusively using incremental static regeneration. I suspect it has something to do with ISR since it's only erroring-out on those pages.

Update: Seems as though adding the SQS permissions (used full access to be certain I applied the correct permissions) to the deployment lambda permissions did the trick.

[DenardYap]

just wanna provide some input, I have been having the same issues and tried numerous methods for the last 2 days and finally solved it.

The problem is that I have revalidate in my return of getStaticProps, commented it out makes the error goes away and I this is one link I found to be useful https://stackoverflow.com/questions/71432161/aws-amplify-503-error-when-using-next-js-getstaticprops-revalidate

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.