Qaplo - Migrasi website portal berita dari WordPress ke Next.js itu bukan sekadar pindah rumah. Kalau website biasa mungkin cukup ekspor konten, impor data, lalu beres. Tapi untuk portal berita, urusannya jauh lebih sensitif. Ada ribuan
Qaplo - Migrasi website portal berita dari WordPress ke Next.js itu bukan sekadar pindah rumah. Kalau website biasa mungkin cukup ekspor konten, impor data, lalu beres. Tapi untuk portal berita, urusannya jauh lebih sensitif. Ada ribuan artikel, kategori, tag, penulis, gambar unggulan, struktur URL, komentar, iklan, halaman AMP, sitemap, sampai posisi artikel di Google News dan Discover yang bisa kena dampaknya kalau proses migrasi dilakukan asal-asalan.
Banyak pemilik media online tergoda pindah ke Next.js karena alasan performa. Halaman lebih cepat, Core Web Vitals lebih mudah dikontrol, desain lebih fleksibel, dan struktur frontend bisa dibuat jauh lebih modern. Namun, kalau pondasinya tidak disiapkan, migrasi justru bisa membuat trafik turun, indeks Google berantakan, iklan tidak tampil normal, bahkan artikel lama hilang dari hasil pencarian.
Artikel ini membahas tutorial lengkap migrasi portal berita dari WordPress ke Next.js dengan pendekatan yang aman, rapi, dan realistis. Gaya bahasanya kita buat santai saja, seperti ngobrol di warung kopi daerah Jakarta Selatan, tapi isinya tetap teknis dan bisa langsung dipraktikkan.
Kenapa Portal Berita Mulai Banyak Melirik Next.js?
WordPress memang masih sangat kuat untuk portal berita. Ekosistemnya besar, plugin melimpah, editor mudah digunakan, dan tim redaksi biasanya sudah familiar. Tapi seiring website makin besar, masalah klasik mulai muncul. Server berat, plugin terlalu banyak, halaman lambat, database membengkak, dan tampilan sulit dikembangkan tanpa menyentuh banyak file tema.
Next.js menawarkan pendekatan berbeda. WordPress bisa tetap dipakai sebagai backend atau CMS, sementara tampilan depan website dibangun menggunakan Next.js. Model ini sering disebut headless WordPress. Jadi, redaksi tetap menulis artikel di dashboard WordPress, tetapi pembaca mengakses halaman frontend yang dibuat dengan Next.js.
Keuntungannya cukup jelas. Website bisa lebih cepat, desain lebih bebas, komponen lebih modular, dan pengelolaan SEO teknis bisa dibuat lebih presisi. Untuk portal berita yang mengejar Google Search, Google News, Discover, dan performa mobile, kombinasi ini cukup menarik.
Namun perlu dicatat, Next.js bukan obat ajaib. Kalau struktur migrasinya buruk, hasilnya tetap buruk. Bahkan bisa lebih rumit daripada WordPress biasa.
Tahap 1: Audit Website WordPress Sebelum Migrasi
Sebelum menulis satu baris kode Next.js, langkah pertama adalah audit. Jangan langsung bongkar website lama. Portal berita biasanya punya banyak aset penting yang tidak boleh hilang.
Mulailah dengan mencatat struktur utama website WordPress. Periksa format URL artikel, kategori, tag, penulis, halaman statis, halaman pencarian, arsip tanggal, sitemap, robots.txt, canonical, schema, dan struktur breadcrumb.
Contoh struktur lama:
https://domain.com/2025/08/21/judul-berita/
atau:
https://domain.com/news/judul-berita/
atau:
https://domain.com/daerah/judul-berita/
Struktur ini sangat penting. Kalau URL lama sudah punya trafik dan backlink, sebaiknya jangan diubah sembarangan. Banyak kasus migrasi gagal bukan karena Next.js-nya jelek, tetapi karena URL artikel berubah tanpa redirect 301 yang benar.
Selain URL, cek juga jumlah artikel, ukuran database, jumlah gambar, plugin SEO yang dipakai, plugin cache, plugin iklan, plugin schema, dan plugin AMP. Catat mana yang masih dibutuhkan dan mana yang harus diganti dengan implementasi manual di Next.js.
Tahap 2: Tentukan Model Migrasi
Ada dua model migrasi yang umum dipakai.
Pertama, WordPress tetap menjadi CMS. Ini pilihan paling aman untuk portal berita aktif. Redaksi tetap login ke WordPress, menulis berita, mengatur kategori, tag, penulis, dan upload gambar seperti biasa. Next.js hanya mengambil data dari WordPress melalui REST API atau GraphQL.
Kedua, WordPress ditinggalkan sepenuhnya. Konten diekspor ke CMS baru, database baru, atau sistem custom. Model ini lebih berat dan cocok kalau tim teknis sudah matang. Untuk kebanyakan portal berita, model pertama lebih realistis.
Kalau targetnya migrasi tanpa mengganggu kerja redaksi, gunakan headless WordPress. Dengan cara ini, backend tetap stabil, sementara frontend bisa dikembangkan bertahap.
Tahap 3: Siapkan API WordPress
Next.js membutuhkan sumber data. Di WordPress, data bisa diambil menggunakan REST API bawaan atau GraphQL melalui plugin seperti WPGraphQL.
REST API lebih sederhana dan langsung tersedia. Contoh endpoint artikel:
/wp-json/wp/v2/posts
Kategori:
/wp-json/wp/v2/categories
Tag:
/wp-json/wp/v2/tags
Media:
/wp-json/wp/v2/media
Namun, REST API kadang kurang fleksibel untuk kebutuhan kompleks. Misalnya ingin mengambil artikel lengkap beserta kategori, tag, author, dan featured image dalam satu request. Di sini GraphQL bisa lebih enak karena query bisa disesuaikan.
Untuk portal berita besar, sebaiknya buat endpoint custom atau optimasi response API. Jangan sampai halaman artikel memanggil terlalu banyak endpoint hanya untuk menampilkan satu berita. Ini bisa membuat frontend cepat di sisi tampilan, tapi lambat di sisi data fetching.
Tahap 4: Bangun Struktur Project Next.js
Buat project Next.js baru. Untuk kebutuhan portal berita modern, App Router bisa digunakan karena lebih fleksibel untuk metadata, layout, dan rendering.
Struktur folder sederhana bisa seperti ini:
app/
page.tsx
berita/
[slug]/
page.tsx
kategori/
[slug]/
page.tsx
tag/
[slug]/
page.tsx
author/
[slug]/
page.tsx
search/
page.tsx
components/
header/
footer/
article/
sidebar/
ads/
seo/
lib/
wordpress.ts
seo.ts
helpers.ts
Pisahkan komponen dengan rapi. Portal berita biasanya punya banyak bagian berulang seperti header, menu kategori, breaking news, latest news, popular news, related posts, breadcrumb, widget iklan, dan sidebar. Kalau semua ditulis dalam satu file, project akan cepat berantakan.
Tahap 5: Pertahankan Struktur URL Lama
Ini bagian yang paling penting. Kalau URL WordPress lama adalah:
/kategori/judul-berita/
maka di Next.js usahakan tetap sama.
Kalau URL lama memakai tanggal:
/2025/08/21/judul-berita/
maka buat routing yang mampu membaca struktur tersebut. Jangan asal mengganti menjadi:
/berita/judul-berita/
kecuali benar-benar siap membuat redirect 301 dari semua URL lama ke URL baru.
Untuk portal berita, mempertahankan URL lama biasanya lebih aman daripada mengubah total. Google sudah mengenali pola lama, pengguna mungkin menyimpan link lama, dan backlink dari website lain juga mengarah ke URL tersebut.
Tahap 6: Migrasi Metadata SEO
Di WordPress, metadata biasanya dikelola oleh plugin seperti Yoast SEO, Rank Math, atau All in One SEO. Saat pindah ke Next.js, metadata ini harus tetap dibawa.
Yang perlu diperhatikan:
Title SEO harus sama atau lebih baik dari versi lama. Meta description jangan hilang. Canonical harus benar. Open Graph untuk Facebook dan WhatsApp harus tampil. Twitter Card juga perlu disiapkan. Untuk artikel berita, publish date dan modified date harus jelas.
Di Next.js, metadata bisa dibuat secara dinamis berdasarkan data artikel. Misalnya halaman artikel mengambil title, excerpt, featured image, tanggal publikasi, nama author, kategori, dan slug, lalu menghasilkan metadata secara otomatis.
Jangan lupa, featured image sangat penting untuk portal berita. Gambar ini bukan hanya untuk tampilan artikel, tetapi juga untuk sharing media sosial dan potensi tampil di Google Discover.
Tahap 7: Schema Artikel Berita
Portal berita sebaiknya menggunakan schema NewsArticle atau Article, tergantung jenis kontennya. Schema harus memuat headline, description, image, datePublished, dateModified, author, publisher, dan logo publisher.
Di WordPress, schema biasanya dibuat otomatis oleh plugin SEO. Di Next.js, Anda harus membuatnya sendiri dalam bentuk JSON-LD.
Contoh data yang wajib dijaga:
Nama media harus konsisten. Logo publisher harus valid. Tanggal publikasi tidak boleh kosong. Tanggal update harus sesuai. Author sebaiknya jelas, bukan sekadar “admin”. Gambar artikel harus bisa diakses Google.
Schema bukan jaminan artikel langsung naik ranking, tapi schema membantu mesin pencari memahami struktur konten. Untuk portal berita, ini bukan aksesori, tapi bagian penting dari SEO teknis.
Tahap 8: Migrasi Gambar dan Media
Masalah gambar sering diremehkan. Banyak portal berita punya puluhan ribu gambar di folder uploads WordPress. Saat migrasi ke Next.js, jangan sampai URL gambar lama mati.
Ada beberapa pilihan. Pertama, tetap gunakan gambar dari domain WordPress lama. Kedua, pindahkan semua gambar ke storage baru seperti S3, Cloudflare R2, atau server media sendiri. Ketiga, gunakan CDN agar gambar lebih cepat diakses.
Kalau gambar tetap di WordPress, pastikan domain gambar diizinkan di konfigurasi next.config.js. Kalau gambar dipindahkan, buat mapping URL lama ke URL baru agar artikel lama tidak kehilangan gambar.
Untuk berita, gambar bukan sekadar pemanis. Banyak artikel mendapatkan klik karena thumbnail. Kalau gambar rusak, CTR bisa turun.
Tahap 9: Buat Halaman Kategori, Tag, dan Author
Portal berita tidak hanya bergantung pada halaman artikel. Halaman kategori juga sangat penting. Misalnya kategori Nasional, Daerah, Politik, Ekonomi, Olahraga, Hiburan, dan Teknologi.
Setiap halaman kategori harus memiliki title, meta description, pagination, daftar artikel terbaru, dan struktur internal linking yang jelas.
Halaman tag juga bisa membantu, tetapi jangan dibuat asal banyak. Tag yang terlalu tipis bisa menjadi masalah kualitas. Lebih baik tampilkan tag yang memang punya cukup artikel dan relevan.
Halaman author juga penting, terutama jika website ingin membangun kepercayaan. Tampilkan nama penulis, foto jika ada, bio singkat, dan daftar artikel yang pernah ditulis.
Tahap 10: Pagination Jangan Sampai Merusak Crawling
Portal berita punya banyak halaman arsip. Kalau pagination buruk, Google sulit menjangkau artikel lama.
Gunakan pagination yang jelas, misalnya:
/kategori/nasional/page/2/
atau:
/kategori/nasional?page=2
Pastikan link halaman berikutnya bisa dirayapi. Jangan hanya mengandalkan tombol “Load More” berbasis JavaScript tanpa fallback link. Untuk pengguna mungkin enak, tapi untuk crawling belum tentu ideal.
Kalau menggunakan infinite scroll, tetap sediakan URL paginated agar mesin pencari bisa memahami struktur arsip.
Tahap 11: Internal Linking Wajib Diperkuat
Migrasi adalah momen yang bagus untuk memperbaiki internal linking. Portal berita harus punya hubungan antarartikel yang rapi.
Tambahkan widget seperti berita terkait, baca juga, berita terbaru, berita populer, dan artikel dari kategori yang sama. Tapi jangan asal tempel. Buat logika yang masuk akal.
Misalnya artikel politik sebaiknya menampilkan berita terkait dari kategori politik atau tag yang sama. Artikel daerah bisa menampilkan berita lain dari daerah yang sama. Artikel ekonomi bisa menampilkan update terkait pasar, bisnis, atau kebijakan.
Internal linking membantu pembaca menjelajah lebih lama dan membantu mesin pencari menemukan konten lebih dalam.
Tahap 12: Iklan dan Monetisasi
Bagi portal berita, iklan adalah sumber hidup. Saat migrasi ke Next.js, posisi iklan harus direncanakan dari awal.
Jangan hanya memindahkan script AdSense atau ad manager lalu berharap semuanya normal. Periksa posisi iklan di homepage, halaman artikel, sidebar, tengah artikel, bawah artikel, dan sticky ads jika digunakan.
Pastikan script iklan tidak merusak performa. Gunakan lazy loading jika memungkinkan. Hindari layout shift besar karena slot iklan yang tidak memiliki ukuran tetap. Untuk Core Web Vitals, iklan sering menjadi sumber masalah CLS.
Buat komponen iklan khusus agar pengelolaannya mudah. Misalnya komponen AdSlot, InArticleAd, SidebarAd, dan StickyMobileAd.
Tahap 13: Komentar dan Fitur Interaksi
Jika portal lama memakai komentar WordPress, tentukan apakah komentar akan tetap digunakan. Komentar bisa diambil dari WordPress API, menggunakan sistem custom, atau diganti layanan pihak ketiga.
Namun untuk portal berita, komentar perlu moderasi kuat. Jangan sampai migrasi membuat komentar spam ikut tampil semua. Kalau komentar lama penting, migrasikan dengan hati-hati. Kalau tidak terlalu penting, tampilkan sistem komentar baru yang lebih ringan.
Fitur lain seperti reaction, share button, bookmark, dan newsletter juga bisa ditambahkan bertahap.
Tahap 14: Redirect 301
Kalau ada perubahan URL, redirect 301 wajib dibuat. Ini bukan opsional.
Buat daftar URL lama dan URL baru. Untuk portal kecil, mapping bisa dibuat manual. Untuk portal besar, buat pola redirect berdasarkan struktur lama.
Contoh:
/2024/05/10/judul-artikel/ diarahkan ke /berita/judul-artikel/
Pastikan redirect hanya satu kali. Jangan membuat rantai redirect seperti URL A ke B, lalu B ke C. Ini memperlambat akses dan bisa membingungkan crawler.
Setelah redirect dibuat, uji menggunakan beberapa artikel lama, kategori, tag, dan halaman statis.
Tahap 15: Sitemap dan Robots.txt
Setelah Next.js aktif, sitemap harus dibuat ulang. Portal berita sebaiknya memiliki beberapa jenis sitemap.
Ada sitemap artikel umum, sitemap kategori, sitemap tag penting, sitemap halaman statis, dan sitemap berita jika memang dibutuhkan untuk artikel terbaru.
Sitemap tidak boleh berisi URL error, URL redirect, atau URL noindex. Hanya masukkan URL final yang benar-benar ingin diindeks.
Robots.txt juga harus dicek. Jangan sampai saat staging, website diberi Disallow: /, lalu lupa diubah saat live. Kesalahan kecil seperti ini bisa membuat website hilang dari indeks.
Tahap 16: Testing Sebelum Go Live
Sebelum domain diarahkan ke Next.js, lakukan testing menyeluruh.
Cek halaman homepage, artikel, kategori, tag, author, pencarian, pagination, sitemap, robots.txt, schema, Open Graph, canonical, redirect, iklan, gambar, dan tampilan mobile.
Gunakan beberapa contoh artikel lama yang punya trafik tinggi. Bandingkan title, meta description, canonical, schema, gambar, dan struktur heading dengan versi WordPress lama.
Jangan hanya tes di desktop. Mayoritas pembaca berita datang dari mobile. Buka di Chrome Android, mode normal, mode desktop, koneksi lambat, dan berbagai ukuran layar.
Tahap 17: Go Live dengan Strategi Bertahap
Waktu go live sebaiknya dipilih saat trafik tidak terlalu tinggi. Hindari jam sibuk. Untuk portal berita lokal, biasanya dini hari lebih aman.
Backup semua data sebelum migrasi. Simpan salinan database WordPress, file uploads, konfigurasi server, dan source code lama.
Setelah go live, pantau error server, halaman 404, trafik realtime, indeks Google, iklan, dan performa halaman. Jangan langsung santai. Masa 24 sampai 72 jam pertama sangat penting.
Jika ditemukan banyak 404, segera perbaiki redirect. Jika gambar banyak yang rusak, cek konfigurasi domain image. Jika iklan tidak muncul, cek script dan policy loading.
Tahap 18: Pantau Google Search Console
Setelah migrasi, Google Search Console harus dipantau setiap hari. Perhatikan laporan indexing, sitemap, page experience, rich results, dan performa query.
Penurunan kecil mungkin terjadi karena Google perlu membaca ulang struktur website. Tapi kalau penurunan terlalu besar, biasanya ada masalah teknis.
Hal yang perlu dicek:
Apakah banyak halaman menjadi 404? Apakah canonical salah? Apakah sitemap berisi URL lama? Apakah halaman artikel terblokir robots.txt? Apakah meta noindex tidak sengaja aktif? Apakah schema error? Apakah server sering timeout?
Migrasi yang baik bukan berarti tidak ada masalah sama sekali, tetapi masalahnya bisa cepat ditemukan dan diselesaikan.
Kesalahan Umum Saat Migrasi WordPress ke Next.js
Kesalahan paling sering adalah terlalu fokus pada tampilan. Desain baru memang penting, tapi portal berita hidup dari konten, trafik, dan indeks. Tampilan cantik tidak ada gunanya kalau URL lama rusak.
Kesalahan lain adalah menghapus struktur kategori lama tanpa strategi. Banyak website berita punya kekuatan SEO dari kategori. Kalau kategori tiba-tiba hilang, internal linking ikut melemah.
Ada juga yang lupa memindahkan metadata SEO. Akibatnya ribuan artikel tampil dengan title default, description kosong, atau canonical salah.
Kesalahan berikutnya adalah membuat frontend Next.js terlalu bergantung pada client-side rendering. Untuk halaman artikel berita, sebaiknya konten utama tersedia dari server-rendered HTML agar mudah dibaca mesin pencari dan cepat tampil untuk pengguna.
Kesimpulan
Migrasi portal berita dari WordPress ke Next.js bisa menjadi langkah besar untuk meningkatkan performa, fleksibilitas, dan pengalaman pembaca. Tapi proses ini harus dilakukan dengan rencana matang. Jangan anggap migrasi hanya pekerjaan developer frontend. Ini pekerjaan gabungan antara teknis, SEO, editorial, server, dan monetisasi.
Gunakan WordPress sebagai CMS jika tim redaksi masih nyaman dengan dashboard lama. Bangun frontend Next.js dengan struktur URL yang aman, metadata lengkap, schema valid, sitemap bersih, redirect rapi, dan performa mobile yang kuat.
Intinya, jangan pindah rumah sambil membuang alamat lama. Untuk portal berita, alamat lama adalah aset. Artikel lama, kategori, gambar, backlink, dan indeks Google harus dijaga. Kalau semua dilakukan dengan benar, migrasi ke Next.js bukan hanya membuat website terlihat lebih modern, tetapi juga membuka peluang untuk performa yang lebih stabil, pengalaman pengguna yang lebih baik, dan pertumbuhan trafik jangka panjang.
