{"id":2542,"date":"2025-10-02T15:46:13","date_gmt":"2025-10-02T08:46:13","guid":{"rendered":"https:\/\/www.domosquare.com\/tutorial\/?p=2542"},"modified":"2025-10-02T15:47:00","modified_gmt":"2025-10-02T08:47:00","slug":"mengupload-nextjs-ke-hosting","status":"publish","type":"post","link":"https:\/\/www.domosquare.com\/tutorial\/hosting\/mengupload-nextjs-ke-hosting.html","title":{"rendered":"Mengupload NextJS ke hosting"},"content":{"rendered":"\n

Di era modern ini, aplikasi web tidak hanya sekadar menampilkan konten statis; pengguna menginginkan interaksi yang cepat, pengalaman mulus, dan performa yang tinggi. Next.js<\/strong> hadir sebagai salah satu framework React yang memungkinkan developer membuat aplikasi server-side rendering (SSR)<\/strong> maupun static site generation (SSG)<\/strong>, yang sangat optimal untuk SEO dan kecepatan loading.<\/p>\n\n\n\n

Namun, membuat aplikasi yang bagus di komputer lokal hanyalah setengah perjalanan. Tantangan sebenarnya muncul ketika kita ingin mengunggah aplikasi ke hosting<\/strong>. Hosting tradisional seperti cPanel atau shared hosting biasanya tidak mendukung Node.js secara native seperti server VPS. Jadi, perlu pemahaman tambahan tentang build output Next.js, struktur folder, dan cara menjalankan aplikasi di lingkungan hosting.<\/p>\n\n\n\n

Di tutorial ini, kita akan membahas cara mengunggah Next.js yang sudah di-build ke hosting<\/strong> dengan langkah-langkah praktis dan jelas, sehingga aplikasi Anda bisa berjalan lancar di internet.<\/p>\n\n\n\n

Paket yang cocok untuk Next.js<\/p>\n\n\n\n

NextJS membutuhkan proses yang cukup banyak, dari pengetesan Kami rata-rata proses (dengan fork) NextJS mencapai 100 lebih. Oleh karenanya paket yang cocok untuk Next.JS adalah paket Enterprise<\/a>.<\/p>\n\n\n\n

Anda juga boleh melakukan trial jika sebelumnya Anda belum memiliki hosting di Domosquare, hal ini dapat memastikan aplikasi Anda dapat berjalan atau tidak tanpa khawatir bayar.<\/p>\n\n\n\n

Tutorial Upload Next.js ke Hosting (Setelah Build)<\/h3>\n\n\n\n

Dikarenakan build nextjs memerlukan proses dan resource yang banyak, maka pastikan sebelum Anda upload ke cPanel Anda.<\/p>\n\n\n\n

Buat aplikasi di Setup Node.JS<\/h4>\n\n\n\n

Di cpanel pada bagian Software, klik Setup Node.js App<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Setelah ada di halaman Setup Node.js App, klik tombol “CREATE APPLICATION”<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Setelah Anda buat Anda dapat coba test sesuai URL yang tadi Anda tentukan, jika berjalan, seharusnya Anda akan melihat tulisan:<\/p>\n\n\n\n

It works!\nNodeJS 22.18.0<\/code><\/pre>\n\n\n\n
Setelah memastikan nodejs nya berjalan, lakukan upload file project nextjs Anda di local ke folder nodejs apps yang baru saja Anda buat.<\/p>\n\n\n\n
Perhatian<\/strong>: Jangan mengupload dengan folder node_modules nya<\/p>\n\n\n\n
Setelah upload selesai, pada halaman aplikasi nodejs tadi yang Anda buat, klik tombol “Run NPM Install”, ini untuk menginstall package yang diperlukan sesuai package.json<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Jika sudah selesai, selanjutnya Anda perlu mengedit file app.js pada folder aplikasi nodejs yang sudah Anda buat dengan kode berikut:<\/p>\n\n\n\n
const { createServer } = require('http')\nconst { parse } = require('url')\nconst next = require('next')\n\nconst dev = process.env.NODE_ENV !== 'production'\nconst hostname = 'localhost'\nconst port = process.env.PORT || 3000\nconst app = next({ dev, hostname, port })\nconst handle = app.getRequestHandler()\n\napp.prepare().then(() => {\n  createServer(async (req, res) => {\n    try {\n      const parsedUrl = parse(req.url, true)\n      const { pathname, query } = parsedUrl\n\n      if (pathname === '\/a') {\n        await app.render(req, res, '\/a', query)\n      } else if (pathname === '\/b') {\n        await app.render(req, res, '\/b', query)\n      } else {\n        await handle(req, res, parsedUrl)\n      }\n    } catch (err) {\n      console.error('Error occurred handling', req.url, err)\n      res.statusCode = 500\n      res.end('internal server error')\n    }\n  }).listen(port, (err) => {\n    if (err) throw err\n    console.log(`> Ready on http:\/\/${hostname}:${port}`)\n  })\n})\n<\/pre><\/div>\n\n\n\n
Jika sudah, simpan.<\/p>\n\n\n\n
Dan selanjutnya terakhir yang perlu Anda lakukan Adalah restart kembali aplikasi nodejs nya.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Coba cek kemudian sesuai URL NodeJS app yang tadi sudah Anda tentukan, seharusnya jika kompatible dengan shared hosting, maka webnya sudah bisa diakses \ud83d\ude42<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Perhatian: NextJS menggunakan banyak resource, dan juga banyak module yang mungkin membutuhkan hak akses atau proses yang lebih tinggi dari yang disediakan di shared hosting. Jika kondisi demikian, kami sangat menganjurkan menggunakan VPS Managed Kami<\/a><\/strong>. Kami akan bantu setup VPS nya free tanpa biaya hingga aplikasi Anda jalan.<\/p>\n","protected":false},"excerpt":{"rendered":"
Di era modern ini, aplikasi web tidak hanya sekadar menampilkan konten statis; pengguna menginginkan interaksi yang cepat, pengalaman mulus, dan performa yang tinggi. Next.js hadir sebagai salah satu framework React yang memungkinkan developer membuat aplikasi server-side rendering (SSR) maupun static site generation (SSG), yang sangat optimal untuk SEO dan kecepatan loading. Namun, membuat aplikasi yang […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"rating_form_position":"","rating_results_position":"","mr_structured_data_type":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,802],"tags":[9,870,831],"class_list":["post-2542","post","type-post","status-publish","format-standard","hentry","category-hosting","category-pemrograman","tag-cpanel","tag-nextjs","tag-nodejs"],"jetpack_featured_media_url":"","multi-rating":{"mr_rating_results":[{"adjusted_star_result":0,"star_result":0,"total_max_option_value":5,"adjusted_score_result":0,"score_result":0,"percentage_result":0,"adjusted_percentage_result":0,"count":0,"post_id":2542}]},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.domosquare.com\/tutorial\/wp-json\/wp\/v2\/posts\/2542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.domosquare.com\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.domosquare.com\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.domosquare.com\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.domosquare.com\/tutorial\/wp-json\/wp\/v2\/comments?post=2542"}],"version-history":[{"count":2,"href":"https:\/\/www.domosquare.com\/tutorial\/wp-json\/wp\/v2\/posts\/2542\/revisions"}],"predecessor-version":[{"id":2551,"href":"https:\/\/www.domosquare.com\/tutorial\/wp-json\/wp\/v2\/posts\/2542\/revisions\/2551"}],"wp:attachment":[{"href":"https:\/\/www.domosquare.com\/tutorial\/wp-json\/wp\/v2\/media?parent=2542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.domosquare.com\/tutorial\/wp-json\/wp\/v2\/categories?post=2542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.domosquare.com\/tutorial\/wp-json\/wp\/v2\/tags?post=2542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}