Next.js Discord

Discord Forum

Next.js Deploying Issue

Unanswered
Serbian Tricolour Hound posted this in #help-forum
Open in Discord
Serbian Tricolour HoundOP
Hello, super Nextjs guys.

While I was deploying Next.js app, I met an issue. We can say it's just similar to .htaccess missing issue in Reactjs app.
I developed Next.js app and build and export (npm run build; next build & next export). so I got a next js app built.
I put it into domain root directory of digital ocean droplet server. When I enter domain in the browser, it displays index.html (https://example.com), but when I reload pages (https://example.com/*~), 404 error. For examaple, https://example.com/login doesn't show me login page. 404 error instead. How can I fix it? I just put .htaccess into root directory like a React app, but it's not helpful.

Please help me. Thank you in advance.

14 Replies

Rafael Almeida
you need to correctly map the static files with the server you are using. the next.js docs have an example with Nginx, you can adapt it to Apache: https://nextjs.org/docs/app/building-your-application/deploying/static-exports#deploying
server {
  listen 80;
  server_name acme.com;
 
  root /var/www/out;
 
  location / {
      try_files $uri $uri.html $uri/ =404;
  }
 
  location /blog/ {
      rewrite ^/blog/(.*)$ /blog/$1.html break;
  }
 
  error_page 404 /404.html;
  location = /404.html {
      internal;
  }
}
Serbian Tricolour HoundOP
Thank you for your reply
I am currently using Apache2 server
<VirtualHost *:80>
    ServerName acme.com
    DocumentRoot /var/www/out

    <Directory /var/www/out>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

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

    <Location /blog/>
        RewriteEngine on
        RewriteRule ^/blog/(.*)$ /blog/$1.html [L]
    </Location>

    ErrorDocument 404 /404.html
    <Location /404.html>
        Order allow,deny
        Allow from all
        Require all granted
    </Location>
</VirtualHost>
It will work for me?
Rafael Almeida
I am not familiar with apache so you will need to test it yourself, keep in mind you will need to adjust the routes based on the pages in your own app, so only this might not be enough to map all pages
Serbian Tricolour HoundOP
Hmm, I see. Thanks
Philippine Crocodile
This has helped me in the past https://www.appsloveworld.com/reactjs/100/38/next-js-htaccess-file
You easily should be able to export your nextjs app as static html/js and serve it with routes through apache. I personally use nginx but look into apache guides for exported next apps if this link doesnt work
Serbian Tricolour HoundOP
Thank you for your help
As you know, there are a few answers
Which one was helpful for you?
this one?