Cara Deploy Project NextJS di cPanel Hosting

Pengantar

Next.js adalah framework React modern yang memungkinkan pengembangan aplikasi web yang cepat, fleksibel, dan SEO-friendly. Secara default, Next.js dirancang untuk dijalankan di server (SSR). Namun anda bisa menjalankan aplikasi Next.js secara dinamis (bukan export static) langsung dari cPanel, tanpa VPS

Prasyarat

Akses ke cPanel Hosting (shared hosting)
Project Next.js sudah jadi dan bisa dijalankan lokal
Akses ke File Manager atau FTP
Node.js dan npm terinstall di komputer lokal

Langkah Sebelum Deploy

Buat file server.js di project Next.js anda dan isi dengan kode berikut

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}`)
  })
})

Pastikan bahwa bagian const port = process.env.port || 8080 telah mengatur port ke 8080 saat tidak ada nilai dari process.env.port

Buka dan edit file package.json pada project Next.js di localhost Anda. Ubah bagian "start" menjadi
```
"start": "NODE_ENV=production node server.js"
```
Jalankan perintah npm run build
Ekstrak project Next.js anda menjadi zip kecuali folder node_modules

Langkah - Langkah Deploy Project Next.js di cPanel Hosting

Buka cPanel, masuk ke Setup Node.js App
Buat Aplikasi Node.js Baru
Klik Create Application, kemudian isi form dan klik Create
1. Application Mode : Production
2. Node.js version : Pilih versi Node.js sesuai dengan kebutuhan anda
3. Application Root : Folder tempat anda upload project. Contoh nextjsapp
4. Application URL: Domain atau Subdomain anda
5. Application startup file : server.js
Setelah di Create akan menampilkan command untuk mengakses folder Node.js via terminal. Copy command untuk nanti diakses lewat terminal
Buka File Manager, kemudian buka folder Next.js yang sudah dibuat di dari Setup Nodejs App dan hapus semua isi dari folder nextjsapp
Upload dan Export project Next.js anda
Setelah melakukan upload dan export folder Next.js anda, masuk ke Terminal jalankan perintah yg sudah dicopy sebelumnya dan jalankan perintah npm install
Akses website megggunakah domain anda