Next.js Error: PageNotFoundError: Cannot find module for page: /404

Question

I have a problem, when I am trying to build my Next.js project. The thing is that when I type npm run build every page is build except /404 route, and I am not sure why. There 3 things that I think should be mentioned to help troubleshooting process:

• I have custom /404 error page
• I am using i18n for translation
• It happens only when I do not have .next folder, so, on the first build. On the second build everything is just fine.

Why does it happen? Why am I getting this error after first build?

PageNotFoundError: Cannot find module for page: /404

Here is how it looks like:

Error page itself

// /pages/[locale]/404.tsx

const ErrorPage = ({ locale }: ErrorPageProps) => {
  const { t } = useTranslation();

  return (
    <>
      ...
    </>
  );
};

const getStaticProps = makeStaticProps();
export { getStaticPaths, getStaticProps };

export default ErrorPage;

Page to redirect, according to i18n documentation:

// /pages/404.tsx
import { Redirect } from '@lib/redirect';

export default Redirect;

Filetree of /pages folder:

.
├── 404.tsx
├── [locale]
│   ├── 404.tsx
│   ├── about.tsx
│   ├── blog
│   │   ├── [postName].tsx
│   │   └── index.tsx
│   ├── index.tsx
│   └── projects
│       ├── [projectName].tsx
│       └── index.tsx
├── _app.tsx
├── _document.tsx
├── api
│   ├── posts
│   │   └── get-post
│   │       └── [locale]
│   │           └── [slug].ts
│   └── projects
│       └── get-project
│           └── [locale]
│               └── [slug].ts
└── index.tsx

Thanks in advance!

Answer 1

Well, the problem wasn't about /404 page at all. The problem was about how I was fetching data using getStaticProps. I was doing that using REST API, but once I have change it to native fetch(), everything started building perfectly fine:

export async function getStaticProps({ params }: { params: any }) {
  const { locale, postName } = params;
  const ns = ['common', 'components', 'pages', 'projects'];

  const headers = new Headers();

  headers.set('Authorization', 'Basic ' + Buffer.from(
    process.env.DATA_API_USERNAME + ':' + process.env.DATA_API_PASSWORD
  ).toString('base64'));

  const res = await fetch(
    `${process.env.LOCAL_DATA_API_URL}/posts/${locale}/${postName}`,
    { headers }
  );
  const post = await res.json();

  return { props: { post, locale, ...(await serverSideTranslations(locale, ns)) } };
}