Why custom 404 page not loading when using build project from Nextjs application?

Question

I have a custom 404 page for my Nextjs app. I wanted to try the build project locally before deploying it to server. I used the "serve" package to host the project locally. The project loads fine but when I tried to navigate to a page that doesn't exist, the app uses the default 404 page and not the customized one. I just want to ask if there are needed steps to configure in order to run the custom 404 page from Next.js or if it is possible to load the custom 404 page locally.

In the browser:

404.tsx file:

next.config file:

module.exports = {
  trailingSlash: true,
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(html)$/,
      use: {
        loader: 'html-loader',
      },
    })
    return config
  },
}

404.tsx

export default function FourOhFour() {
  return <>
    <h1>404 - Page Not Found - Test 404 Page</h1>
  </>
}

This also can happen if you have set fallback: true in getStaticPaths, although the docs are a bit misleading here, IMO: data-fetching/get-static-paths#fallback-true. — kca
– kca, Commented Nov 8, 2022 at 10:09

illia chill · Accepted Answer · 2021-12-28 16:02:04Z

3

you create in pages/404.js (or .tsx) You don't need to change config, the page will be rendered in case of 404.

Maybe you have cache problem (delete your .next folder and try to build again)

P.S. probably you will need to add your "pages/404.js" to tsconfig.json

edited Dec 28, 2021 at 16:02

answered Dec 28, 2021 at 12:37

illia chill

2,07611 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rahmat Oktrifianto Over a year ago

Delete .next folder and build again works for me. :)

jsan · Accepted Answer · 2021-12-29 14:18:56Z

2

The "serve" package does not allow you to customise the 404 page (from the doc). The page to serve in case of 404 is a server configuration, for instance, on nginx you can configure it with the directive error_page 404 /404.html;.

You need to look in the your web server doc how to configure 404 pages.

answered Dec 29, 2021 at 14:18

jsan

2,8143 gold badges20 silver badges25 bronze badges

Collectives™ on Stack Overflow

Why custom 404 page not loading when using build project from Nextjs application?

In the browser:

404.tsx file:

next.config file:

404.tsx

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

In the browser:

404.tsx file:

next.config file:

404.tsx

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related