NGINX and Gatsby: Setting up nginx to route to Gatsby 404 page

Question

I have a Gatsby site set up with nginx. I know that Gatsby uses whatever component that exists in the pages/404.js as the 404 page. If I navigate to www.mysite.com/404 I can see the custom Gatsby 404 page I created, however this is the only time I see the Gatsby 404 component. If I navigate to www.mysite.com/blahblahblah or any other non-existent page I see the default white nginx 404 page.

I'm familiar with Gatsby but a noob when it comes to nginx. How can I set up my nginx config to redirect my users to my custom Gatsby 404 component when the user navigates to a non-existent page instead of showing the default nginx 404 page?

Here is my nginx config:

    server {
    listen 80;
    sendfile on;
    
    default_type application/octet-stream;

    root /usr/share/nginx/html;
    location / {
        try_files $uri $uri/ /index.html =404;
    }
}

Answer 1

I was just in the same situation. I'll share what (seems to have) worked for me. Like you, I'm using Gatsby and I have a file at pages/404.js that I'd like to use as a catch-all for missing routes. I found the answer given by @ivo-gelov here helpful: How nginx process =404 fallback in try_files

Specifically, I just added an error_page definition to match up with the =404 error code:

  error_page 404 /404.html;

  location / {
      try_files $uri $uri/ /index.html =404;
  }