Next.js index route returns 404

Question

I got a problem to get my nextjs app running on my production server. I portforward it via htaccess by following code:

RewriteRule ^(.*) http://127.0.0.1:1338/ $1

Every route is working perfectly: /blog,/blog/:id, /about etc.
Just "/" is not working when rendered from serverside. I can navigate to it after loading another route without any problem. I can also call it by /index but not with mydomain.tld

Does anyone have an idea?

Answer 1

The issue happens when Apache tries to pass an index.html file to the next router which returns an error.

Adding DirectoryIndex disabled to .htaccess file solves the problem.

Answer 2

You are trying to redirect using Apache Module but you seem to be using Node.js

Try looking at nodejs equivalent of this .htaccess

Answer 3

Here is a complete .htaccess for implementing a Node.js application with an Apache redirect.

RewriteEngine On

# Need to disable DirectoryIndex to avoid rewriting directory URL to index.html
DirectoryIndex disabled

# Redirect home page request to the NextJS server
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^(.*)$ http://127.0.0.1:4002/ [P,L]

# Redirect all other requests to the NextJS server with the URI appended
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:4002/$1 [P,L]