Deploy NextJS di Hosting webuzo

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 user webuzo dan upload zip aplikasi sobat. Setelah berhasil di upload lakukan extract

Sebagai contoh disini saya uplaod di folder nextorion

STEP 7

Selanjutnya sobat buat aplikasi pada menu Add Aplication

Sesuaikan konfigurasi untuk domain

application path : arahkan ke folder tempat aplikasi sobat di upload sebelumnya
application startup file : server.js
start command : npm run start
stop command : stop_command

simpan dan copy untuk port yang tergenerate dan juga untuk path npm nya untuk kita run install dan build aplikasinya

disini saya dapat port 30001

STEP 8

Kita kembali ke file manager lagi, lalu edit file server.js dan sesuaikan pada bagian port menggunakan port yang digenerate pada nodejs sebelumnya

STEP 9

Lakukan start ulang pada menu list application setelah perubahan dilakukan sampai statusnya running

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

Selamat