title: Why custom 404 page not loading when using build project from Nextjs application?
body: <p>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 &quot;serve&quot; 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. <br /></p>
  <h4>In the browser: <br /></h4>
  <p><a href="https://i.stack.imgur.com/kBF4u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kBF4u.png" alt="Browser" /></a></p>
  <h4>404.tsx file: <br /></h4>
  <p><a href="https://i.stack.imgur.com/U7ceg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U7ceg.png" alt="404.tsx file" /></a></p>
  <h4>next.config file: <br /></h4>
  <pre><code>module.exports = {
    trailingSlash: true,
    webpack: (config, options) =&gt; {
      config.module.rules.push({
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
        },
      })
      return config
    },
  }
  </code></pre>
  <h4>404.tsx <br /></h4>
  <pre><code>export default function FourOhFour() {
    return &lt;&gt;
      &lt;h1&gt;404 - Page Not Found - Test 404 Page&lt;/h1&gt;
    &lt;/&gt;
  }
  </code></pre>