Tutorial Deploy Next JS 15 ke Vercel Gratis & Custom Domain Freenom Lengkap

oleh

Apakah Anda baru saja menyelesaikan proyek web menggunakan Next.js 15 dan ingin mempublikasikannya agar bisa diakses oleh dunia secara gratis? Anda berada di tempat yang tepat. Dalam tutorial deploy Next JS 15 ke Vercel gratis custom domain Freenom ini, kita akan membahas langkah demi langkah secara mendalam, mulai dari inisialisasi proyek hingga pengaturan DNS.

Next.js 15 hadir dengan berbagai fitur mutakhir seperti dukungan React 19, optimasi caching yang lebih baik, dan performa server-side rendering yang semakin kencang. Namun, sebuah aplikasi hebat tidak akan berarti banyak jika tidak dideploy dengan benar. Vercel, sebagai pencipta Next.js, menawarkan platform hosting terbaik yang sangat terintegrasi, sementara Freenom (meskipun sering mengalami kendala teknis akhir-akhir ini) tetap menjadi pilihan populer bagi mereka yang mencari domain gratis seperti .tk atau .ml.

Persiapan Awal: Apa yang Anda Butuhkan?

Sebelum kita masuk ke teknis tutorial deploy Next JS 15 ke Vercel gratis custom domain Freenom, pastikan Anda telah menyiapkan beberapa akun dan tools berikut ini:

  • Node.js versi terbaru: Next.js 15 membutuhkan Node.js versi 18.17 atau lebih tinggi.
  • Akun GitHub: Digunakan untuk menyimpan kode sumber dan memicu deployment otomatis.
  • Akun Vercel: Platform hosting yang akan kita gunakan (gratis untuk penggunaan personal).
  • Akun Freenom: Untuk mendapatkan domain gratis (jika layanan sedang tersedia).
  • Text Editor: VS Code sangat direkomendasikan.

Mengenal Next.js 15 dan Keunggulannya

Next.js 15 adalah lompatan besar dalam ekosistem pengembangan web. Beberapa fitur utama yang membuatnya unggul meliputi Async Request APIs, peningkatan pada Turbopack untuk build time yang lebih cepat, serta integrasi penuh dengan React 19. Mengapa ini penting untuk SEO? Karena performa adalah salah satu metrik utama Google (Core Web Vitals).

“Performa aplikasi web yang menggunakan Next.js 15 secara signifikan lebih stabil dibandingkan versi sebelumnya, terutama dalam menangani dynamic rendering yang kompleks.”

Langkah 1: Membuat Project Next.js 15

Langkah pertama dalam tutorial deploy Next JS 15 ke Vercel gratis custom domain Freenom adalah membuat proyeknya terlebih dahulu. Buka terminal Anda dan jalankan perintah berikut:

npx create-next-app@latest my-awesome-project

Pilih opsi berikut saat diminta:

  • Would you like to use TypeScript? Yes
  • Would you like to use ESLint? Yes
  • Would you like to use Tailwind CSS? Yes
  • Would you like to use `src/` directory? Yes
  • Would you like to use App Router? (recommended) Yes
  • Would you like to customize the default import alias? No

Setelah proses instalasi selesai, masuk ke direktori proyek dan jalankan server lokal untuk memastikan semuanya berjalan lancar:

cd my-awesome-project && npm run dev

Langkah 2: Push Project ke GitHub

Vercel bekerja paling baik dengan sistem Continuous Deployment (CD) melalui GitHub. Setiap kali Anda melakukan push kode, Vercel akan secara otomatis melakukan build ulang.

  1. Buka GitHub dan buat repository baru dengan nama yang sama.
  2. Inisialisasi git di folder lokal Anda: git init.
  3. Tambahkan semua file: git add ..
  4. Commit perubahan: git commit -m "Initial commit Next.js 15".
  5. Hubungkan ke remote repository dan push: git remote add origin [URL_REPO_ANDA] && git push -u origin main.

Langkah 3: Deploy ke Vercel secara Gratis

Sekarang saatnya melakukan deployment pertama. Ikuti langkah-langkah di bawah ini:

  1. Login ke Vercel Dashboard menggunakan akun GitHub Anda.
  2. Klik tombol “Add New” lalu pilih “Project”.
  3. Cari repository yang baru saja Anda push dan klik “Import”.
  4. Pada bagian “Configure Project”, biarkan pengaturan default karena Vercel sudah mengenali Next.js secara otomatis.
  5. Klik “Deploy”.

Tunggu sekitar 1-2 menit. Jika berhasil, Anda akan mendapatkan URL default dari Vercel seperti my-awesome-project.vercel.app. Namun, tujuan kita adalah menggunakan custom domain gratis.

