Cara Upload NextJS di cPanel Hosting

Setelah berhasil membuat aplikasi Next.js di localhost, langkah selanjutnya adalah membuat aplikasi tersebut bisa diakses secara online. Salah satu cara yang bisa Anda lakukan adalah dengan mengupload hasil build Next.js ke layanan hosting. Dalam artikel ini, kami akan menjelaskan tentang cara upload nextjs di cPanel hosting, mulai dari proses build, upload file, hingga aplikasi dapat diakses secara online.

Namun, sebelum kami membahas lebih lanjut tentang cara upload NextJS di hosting, terlebih dahulu kami akan kami jelaskan tentang apa itu NetxJS dan system requirements yang dibutuhkan untuk deploy di hosting. Berikut informasi selengkapnya.

Apa itu NextJS

NextJS adalah framework javascript yang di dukung oleh NodeJS di belakangnya. NextJS sangat populer digunakan, karena memudahkan developer untuk mengembangkan aplikasi website berbasis React.

Beberapa fitur unggulan NextJS adalah dapat menggabungkan front-end dan backend dari React di satu environment. Sehingga akan lebih mudah pada saat proses deployment. Fitur yang tidak kalah menarik adalah kemundahan build, optimasi CSS hingga rendering html langsung dari tools CLI yang disediakan oleh NextJS.

Rekomendasi Paket Hosting

Dari beberapa studi kasus yang kami temui, framework Next.js memerlukan resource yang cukup besar agar dapat berjalan lancar pada layanan hosting.

Oleh karena itu, kami merekomendasikan kepada Anda yang akan mendeploy Next.js untuk menggunakan layanan Cloud Hosting dengan spesifikasi minimal sebagai berikut:

• CPU : 2vCPU
• RAM : 4 GB
• Entry Process : 50
• NPROC : 120

Persiapan Sistem

Sebelum mengikuti panduan cara upload nextjs di cPanel, terlebih dahulu pastikan bahwa Anda telah memenuhi sistem requirements berikut:

• Project NextJS siap deploy
• Sudah melakukan testing dan build di localhost (bukan di dalam hosting)
• Disarankan menggunakan cloud hosting dengan paket minimal yang direkomendasikan.

Setelah memastikan kebutuhan sistem tersebut dapat dipenuhi, selanjutnya Anda bisa mengikuti panduan berikut.

Cara Upload NextJS di cPanel

Berikut adalah panduan upload NextJS di cPanel hosting Rumahweb.

Step 1. Persiapan di localhost

1. Pastikan project NextJS Anda sudah berjalan di localhost. Berikut adalah screenshot contoh project NextJS sederhana yang akan diupload ke dalam cPanel.

2. Buat file “server.js” di project NextJS yang Anda gunakan di localhost. Lalu isikan script custom server seperti informasi di bawah ini:

// server.js
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}`)
  })
})

Note:

Perhatikan bagian “const port = process.env.port || 8080“. Pastikan port menggunakan 8080.

3. Edit file package.json dari project NextJS Anda di localhost. Edit bagian “start” dengan script “start”: “NODE_ENV=production node server.js”, contoh hasil edit seperti screenshot:

4. Jalankan command “npm run build” di project NextJS yang Anda gunakan di localhost.

5. Compress ke format ZIP semua file project NextJS Anda di localhost kecuali folder “node_modules”. Pastikan juga semua file yang tersembunyi, terutama folder “.next” harus ada di file ZIP yang akan Anda upload.

Step 2. Setup NodeJS di cPanel

Langkah selanjutnya, Anda dapat melakukan deployment nodejs di cPanel. Langkahnya sebagai berikut:

1. Login ke cPanel hosting Anda.
2. Klik menu Setup NodeJS App, lalu create application.
3. Setelah itu akan muncul tampilan untuk konfigurasi aplikasi NodeJS yang akan dibuat. Pada bagian Application Startup File, isi dengan server.js sesuai konfigurasi nextjs yang telah kita lakukan.
4. Setelah mengisikan environtmen tersebut, silahkan klik create. Tunggu prosesnya sampai selesai. Apabila selesai maka akan muncul tampilan NodeJS yang sudah dibuat.

Panduan lengkap tentang cara setup NodeJS di cPanel bisa anda pelajari pada artikel berikut.

Step 3. Upload File NextJs ke hosting

Langkah selanjutnya, Anda bisa mengupload file NextJS yang telah kita siapkan di localhost ke hosting. Caranya sebagai berikut:

1. Login ke cPanel > File Manager.
2. Masuklah ke directory atau application root yang Anda setup pada nodejs di step ke dua. Setelah itu, upload dan extract file next.zip yang telah kita siapkan. lalu, hasilnya akan terlihat seperti gambar berikut.

Step 4. NPM Install

1. Masuk ke menu “Setup Nodejs App” cPanel, copy link path virtual env project NodeJS Anda.

2. Buka aplikasi Terminal di cPanel, lalu paste path virtual env project NodeJS Anda. Berikut contohnya:

3. Pastikan kembali kelengkapan file dengan command “ls” . Lalu jalankan command “npm install“. Tunggu hingga proses npm install selesai.

4. Setelah proses npm install selesai dan tidak ada error, silahkan masuk kembali ke menu “Setup Nodejs App” cPanel lalu klik restart NodeJS.

Sampai tahap ini, proses upload NextJs ke hosting telah selesai.

Step 5. Pengujian

Apabila proses restart NodeJS selesai, silahkan bisa mengakses domain atau subdomain yang Anda konfigurasi di browser. Berikut adalah contoh setelah proses deploy selesai dilakukan di hosting.

Apabila dari browser Anda masih gagal atau tidak muncul, Anda bisa mencoba test akses melalui private window atau icognito di browser sebagai pembanding. Namun, jik masih muncul error, Anda juga bisa membaca file stderr.log di directory apps root nodejs Anda, untuk mengetahui penyebab errornya.

Penutup

Next.js adalah salah satu framework Node.js yang dapat dijalankan di layanan hosting, namun tidak semua jenis hosting mendukungnya karena membutuhkan resource yang cukup besar. Untuk itu, jika Anda ingin menjalankan aplikasi Next.js dengan performa yang optimal, Anda bisa memilih paket Cloud Hosting di Rumahweb.

Dengan resource yang lebih besar dan stabil, Cloud Hosting menjadi pilihan tepat untuk mendukung kebutuhan aplikasi berbasis Next.js.

Namun, apabila Anda membutuhkan fitur live debugging, stagging, testing pada NextJS yang Anda buat, maka proses tersebut tidak dapat dilakukan di cPanel hosting. Untuk kebutuhan tersebut, kami sarankan langsung menggunakan layanan VPS. Rumahweb menyediakan layanan VPS dengan harga terjangkau yang dapat Anda gunakan untuk mendeploy project NextJS yang lebih kompleks.

Demikian cara upload NextJS di cPanel Hosting, semoga dapat membantu.