amplify-js: Manage 404 page in Next app deployment

If anyone is asking, I found a solution that works for me. Basically you need to remove the rule for redirecting to 404 completely in Rewrites and redirects. Next.js will handle the ‘not found’ itself.

You can add a custom redirect for folders and paths that can’t be found and map it to your /404.html page.

In your AWS Amplify console - click on the app and then click Rewrites and redirects. Add the /<*> source address to map to /404.html target address (your next.js custom page), with the type of 404 (Rewrite).

The rewrites and redirects for my site look like:

As you mentioned, it’s not really next.js specific it’s just a static site, but it should maybe be added in the docs, since you would have to add this redirect in 100% of the cases when deploying a Next.js static site.

Ok, I found by myself a solution, but it looks like NextJs have some bug… on Amplify Rewrites, I just left the first Rewrite as @fanismahmalat said.

Just if anyone have the same issue:

NextJs app features

• Custom 404 page pages/404.js but not an _error custom page pages/_error (it wasn’t logical to create it because all the possible errors in Amplify SSR service would be 404; 500 errors aren’t possible).
• Some root pages and dynamic subpages created with fallback: false attribute.

With that conditions, subpages 404 work well, but root 404 shows the default 404 error page

Solution

• add /pages/_error.js and keeping /pages/404.js

With that, 404 subpages (fallback:false) use custom /pages/404.js component, beside 404 root pages use custom /pages/_error.js component.

Hi @ACPK did you find the solution? I’m having the same issue if I remove the 404 redirect. It would be great if I get any help. Thank you

@fanismahmalat If I remove the 404 redirect tool, I get the AWS error below:

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>d34df34</RequestId>
<HostId>
wQJadfadfkadfjkkjhadfjkadfNixAvhfvXR6i0=
</HostId>
</Error>

Thanks @bobbyhadz problem solved! I added exactly the same redirect rule as you and it works.

I misunderstood those redirect rules and thought I would have to explicitly add a rule for each URL. But it actually works with dynamic routing as you told me.

@MrHertal Yes, it is hosted on Amplify, which uses S3 and Cloudfront under the hood, pushes to my blog-repo initialize the build and deploy to Amplify.

Hello @MrHertal ,

On my site bobbyhadz.com I use Next.js to export to static html files. My fallback property in the return value of the getStaticPaths function in Next.js is set to false.

I do have a dynamic route - /blog/[slug].js - an-existing-blog-path which does 404 when I go to non-existing-blog-path because all the static files are generated at build time since fallback is set to false.

As far as I’m aware Amplify hosting only supports fully static Next.js apps at the moment, and any of the features that require a server are not supported - like fallback set to true.