Membuat dan Menjalankan Proyek Next.js di ServBay

Ringkasan

Next.js adalah framework React yang sangat kuat, dikembangkan dan dikelola oleh Vercel, yang banyak digunakan untuk membangun aplikasi web modern dan berperforma tinggi. Framework ini menyediakan banyak fitur siap pakai di atas React, sehingga proses pengembangan aplikasi yang kompleks menjadi jauh lebih sederhana untuk para developer.

Apa itu Next.js?

Next.js adalah framework React open source yang populer, mendukung berbagai metode rendering seperti server-side rendering (SSR) dan static site generation (SSG). Fitur-fitur ini membantu meningkatkan performa aplikasi, memperbaiki pengalaman pengguna, dan mengoptimalkan visibilitas di mesin pencari. Next.js memiliki routing berbasis file system, API route, code splitting, dukungan CSS Modules, dan masih banyak fitur lainnya yang memberikan pengalaman pengembangan secara menyeluruh.

Fitur Utama dan Keunggulan Next.js

• Mendukung Berbagai Strategi Rendering: Mendukung server-side rendering (SSR), static site generation (SSG), client-side rendering (CSR), hingga metode mix rendering, sehingga developer bisa memilih mode rendering yang paling sesuai dengan kebutuhan.
• Routing Berbasis File System: Otomatis membuat route berdasarkan struktur direktori pages atau app, mudah dan intuitif.
• API Route: Memungkinkan pembuatan API endpoint langsung di proyek Next.js, memudahkan pengembangan fullstack terintegrasi.
• Code Splitting Otomatis: Pemisahan kode per halaman, hanya JavaScript yang diperlukan untuk halaman tersebut yang di-load, mempercepat waktu akses.
• Optimasi Gambar dengan Komponen (next/image): Gambar akan dioptimasi secara ukuran, format, hingga strategi loading, demi performa maksimal.
• Dukungan CSS dan Sass Bawaan: Memudahkan pengelolaan serta penulisan style.
• Fast Refresh: Memberikan pengalaman update kode secara instan selama proses pengembangan.

Dengan Next.js, developer dapat membangun aplikasi web modern yang cepat, scalable, dan mudah dikelola secara efisien.

Menjalankan Proyek Next.js Menggunakan ServBay

ServBay menyediakan lingkungan pengembangan web lokal yang terintegrasi, mencakup Node.js dan berbagai bahasa serta tools lainnya. Dengan memanfaatkan lingkungan Node.js ServBay serta fitur manajemen Website (termasuk reverse proxy dan layanan file statis), Anda dapat dengan mudah membuat, mengembangkan, dan melakukan deployment proyek Next.js.

Panduan ini akan membimbing Anda untuk membuat proyek Next.js di lingkungan ServBay, menjalankan dalam mode development (melalui reverse proxy), serta deployment dalam mode produksi (menggunakan layanan file statis).

Persyaratan Awal

Sebelum mulai, pastikan Anda telah melakukan hal-hal berikut:

1. ServBay sudah terinstal dengan sukses di macOS Anda.
2. Paket Node.js yang diperlukan sudah diinstal dan diaktifkan via antarmuka manajemen Package di ServBay. Jika Node.js belum terinstal, silakan lihat dokumentasi Menggunakan Lingkungan Node.js di ServBay.

Langkah-langkah Operasional

1. Membuat Proyek Next.js

Pertama, kita perlu menginisialisasi proyek Next.js baru.

1. Buka Terminal dan pindah ke direktori root Website default milik ServBay:

   cd /Applications/ServBay/www

2. Inisialisasi proyek dengan create-next-app: Jalankan perintah di bawah untuk membuat proyek Next.js baru. Kami sarankan memakai nama proyek servbay-next-app; folder ini akan dibuat di dalam /Applications/ServBay/www.

   npx create-next-app@latest servbay-next-app

   npx adalah tool untuk menjalankan perintah paket Node.js, dan create-next-app@latest menggunakan tool inisialisasi Next.js versi terbaru. Ikuti instruksi di Terminal untuk pengaturan awal proyek (misal memilih penggunaan TypeScript, ESLint, Tailwind CSS, App Router, dsb).

3. Masuk ke direktori proyek dan instal dependensi:

   cd servbay-next-app
   npm install

   Perintah npm install akan menginstal seluruh dependensi proyek sesuai definisi di file package.json.

2. Ubah Output Proyek (Opsional)

Untuk memastikan proyek berjalan dengan baik, Anda dapat memodifikasi halaman utama.

1. Buka file pages/index.js (jika Anda memilih Pages Router). Jika memakai App Router, buka file app/page.js. Contoh berikut untuk Pages Router:

   # Pakai editor favorit Anda, misal VS Code
   code pages/index.js

