Can't reach to 404 pages automatically. about ts-nextjs-tailwind-starter

[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! 🙏