Langkah 4: Mendapatkan Domain di Freenom

Bagian ini adalah inti dari tutorial deploy Next JS 15 ke Vercel gratis custom domain Freenom. Freenom menyediakan domain gratis dengan ekstensi .TK, .ML, .GA, .CF, dan .GQ.

Catatan Penting: Freenom terkadang mengalami masalah pendaftaran bagi pengguna baru. Jika Anda kesulitan, pertimbangkan menggunakan domain murah atau layanan alternatif seperti DNS.js.

  1. Kunjungi Freenom.com.
  2. Cari nama domain yang Anda inginkan di kotak pencarian.
  3. Jika tersedia, klik “Get it now” dan lanjut ke “Checkout”.
  4. Pilih periode “12 Months @ FREE” agar Anda tidak perlu membayar.
  5. Selesaikan proses pendaftaran dan verifikasi email Anda.

Langkah 5: Menghubungkan Custom Domain ke Vercel

Setelah memiliki domain, kita perlu menghubungkannya dengan server Vercel. Ini melibatkan sinkronisasi DNS (Domain Name System).

Konfigurasi di Vercel

  1. Di Dashboard Vercel, buka proyek Anda.
  2. Klik tab “Settings” lalu pilih menu “Domains”.
  3. Masukkan nama domain yang Anda dapatkan dari Freenom (contoh: domainku.tk) dan klik “Add”.
  4. Vercel akan menampilkan daftar DNS records yang perlu Anda tambahkan di sisi Freenom. Biasanya berupa A Record atau CNAME Record.

Konfigurasi di Freenom

  1. Login ke akun Freenom Anda.
  2. Buka Services > My Domains.
  3. Klik tombol Manage Domain pada domain yang diinginkan.
  4. Pilih tab Management Tools > Freenom DNS.
  5. Tambahkan record yang diminta oleh Vercel tadi. Contoh:
    • Type: A, Name: @, Target: 76.76.21.21
    • Type: CNAME, Name: www, Target: cname.vercel-dns.com
  6. Klik Save Changes.

Proses propagasi DNS biasanya memakan waktu antara 10 menit hingga 24 jam. Setelah selesai, status di Dashboard Vercel akan berubah menjadi hijau (Valid Configuration).

Tips Optimasi SEO untuk Next.js 15

Memiliki website yang live saja tidak cukup. Anda ingin website tersebut muncul di halaman pertama Google. Berikut adalah beberapa tips optimasi SEO khusus untuk Next.js 15:

  • Gunakan Metadata API: Next.js 15 memudahkan pengelolaan tag title dan meta description secara dinamis di dalam file layout.tsx atau page.tsx.
  • Optimasi Gambar: Selalu gunakan komponen <Image /> dari Next.js untuk kompresi otomatis dan lazy loading.
  • Sitemap & Robots.txt: Gunakan library seperti next-sitemap untuk menghasilkan file sitemap secara otomatis guna membantu crawling Google.
  • Server-Side Rendering (SSR): Manfaatkan SSR untuk konten yang sering berubah agar mesin pencari selalu mendapatkan versi terbaru dari halaman Anda.

Troubleshooting dan Masalah Umum

Dalam menjalankan tutorial deploy Next JS 15 ke Vercel gratis custom domain Freenom, Anda mungkin menemui beberapa kendala:

Masalah Solusi
Domain Freenom Error “Not Available” Coba gunakan VPN atau cari nama domain yang lebih unik. Freenom sering memblokir kata kunci populer.
Vercel Build Failed Periksa log di Vercel. Biasanya karena perbedaan versi Node.js atau file yang lupa di-push ke GitHub.
SSL Certificate Pending Tunggu hingga propagasi DNS selesai. Vercel akan menerbitkan sertifikat SSL Let’s Encrypt secara otomatis.

Kesimpulan dan Langkah Selanjutnya

Selamat! Anda telah berhasil mengikuti tutorial deploy Next JS 15 ke Vercel gratis custom domain Freenom. Sekarang aplikasi web Anda tidak hanya memiliki performa tinggi berkat teknologi Next.js 15, tetapi juga terlihat profesional dengan custom domain sendiri tanpa mengeluarkan biaya sepeser pun.

Langkah selanjutnya adalah terus memperbarui konten website Anda dan memantau performanya melalui Google Search Console. Jangan lupa untuk selalu mengoptimalkan Core Web Vitals agar peringkat SEO Anda tetap terjaga.

Jika Anda merasa artikel ini bermanfaat, silakan bagikan kepada rekan developer lainnya. Selamat berkarya!

Tinggalkan komentar