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.