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:

• Aplikasi Next js sudah siap deploy
• Sudah melakukan testing di localhost
• Menggunakan paket hosting yang terdapat akses terminal

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.