I have a NextJS app. In the app, I have a custom 404 page that I literally took from https://nextjs.org/docs/advanced-features/custom-error-page. I also have a middleware.ts file that checks for authentication. My NextJS app uses the getStaticPaths and getStaticProps. I have set fallback to false in my getStaticPaths.
When I run my app, and I go to a valid URL, my app renders the content correctly. However, when I am going to an INVALID URL, my app renders my custom 404 page briefly and then the browser console throws this error: React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. along with some other errors like TypeError: Cannot read properties of undefined (reading 'default'). Please see the images below.
When debugging I noticed that if I remove the middleware.ts file there are no errors. However,
- if I have the
middleware.tsfile and using the default NextJS 404 page I get an infinite requests for a 404 page in my Network tab.
- if I have the
middleware.tsfile and use the custom 404 page I get the below errors.
As you can see in the above image, the 404 page is loaded briefly which is what is expected, but immediately it throws the other errors.
Firstly, I have not set any ErrorBoundary in my NextJS app.
Secondly, I thought that if fallback is false everything not matching the paths from the getStaticPaths will be 404 without even calling the component. So, I am getting confused why I am getting the above errors.
I believe there is something happening with the authentication set up in the middleware.ts file. Do I need to add anything more related to my custom 404.tsx page in my getStaticProps?
Any help would be appreciated as I am new to NextJS. Not sure how to fix this.