2. Ubah isi file sehingga halaman utama menampilkan "Hello ServBay!". Ganti/ubah struktur file menjadi seperti berikut:

   // pages/index.js (Pages Router)
   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
         <p>Halaman ini dijalankan melalui ServBay.</p>
       </div>
     );
   }

   Jika memakai App Router (app/page.js), strukturnya bisa sedikit berbeda, namun prinsip perubahan pada tag <h1> tetap sama.

3. Masuk Mode Pengembangan

Saat proses development, kita biasanya menggunakan server pengembangan Next.js, yang mendukung hot module replacement (HMR) dan fast refresh sehingga perubahan kode dapat segera dilihat. Fitur reverse proxy ServBay sangat ideal untuk menghubungkan domain lokal dengan server pengembangan Next.js.

1. Jalankan server development Next.js: Dari root proyek (/Applications/ServBay/www/servbay-next-app), jalankan:

   npm run dev -- -p 8585

   Perintah ini mengaktifkan server development Next.js pada port 8585 lokal menggunakan opsi -- -p 8585. Anda bisa mengganti port sesuai kebutuhan asalkan belum dipakai proses lain.

2. Konfigurasi Website di ServBay (Reverse Proxy): Buka aplikasi ServBay, masuk menu Website Management. Tambahkan website baru dengan pengaturan:

   • Nama (Name): My first Next.js dev site (atau nama lain sesuai selera)
   • Domain: servbay-next-dev.servbay.demo (direkomendasikan memakai akhiran .servbay.demo untuk domain pengujian lokal)
   • Tipe Website (Website Type): Pilih Reverse Proxy
   • Proxy IP: 127.0.0.1 (loopback/localhost)
   • Proxy Port: 8585 (port server Next.js yang dijalankan di atas)

   Setelah konfigurasi, simpan lalu apply perubahan sehingga ServBay otomatis mengonfigurasi Caddy atau Nginx (sesuai setting ServBay) untuk menangani request ke servbay-next-dev.servbay.demo dan meneruskannya ke 127.0.0.1:8585.

   Panduan lengkap tersedia di dokumentasi Menambahkan Website Pengembangan Node.js di ServBay.

3. Akses Website Mode Pengembangan: Buka browser dan akses domain yang tadi dikonfigurasikan, https://servbay-next-dev.servbay.demo.

   Berkat ServBay yang secara default menyediakan dan memasang sertifikat SSL otomatis (menggunakan ServBay User CA) untuk setiap domain lokal yang ditambahkan, Anda dapat mengakses website lokal Anda secara aman lewat HTTPS tanpa peringatan browser. ServBay juga mendukung custom domain serta sertifikat SSL gratis, yang sangat berguna saat pengembangan lokal.

4. Build Produksi dan Deploy sebagai Situs Statis

Saat pengembangan sudah selesai dan siap deployment, biasanya kita akan melakukan build versi produksi yang sudah dioptimalkan. Untuk proyek Next.js yang menghasilkan output statis (output: 'export' atau perintah next export), layanan file statis ServBay adalah opsi terbaik.

1. Build Next.js untuk produksi dan export file statis: Dari root proyek (/Applications/ServBay/www/servbay-next-app), jalankan:

   npm run build
   npm run export

   • Perintah npm run build akan mengompilasi kode Next.js dan menghasilkan build optimal di direktori .next.
   • npm run export (sesuai konfigurasi Next.js atau untuk versi lama) atau set output: 'export' pada konfigurasi Next.js, akan mengekspor aplikasi menjadi file-file HTML, CSS dan JavaScript statis di folder out.

2. Konfigurasi Website ServBay (Layanan File Statis): Masuk ke ServBay, buka menu Website Management, lalu tambahkan website baru dengan data berikut:

   • Nama (Name): My first Next.js production site (atau nama lain)
   • Domain: servbay-next-prod.servbay.demo (gunakan akhiran .servbay.demo)
   • Tipe Website: Pilih Static
   • Root Website: Masukkan path penuh folder statis hasil export Next.js, yaitu /Applications/ServBay/www/servbay-next-app/out.

   Selesai diatur, simpan dan apply sehingga ServBay mengonfigurasi web server untuk melayani file langsung dari /Applications/ServBay/www/servbay-next-app/out.

3. Akses Website Mode Produksi: Buka browser, akses domain https://servbay-next-prod.servbay.demo. Anda akan melihat situs statis hasil build dan export proyek Next.js Anda.

   Dengan fitur custom domain dan konfigurasi SSL otomatis dari ServBay, website lingkungan produksi lokal Anda juga dapat diakses aman via HTTPS.

Kesimpulan

Melalui langkah-langkah di atas, Anda telah berhasil membuat proyek Next.js di lingkungan pengembangan lokal ServBay, memanfaatkan fitur reverse proxy ServBay untuk pratinjau real-time di mode development, serta melakukan deployment versi produksi menggunakan layanan file statis ServBay. Lingkungan terintegrasi dan fitur manajemen Website di ServBay secara signifikan menyederhanakan proses pengembangan dan pengujian lokal untuk proyek Next.js Anda.