Why does Next.js give 404 when I refresh a page?

Question

React

I built the project on Next.js into regular html, uploaded it to the hosting. It would seem that everything is fine, but when the page is reloaded, the hosting issues 404. Hosting on Apache. I created .htaccess and wrote this:

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

But this only works for normal create-react-app
Now on reload it just throws at index.html even though the url is not the root path.

Answer 1

I looked for an answer, setting next.config should help
https://nextjs.org/docs/api-reference/next.config....

module.exports = {
  reactStrictMode: true,
  trailingSlash: false,
  exportPathMap: async function (
      defaultPathMap,
      { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
    }
  },
};

It did not help, they wrote that if you install Node.js on shared hosting it can help, but I have no way to install it.
The only thing that solved the problem was deploying the site on Vercel

Answer 2

according to the rules you specified, if you don't access the file directly, it will redirect to index.html