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?

score 3 · Accepted Answer · edited Oct 25 '20 at 00:44

3

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.

edited Oct 25 '20 at 00:44

Y. Pablo Camacho

492
2
9

answered Feb 11 '19 at 05:54

M. Ernst

59
8

score 1 · Answer 2 · answered Feb 10 '19 at 11:31

1

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

Try looking at nodejs equivalent of this .htaccess

answered Feb 10 '19 at 11:31

Y. Pablo Camacho

492
2
9

Thats true, because there is a apache running on the server and i have to make him redirect to the right port on which the express app is listening. – M. Ernst Feb 10 '19 at 12:12

score 0 · Answer 3 · answered Jan 14 '22 at 15:50

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]

Next.js index route returns 404

3 Answers3