Next.js Rewrites object with `fallback`, `beforeFiles`, and `afterFiles` options causes 503 ERROR

[savvaleukhin]

Before opening, please confirm:

• [X] I have checked to see if my question is addressed in the FAQ.
• [X] I have searched for duplicate or closed issues.
• [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.

App Id

d3kyx257i4bn04

Region

us-east-1

Amplify Hosting feature

Not applicable

Describe the bug

There is 503 ERROR while attempting to access pages on the Next.js application with Next.js Rewrites rules and the fallback option.

Next.js Rewrites/Redirects feature is good to have for incremental adoption Nextjs application.

Details: I'm getting the error when options beforeFiles, afterFiles or fallback are used:

module.exports = {
  async rewrites() {
    return {
      beforeFiles: [],
      afterFiles: [],
      fallback: [],
    };
  },
};

There is no issue with the simple syntax:

module.exports = {
  async rewrites() {
    return [];
  },
};

Error in browser

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

Error in Lambda function

ERROR	Invoke Error 	
{
    "errorType": "TypeError",
    "errorMessage": "rewrites is not iterable",
    "stack": [
        "TypeError: rewrites is not iterable",
        "    at getRewritePath (/var/task/default-handler-0a0dc009.js:1366:27)",
        "    at handlePageReq (/var/task/default-handler-0a0dc009.js:1300:35)",
        "    at routeDefault (/var/task/default-handler-0a0dc009.js:1808:16)",
        "    at async handleDefault (/var/task/default-handler-0a0dc009.js:1884:19)",
        "    at async handleOriginRequest (/var/task/default-handler-0a0dc009.js:103067:19)",
        "    at async Runtime.handler (/var/task/default-handler-0a0dc009.js:102994:20)"
    ]
}

Expected behavior

All features/syntaxes of Next.js Rewrites rules are working properly.

If the syntax with beforeFiles, afterFiles, fallback is not supported just for now, please add this information to unsupported features and mark this issue as a feature request.

Reproduction steps

1. Create a Next.js Application with only one / page for simplicity
2. Add Rewrites to next.config.js

module.exports = {
  async rewrites() {
    return {
      fallback: [
        {
          source: '/:path*',
          destination: `https://nextjs.org/:path*`,
        },
      ],
    };
  },
};

3. Deploy the app with Amplify
4. Try to navigate to the /blog page.

Build Settings

No response

Additional information

No response

[ghost]

Hi @sleukhin 👋🏽 I was able to reproduce this behavior. Currently investigating if we support this and if theres a workaround.

[lwang-79]

Hi team,

Do you have any update on this issue? I got the same error when configuring with fallback. Is there a work around for the rewrite fallback feature with Amplify hosting?

[maheshauti96]

We have a Nextjs app where we fallback some URLs to php server. php asset do not load if we just add a rewrite for a single URL. to achieve this we need Amplify to support Nextjs Fallback. please add its support or share workaround asap

[nathanoertel]

Similar situation as @maheshauti96 , would love to know if anyone has found a workaround for this or if this is not supported.

[aslaker]

Biiiiig ++ on this. We need fallback support as we are incrementally adopting NextJS. This will likely cause us to drop Amplify all together and go with another solution.

[msalmanshahid]

Any update on this please?

[mr-rpl]

+1

[aslaker]

@hloriana any chance this will be supported soon? Or if it is easy to get myself onboarded, I would love to try and help out with a PR if possible.

[calavera]

@aslaker yes. See this comment with more information about Next.js 12 and above features and how you can get access to test them: https://github.com/aws-amplify/amplify-hosting/issues/2343#issuecomment-1233355210

[calavera]

Hi everyone,

I am pleased to share we have now launched support for Next.js 12 and 13. This new release fixes the problem described in this issue. For more information, please see our blog post at https://aws.amazon.com/blogs/mobile/amplify-next-js-13

If you run into issues with Next.js 12 or 13, please open a new issue so we can track it specifically. Thank you everyone for your patience and support. It's much appreciated.

[github-actions[bot]]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see. If you need more assistance, please either tag a team member or open a new issue that references this one. If you wish to keep having a conversation with other community members under this issue feel free to do so.

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