Deploy NextJS di Hosting cPanel

STEP 1

Pastikan aplikasi NextJS sobat sudah berjalan pada localhost. Pada langkah ini, saya asumsikan sobat sudah berhasil membuat aplikasi NextJS pada local device sobat dan berfungsi dengan normal.

STEP 2

Buat file bernama server.js pada root aplikasi NextJS sobat dengan isi filenya sebagai berikut.

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

const dev = process.env.NODE_ENV !== "production";
const hostname = "localhost";
const port = process.env.port || 8080;
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true);
      const { pathname, query } = parsedUrl;

      if (pathname === "/a") {
        await app.render(req, res, "/a", query);
      } else if (pathname === "/b") {
        await app.render(req, res, "/b", query);
      } else {
        await handle(req, res, parsedUrl);
      }
    } catch (err) {
      console.error("Error occurred handling", req.url, err);
      res.statusCode = 500;
      res.end("internal server error");
    }
  }).listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://${hostname}:${port}`);
  });
});

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

const dev = process.env.NODE_ENV !== "production";
const hostname = "localhost";
const port = process.env.port || 8080;
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true);
      const { pathname, query } = parsedUrl;

      if (pathname === "/a") {
        await app.render(req, res, "/a", query);
      } else if (pathname === "/b") {
        await app.render(req, res, "/b", query);
      } else {
        await handle(req, res, parsedUrl);
      }
    } catch (err) {
      console.error("Error occurred handling", req.url, err);
      res.statusCode = 500;
      res.end("internal server error");
    }
  }).listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://${hostname}:${port}`);
  });
});

STEP 3

Edit file package.json pada baris berikut

"start": "next start",

"start": "next start",

menjadi seperti berikut

"start": "NODE_ENV=production node server.js",

"start": "NODE_ENV=production node server.js",

STEP 4

Build aplikasi NextJS sobat dengan cara run command berikut

npm run build

npm run build

STEP 5

Setelah proses build selesai, selanjutnya sobat bisa melakukan compress aplikasi NextJS sobat dengan format zip.

STEP 6

Selanjutnya sobat bisa login ke cPanel dan melakukan setup NodeJs App

1. Pilih versi dari node.js yang sobat inginkan
2. Ubah application modenya ke Production
3. Masukkan nama folder yang nantinya akan dijadikan sebagai direktori aplikasi sobat, sebagai contoh nantinya saya akan menempatkan aplikasi saya pada folder “aplikasinextjs”
4. Pilih domain yang akan digunakan sebagai akses aplikasinya pada aplication URL
5. Masukkan server.js sebagai startup file
6. Untuk passenger.log akan saya masukkan juga pada folder dimana sama seperti tempat menyimpan aplikasi saya nanti

Setelah selesai setup lalu klik create

STEP 7

Upload file aplikasi NextJS yang sudah sobat compress menjadi zip pada folder yang sudah dibuat seperti pada saat setup aplikasi node js sebelumnya. Pada hal ini saya akan upload file zip nya ke folder “aplikasinextjs” pada cPanel melalui file manager

Setelah berhasil terupload, selanjutnya bisa sobat extract file zipnya

Maka hasil akhir isi dari folder “aplikasinextjs” setelah dilakukan extract akan seperti berikut

STEP 8

Setelah dilakukan restart, maka sobat bisa langsung cek akses domain yang sudah sobat sesuaikan sebelumnya. Seharusnya aplikasi NextJs sobat sudah bisa diakses internet

Selamat