Can't reach to 404 pages automatically.

[cha2hyun]

Issue

When user put wrong URL, pages doesnt go 404 pages (neither basic 404 pages of Nex.js) automatically.

when go 404 pages manually

wrong url doesnt show 404 pages

Tried

Local : delete .next folder > yarn build > yarn start
Server : Deploy on AWS / Deploy on vercel

Code

404.tsx

[theodorusclarence]

I've never had this problem before.

Do you have any middleware, or do you use any getStaticProps/getServerSideProps?

[cha2hyun]

@theodorusclarence
Thanks for reply and amazing starter package 🙇‍♂️

Code (Middleware)

_app.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
import AOS from 'aos';
import { SessionProvider } from 'next-auth/react';
import React, { useEffect } from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';

import '@/styles/aos.scss';
import '@/styles/globals.css';
import '@/styles/colors.css';

// !STARTERCONF This is for demo purposes, remove @/styles/colors.css import immediately

/**
 * !STARTERCONF info
 * ? `Layout` component is called in every page using `np` snippets. If you have consistent layout across all page, you can add it here too
 */

const MyApp = ({
  Component,
  pageProps: { session, ...pageProps },
}: {
  Component: any;
  pageProps: any;
}) => {
  const [queryClient] = React.useState(() => new QueryClient());

  // AOS animation
  useEffect(() => {
    AOS.init({
      once: true,
      duration: 500,
      easing: 'ease-out-cubic',
    });
  });

  return (
    // next-auth
    <SessionProvider session={session}>
      {/* infiniteScroll */}
      <QueryClientProvider client={queryClient}>
        {/* PageProps */}
        <Component {...pageProps} />

        {/* Debug Mode */}
        {/* import { ReactQueryDevtools } from 'react-query/devtools';
        <ReactQueryDevtools initialIsOpen={false} /> */}
      </QueryClientProvider>
    </SessionProvider>
  );
};

export default MyApp;

Production

site 1 : https://www.cue8949.com (deploy on AWS with docker)
didn't use any getStaticProps/getServerSideProps
using useInfiniteQuery from 'react-query' or Axios to fetch data from api.

site 2 : https://nangmanski-web-v2.vercel.app (deploy on Vercel)
using getServerSideProps to fetch data. it shows _error.tsx when it cant fetch data.

Problem

both site has same _404.tsx and _error.tsx and both site has same issue that can't reach to _404.tsx when user go to invalid url.

[theodorusclarence]

Can I see the code of the getServerSideProps?

I suspect it is because you catch all the routes for index with the getServerSideProps.

But I might be wrong; if you didn't, I think its best to open up an issue in the Next.js repository.

[cha2hyun]

Thanks for help! 🙏