when hard refresh page in next js give error 404

Question

when I build my nextJs application on the server

after multi-refreshing the home page or other pages giving a 404 error

by the way I add this code to package json file but still have error

module.exports = {
  trailingSlash: true
}

my page is SSG

my assets version next: 13.1.6 react: 18.2.0

Answer 1

It's an issue coming from next export and deploying static files, you can use Vercel instead of deploying static files.

for this issue create .htaccess file in your public folder and copy/paste this code in it:

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{HTTPS} off 
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]
<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /page
  RewriteRule ^[pid]\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /page/[pid].html [L]
  
</IfModule>
<IfModule mod_rewrite.c>

RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html [NC,L]
  
</IfModule>

Answer 2

After many searches, we found that the problem is from the server side

We changed the webserver to Nginx and our problem was solved. I think there is a problem with Apache, but I don't know the details of the problem.