Catatan Kuliah: Migrasi Website dari PHP ke Next.js

Pendahuluan

• Mengganti website dari PHP ke Next.js.
• Website yang dimaksud: dirumahrafif.id
• Berisi kursus premium dan gratis.

Alasan Migrasi

1. Meringkas Proses
   • Update data lebih mudah tanpa menggunakan cPanel.
   • Hanya perlu edit di GitHub dan push perubahan.
2. Menghemat Biaya
   • Hosting tahunan mahal untuk konten yang tidak banyak.
   • Dengan Next.js, bisa deploy di Vercel, cukup bayar domain.
3. Belajar Next.js
   • Kesempatan untuk belajar framework baru.

Proses Migrasi

Persiapan

• Install Node.js sebagai runtime untuk JavaScript.
• Buat project Next.js dengan perintah: npx create-next-app@latest

Menggunakan Font Awesome

• Install Font Awesome: npm install --save font-awesome font-awesome-svg-core

Struktur Komponen

• Gunakan komponen untuk membangun website:
  • Komponen: about me, free course, premium course, statistik, header, hero
• Setiap komponen dipanggil di halaman page.js.

Routing di Next.js

• Routing berbasis file:
  • Misal: dirumahrafif.id/course mengarah ke halaman course.
  • Buat folder dan file sesuai struktur routing.
• Dynamic Routing menggunakan tanda kurung siku.

Deploy ke Vercel

1. Upload ke GitHub
   • Project diupload ke GitHub sebagai private.
2. Sambungkan ke Vercel
   • Login di vercel.com dan tambah proyek baru.
   • Pilih project dari GitHub.
   • Atur domain yang diinginkan (misal: dirumahrafif.id).

Mengatur Domain

• Masukkan name server dari Vercel ke penyedia layanan domain (contoh: Rumah Web).
• Pastikan pengaturan name server selesai agar website bisa diakses dengan domain yang diinginkan.

Proses Update

• Untuk melakukan perubahan:
  1. Edit di lokal.
  2. Commit dan push ke GitHub.
  3. Tunggu proses deploy di Vercel selesai.
• Contoh perubahan lokasi di about me dilakukan dengan command: git add . git commit -m "Perubahan lokasi about me" git push origin main

Penutup

• Setelah deploy, perubahan akan langsung terlihat di website.
• Terima kasih atas perhatian, Wassalamualaikum Wr. Wb.