10

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
4
  • You wouldn't do that. .htaccess is a config file for Apache. It's meaningless without Apache.
    – Paul
    Feb 23, 2019 at 5:00
  • @Paulpro Then what's the React/Next.JS equivalent? Feb 23, 2019 at 5:01
  • @Paulpro So that's what I need! Thank you very much, feel free to turn this into an answer, I'd be happy to accept it Feb 23, 2019 at 5:04

5 Answers 5

9

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

.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

4

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 :

files on server

2

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.