Site icon Knowledge Base Jagoan Hosting Indonesia

Cara Upload NextJS Di Hosting cPanel

Pengantar

Halo sob, kali ini kita akan memberikan tutorial bagaimana caranya upload project next js kamu ke cpanel hosting nih. Sebelumnya, next js itu apa sih? Next.js adalah sebuah kerangka kerja (framework) javascript yang digunakan untuk mengembangkan aplikasi web berbasis JavaScript. Kerangka kerja ini berfokus pada pengembangan aplikasi web berkinerja tinggi dan mudah dijalankan. Next.js memungkinkan kamu untuk membuat aplikasi web dengan fitur-fitur seperti rendering sisi server (server-side rendering) dan prerendering, routing yang mudah, dan dukungan untuk pengelolaan data yang efisien.

Sebelum melangkah lebih jauh, pastikan kamu sudah memenuhi persyaratan berikut:

 

Upload NextJS Di Hosting cPanel

 

Langkah 1, Pastikan Nextjs sudah berjalan di localhost

Langkah 2, Buat file server.js

Selanjutnya buat file server.js di project next js kamu. Berikut kodenya:

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 port = process.env.port || 8080”. Pastikan port menggunakan 8080.

Langkah 3, Edit file package.json

Edit file package.json dari project NextJS kamu di localhost. Edit bagian “start” dengan script “start”: “NODE_ENV=production node server.js”

 

Langkah 4, Jalankan command npm run build

Langkah 5, Compress ke format ZIP semua file project NextJS

Selanjutnya kamu perlu compress semua file ke format zip kecuali folder “node_modules”

Langkah 6, Login ke cPanel hosting lalu setup “Setup NodeJS App”

Untuk proses setup kamu bisa mengikuti tutorial yang telah dibuat berikut

Langkah 7, Upload dan extract file ZIP NextJS ke File Manager

Langkah 8, Masuk ke menu “Setup Nodejs App”

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

lalu paste-kan di terminal cPanel lalu tekan enter.

Langkah 9, Jalankan npm install

jalankan command “npm install“. Tunggu hingga proses npm install selesai.

Langkah 10, masuk kembali ke menu “Setup Nodejs App”

masuk kembali ke menu “Setup Nodejs App” cPanel lalu klik restart NodeJS.

Langkah 11, Selesai

Terakhir kunjungi url website kamu, jika sudah muncul seperti di localhost kamu, artinya kamu sudah berhasil.

 

Penutup

Demikianlah Cara Upload Nextjs di Hosting cPanel Jagoanhosting, semoga membantu ya sob.

Related Posts
Tutorial Membuat Akun Email pada cPanel

Halo Sobat Jagoan! Kamu sebagai pelaku bisnis, mahasiswa maupun freelancer pasti membutuhkan email dengan nama domain kamu sehingga kamu bisa Read more

Cara Menambahkan Cron Jobs Yang Tepat di Cpanel Kamu

Hi Sob! tahukah kamu, Cron Jobs digunakan untuk menjadwalkan tugas untuk dijalankan di server. Wah, gimana cara mengoprasikannya? Yuk, kita Read more

Melakukan Restore Menggunakan Backup Acronis

Hai sobat! Pada cPanel memiliki salah satu fitur yang berguna untuk merestore dan mendownload suatu file, database, dll. Jadi Kamu Read more

Cara Menambahkan Email Anggota pada Mailing List

Hi Sob, kalau misalkan Kamu merupakan seorang pebisnis, ataupun bekerja dan berkegiatan di satu komunitas yang membutuhkan media untuk menghubungkan Read more

Exit mobile version