CODEWITHSUNDEEP
reactjsnext.js
Medisa
Medisa

Reputation: 409

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

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>
)

Upvotes: 0

Views: 3210

Answers (3)

Ananthu
Ananthu

Reputation: 74

Add this config to next.config.js

module.exports = {
     trailingSlash: true,
}

And add this .htaccess file in public folder solved my issue ( replace your URL : https://test.exampleurl.com)

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
  RewriteCond %{HTTP_HOST} test\.exampleurl\.com [NC]
  RewriteCond %{SERVER_PORT} 80
  RewriteRule ^(.*)$ https://test.exampleurl.com/$1 [R,L]
</IfModule>
<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin '*'
</IfModule>

Upvotes: 1

cyberfly
cyberfly

Reputation: 5878

Add this to next.config.js

module.exports = {
  trailingSlash: true,
}

Upvotes: 0

Shyam
Shyam

Reputation: 1454

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' } },
    }
  },
}

Upvotes: 1

Related Questions