When I refresh the react.js and next.js page, it gives me 404 error

Question

I have a React.js and Next.js web site, it works well until I export production build. When I publish my project on the server, I get this problems: When I refresh the page it gives me 404 error.

I found Next.js 404 error after refreshing the page and set its configs. but my problem still exists.

All my links are like this:

import Link from 'next/link';
export default () => (
 <Link href="/profile">
   <a>profile</a>
 </Link>
)

Answer 1

For static HTML export you must use exportPathMap Refer: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap

module.exports = {
  exportPathMap: async function (
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      '/': { page: '/' },
      '/profile': { page: '/profile' },
      '/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } },
      '/p/learn-nextjs': { page: '/post', query: { title: 'learn-nextjs' } },
      '/p/deploy-nextjs': { page: '/post', query: { title: 'deploy-nextjs' } },
    }
  },
}

Answer 2

Add this to next.config.js

module.exports = {
  trailingSlash: true,
}