pages/404.jsx
import React, { useEffect } from "react";
import Error from "next/error";
export default function NotFound() {
return <Error statusCode={404} />;
}
AWS Amplify Dashboard >> Rewrites and redirects:
Next.js's Amplify tutorial recommends using index.html below, but I got the 404 page to show up on production based on a Stackoverflow answer (Problems setting up 404 page on Gatsby site in AWS Amplify).
Source address: /<*>
Target address: /404.html
Type: 404 (Rewrite)
Issue:
I am redirected to my website.com/404 if I visit https://mywebsite.com/this_page_does_not_exist. We want to monitor our 404 pages during a site migration and this is causing our analytics program to show the url for all 404 visits is https://mywebsite.com/404.
Hack Solution:
Send a manual request to our analytics program with the name of the page useEffects.