Use custom page for Azure 404 page in NextJS export

Question

Hello guys,

Have been struggling with this little problem. But solve for this case does not seems so little. Problem is using custom 404 page in Azure Static Web App hosted NextJS app. There is localization in URL and I think this maybe create the problem that the often used way it's not working here.

Now this is configured like this in staticwebapp.config.json file:

"responseOverrides": 
  { 
    "404": { "rewrite": "/404.html"  }
  },

Also tried statusCode inside of that object with rewrite with no help. Also tries this, cause someone told in stackoverflow this helped him:

"platformErrorOverrides": [
    {
      "errorType": "NotFound",
      "serve": "/404.html"
    }
  ]

Created 404.html file under root and also in localized pages. I have localization in URL, so folder structure before export is like this:

src/pages/[locale]/404.html

And like I said, also added it to pages folder at root level like this:

src/pages/404.html

Page works fine in URL with localization but not in the redirecting case if HTTP response is 404. Any tips or advices where start digging?

Answer 1

Based on the information you provided, it seems that you have already tried the most common solutions for configuring a custom 404 page in Azure Static Web Apps. However, there are a few more things you can try:

Make sure that the 404.html file is included in the build output. You can check this by inspecting the contents of the out directory after running the next build command.

Try using an absolute path for the rewrite property in the responseOverrides object. For example, if your app is deployed to https://myapp.azurestaticapps.net, you can try setting the rewrite property to /404.html instead of /404.

Check the logs in the Azure portal to see if there are any errors related to the custom 404 page. You can access the logs by going to your Static Web App resource in the Azure portal, selecting "Functions", and then selecting "Logs".

1. Try using the navigationFallback property instead of responseOverrides. The navigationFallback property allows you to specify a fallback page for all requests that do not match a static file or API route. Here's an example configuration:

{
  "navigationFallback": {
    "rewrite": "/404.html"
  }
}