Manage 404 page in Next app deployment

Hi,

I am following these instructions to deploy a Next app with the CLI.

Everything works great.

However, I have a question regarding 404 page. I have set up a custom 404 page which is correctly exported by Next in the /out folder. This 404 is showing well in dev mode when I try to access a wrong URL.

After deploying my app with amplify publish, I try to access a wrong URL and I’m getting a 403 AccessDenied. It seems logical since the deployment is only static.

So my question is: is there any way to be redirected to /404 when accessing a wrong URL?

Thanks for your help.

Which Category is your question related to?

Hosting

Amplify CLI Version

4.37.1

[fanismahmalat]

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.

[bobbyhadz]

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.