Rumahweb Journal
Banner - Cara Upload NextJS di cPanel Hosting

Cara Upload NextJS di cPanel Hosting

Setelah aplikasi NextJS selesai dibuat di localhost, selanjutnya Anda bisa mencoba upload file NextJS ke hosting. Pada panduan ini, kami akan berbagi cara upload NextJS di cPanel hosting Rumahweb.

Namun sebelum kami mengulas lebih lanjut cara upload filenya, kami akan menjelaskan terlebih dahulu apa itu NextJS kepada anda. 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.

Cara Upload NextJS di cPanel

Berikut adalah panduan upload NextJS di cPanel hosting Rumahweb.

System Requirement

Sebelum masuk lebih jauh, pastikan Anda sudah memenuhi requirement berikut:

  • Project NextJS siap deploy
  • Sudah melakukan testing dan build di localhost (bukan di dalam hosting)
  • Menggunakan paket hosting yang include akses Terminal

Jika sudah memenuhi requirement berikut, silahkan lanjutkan untuk mengikuti Cara Upload NextJS di cPanel Hosting Rumahweb di bawah ini:

Upload NextJS di cPanel

  1. Pastikan project NextJS Anda sudah berjalan di localhost. Berikut adalah screenshot contoh project NextJS sederhana yang akan diupload ke dalam cPanel.
contoh project NextJS
  1. 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.

  1. 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:
file package.json
  1. Jalankan command “npm run build” di project NextJS yang Anda gunakan di localhost.
npm run build
  1. 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.
project NextJS
  1. Login ke cPanel hosting lalu setup “Setup NodeJS App” di cPanel hosting yang digunakan. Untuk proses setup, dapat mengikuti panduan berikut ini.
  2. Upload dan extract file ZIP NextJS ke dalam folder app NodeJS yang sudah Anda setup di file manager cPanel.
extract file ZIP NextJS
  1. Masuk ke menu “Setup Nodejs App” cPanel, copy link path virtual env project NodeJS Anda, lalu paste-kan di terminal cPanel lalu tekan enter.
Setup Nodejs App
terminal
  1. Pastikan kembali kelengkapan file dengan command “ls” . Lalu jalankan command “npm install“. Tunggu hingga proses npm install selesai.
npm install
  1. Setelah proses npm install selesai dan tidak ada error, silahkan masuk kembali ke menu “Setup Nodejs App” cPanel lalu klik restart NodeJS.
Setup Nodejs App
  1. Apabila proses restart selesai, silahkan coba akses url website project Anda di browser. Jika masih tidak muncul, kami sarankan anda menggunakan private window / icognito di browser sebagai pembanding.
  2. Jika tidak ada error, project NextJS Anda akan dapat diakses melalui browser seperti screenshot berikut:
tampilan nextjs di browser yang telah diupload

Sampai tahap ini cara upload NextJS di cPanel Hosting sudah selesai.

Perlu kami infomasikan juga bahwa NextJS membutuhkan resource server yang cukup tinggi. Sehingga kami sarankan apabila Anda ingin menggunakan NextJS di cPanel hosting Rumahweb, Anda dapat menggunakan layanan Cloud Hosting yang memiliki dedicated CPU dan RAM.

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. Detail layanan VPS Rumahweb dapat dilihat pada url VPS Murah.

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

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 5 / 5. Vote count: 1

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

Cloud Hosting Terbaik Rumahweb

Benny Eko Priharyanto