How to deploy a nextjs application on cpanel?

Question

I followed these steps to deploy my nextjs on cPanel.

1. go to package.json and add this line: "homepage": "http://afsanefadaei.ir"

2. run next build to have .next folder as my build folder

3. go to cpanel >> file manager >> public_html folder and upload the contetn of .next folder to this directory

4. add or edit this file: .htaccess to:

but when I go to the website I face this:

Do you know what is wrong with this?

Weevil

Answer 1

1. Your .next doesn't have index.html file.
2. Seems like you have server side (mostly using nodejs), but unfortunately you couldn't run that server side from cpanel.
3. As I know, you should use next export instead of next build if you tend to have frontend side only.

But the most important thing is number 1, make sure you have index.html inside your .next folder.

Emptor

Yes I've tried a simple react app and it worked! I guess I have to serverless my nextjs app – Weevil

What info should that index.html contain? And also should the contents of the 'out' folder be copied to public_html or copy the directory as well? – Cynthia

it is an html file containing your web html,css,js. you can trial and error on your second question, up to you if you want to include the directory or not, it will reflect on the browser url address too. – Emptor

Answer 2

I uploaded out (which gets generated doing npm run build && npm run export) folder to public_html and created .htaccess file like

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

It worked for me 😁

Problem: When I refresh the page on some different route let's say /about, it brings the index.js page contents but URL doesn't change to /

Bunnybunow

The problem I had with this solution was my style. They did not apply correctly and I couldn't find out why! but it is a presented solution from nextjs community. – Weevil

Hi! I am following these exact same steps but its not letting me upload sub-directories! Can u tell me if you faced this problem? – Vervet

I am getting 500 Internal Server Error – Algoid

Answer 3

I could host the application with one of the above answers, but when I refresh the page the application will crash or go to initial route.

This is how I solved this problem (solution taken from next.js official site).

1. Take production build of next.js application using npm run build
2. create a startup file app.js in the root folder and copy the following code

const {
  createServer
} = require("http");
const {
  parse
} = require("url");
const next = require("next");

const port = process.env.PORT || 3000;

// Create the Express-Next App
const app = next({
  dev:false
});
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    createServer((req, res) => {
      const parsedUrl = parse(req.url, true);
      const {
        pathname,
        query
      } = parsedUrl;
      handle(req, res, parsedUrl);
      console.log("pathname", pathname);
    }).listen(port, (err) => {
      if (err) throw err;
      console.log(`> Ready on http://localhost:${port}`);
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

3. Create a Node.js Application on cPanel and add Application Startup File name

4. And start the application. You are done !

For further information check out the official docs of Next.js Custom Server

Orchid

Answer 4

Deploy it as a NodeJS application.

Mayhew

Answer 5

Here is a complete .htaccess for implementing a Node.js application with an Apache redirect. This works very well on cPanel if you have your NextJS app deployed with the next start server (listening on a specific port).

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]

Silicify

This didn't work for me. I put the .htaccess file in nextjs project root. If this worked, I'd believe it's the most convenient answer than creating custom server – Pease

Remember that you also have to have the NextJS server running. I use a utility called PM2 (pm2.keymetrics.io) to ensure that a process automatically starts and runs in the background. – Silicify

Answer 6

For anyone facing issue with .htaccess where reloading the page redirects to 404 in Next.js using next export build.

Here's the working .htaccess file

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # Serve static files directly
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]
  
  
  RewriteRule ^(.*)$ /$1.html [L]

  # Redirect all other requests to index.html
  RewriteRule ^ index.html [L]
</IfModule>

Candleberry