Next.JS - `.htaccess` file?

Question

I'm just starting out with my first Next.JS app. I've used npx create-next-app and have made a few pages, when I realized that I'm not sure how to use a .htaccess file. I'm used to Apache taking care of this stuff for me, and simply putting my .htaccess file into my Next.JS app's root directory unsurprisingly didn't seem to cut it. How would I go about setting up a .htaccess file similar to the following?

RewriteEngine on

RewriteRule ^profile/([a-z0-9]+) profile.html

Answer 1

.htaccess files are specific to Apache, so without Apache you can't use them. You can use Apache as a proxy to your node.js app, but you would still not use a .htaccess file; you could configure RewriteRules in your Apache config but there is no need to when you can handle all your routing directly in your application logic.

In node.js you don't need a separate web server like Apache. Your program can be long-running, bind to a port, and listen and respond to requests which is the main functionality that a web-server normally provides.

Next.JS has documentation for setting up custom routing here: https://nextjs.org/docs/#custom-server-and-routing

Answer 2

If You use next export to SSG on your project This .htaccess file will fix redirection problem

RewriteEngine On
RewriteRule ^([^/]+)/$ $1.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]+)/$ $1.html
RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ /$1/ [R=301,L]

Answer 3

You have to learn to use pm2 :

1. You should be able to install nvm in your ubuntu, centos etc.. via ssl: from https://github.com/nvm-sh/nvm
2. nvm will give you possibilities to install node
3. After you complete the installation of node, install pm2 globally,
4. https://pm2.keymetrics.io/
5. At root dir of project create file : ecosystem.config.js

ecosystem.config.js :

module.exports = {
apps : [
    {
        name: "your_server_name",
        script: "./server.js",
        watch: true,
        env_development: {
            "PORT": 3000,
            "NODE_ENV": "development"
        },
        env_production: {
            "PORT": 8001,
            "NODE_ENV": "production",
        }
    }
]}

.htaccess look like this :

DirectoryIndex disabled
RewriteEngine On
RewriteRule ^$ http://127.0.0.1:8001/ [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:8001/$1 [P,L]

Login to your site over SSH:

ssh name@IP then password

How to run pm2 .

pm2 start ecosystem.config.js --env production

pm2 start ecosystem.config.js --env development

Which files u need in server :

Answer 4

If your server is already using Apache and it has mod_rewrite enabled, you can use this .htaccess:

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

</IfModule>

Source

Answer 5

The top answer didn't help me as I was using multiple levels of params....

Imagine the page pages/{...complex}.tsx, where complex is ["a","b","c"]. The following helped me:

DirectorySlash Off
RewriteEngine On

RewriteRule ^$ index.html [QSA,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+?)(?<!\.html)\/?$ $1.html [QSA,L]

ErrorDocument 404 /404.html