🌐

Migrasi Website PHP ke Next.js

Jan 12, 2025

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.