WordPress'ten Next.js'e: Büyüme için Göç Kılavuzu
200 SaaS şirketi ile çalıştım. Her biri WordPress ile başladı. Neden? Bu ucuz. Kolay. Binlerce eklenti var. Ama 10.000 aylık ziyaretçiye çarptığında, çatlaklar ortaya çıkıyor. Sayfa hız düşer. PHP senaryoları veritabanınızı yavaşlatır. Pazarlama ekibiniz çek akışını özelleştirmez. Modern bir yığına ihtiyacınız var.
Metodoloji notu: geçiş adımları, zaman çizelgesi ve% 60 yük-zaman /% 40 SEO işaretli gelişmeler, DG10 SaaS göçleri Ocak-Ağustos 2026 (Contentful, Sanity, Berryi backends). Alet referansları ve ücretsiz kullanım detayları 2026 Eylül'de yeniden kontrol edildi.
Bu kılavuz SaaS kurucuları, CTO'lar ve mühendislere yol açıyor. WordPress'den trafik kaybetmeden nasıl göç edeceğinizi göstereceğim, SEO veya sanity.
Why WordPress Fails at Scale for SaaS
WordPress tüm web sitelerinin% 43'ü güçliyor. Bu aslında ondan bir gerçekW3Techs. Ama SaaS uygulamaları için, bu bir sorumluluk.
Yavaş sayfa yükleri.4.2 saniye içinde 30 eklenti ile tipik bir WordPress sitesi. Bu, buna göreGoogle'ın PageSpeed Insights. IN SaaS için, her ekstra ikinci işlem dönüşümlerin% 7'si (kaynak:Akamai).
Güvenlik delikler.WordPress güvenliklerinin% 52'si eklentilerden gelir (kaynak:WPScan). SaaS kullanıcı verilerini işlemek için, bunun gerçekleşmesi için bekleyen bir dava.
Hiçbir dinamik routing.WordPress bloglar için inşa edilmiştir. SaaS, özel panolara, kullanıcı profillerine ve gerçek zamanlı güncellemelere ihtiyaç duyar. Bunu eklentiden sonra özel posta türleri ve eklenti ile hackleyebilirsiniz.
Databases break.WordPress, Natasha'yı kullanır. SaaS büyür, veritabanı sorgularınız büyür. 50.000 kullanıcı tarafından, yönetici paneli 8 saniye sürüyor. Bunun olduğunu gördüm.
Next.js bunu çözer. Node.js üzerinde çalışan bir reaktör çerçevesi. Bu size sunucunun oturma, statik site nesli ve API rotaları verir. Bu daha hızlı sayfalar, daha az güvenlik sorunları ve daha iyi ölçeklenebilirlik anlamına gelir.
Headless CMS Nedir ve Neden Bire İhtiyacınız Var
Next.js'e göç ettiğinizde, arka sonundan cepheyi ayırabilirsiniz. Bu "siz". WordPress içerik yönetim sisteminiz haline gelir (CMS) ancak sunum katmanınız değil. Ya da özel bir başsız CMS'ye geçersiniz.
Bir başsız CMS içeriği depolar ve bunu APIs aracılığıyla sunar. Next.js, bu içeriği zamanında veya zaman talep eder. Faydaları:
- Faster inşa eder.İçerik güncelleştirmeleri tüm siteyi yeniden üretmiyor.
- Multi-channel.Web, mobil uygulama ve API için aynı içerik.
- Güvenlik.No public admin dashboard. Hiçbir eklenti açığı yok.
Next.js için en popüler iki CMSContentfulveSanityHer ikisi de küçük SaaS'i destekleyen ücretsiz tierse sahiptir. Bu kılavuzda, WordPress içeriği bunlardan birine nasıl geçeceğini göstereceğim.
Migration Blueprint: Step Tarafından Step
Bu göçü 7 SaaS şirketi için yaptım. İşte tam mavi baskı.
Adım 1: Mevcut WordPress Sitenizi Denetim
Bir liste açın:
- Yazı ve sayfalar (say)
- Özel posta türleri (örneğin, “Case Studies”, “Ürünler”)
- Medya dosyaları (görüntüler, PDFs)
- Kategoriler ve etiketler
- Kullanıcı rolleri ve izinler
- Aktif eklentiler (her birini listeler)
Örnek: Örnek:Bir müşteri 800 blog yazısı vardı, 12 özel posta türü ve 47 aktif. Bunu göçten sonra 4 eklentiye kestik.
Adım 2: Başsız CMS seçin
İki yol var:
Yol A: Geri dönüş olarak WordPress'i tut.KullanınWP REST APINext.js için içeriği açığa çıkarmak. Bu küçük göçler için çalışır, ancak hala WordPress'in veritabanı yükü taşır.
Path B: Migrate to a new headless CMS.Ben tavsiye ediyorumContentfulyapılandırılmış içerik için.Sanityİçerik editörü üzerinde tam kontrol isteyen takımlar için daha iyidir.
Yol C: Bir statik CMS kullanınRafi.Açık kaynak, kendini barındırdı. Bir bütçede SaaS için iyi çalışır.
Bu kılavuz için, Contentful'i kullanacağız. 5 kullanıcı ve 10.000 kayıt ile ücretsiz bir tier sağlıyorlar.
Adım 3: Export WordPress Content
WordPress yerli ihracat aracı çalıştırın:Araçlar>İhracat İhracatı. "All content." XML dosyası alacaksınız.
Daha büyük siteler için (50.000+ gönderi), kullanınWP-CLIkomut:
wp export --filters=post_type=post --dir=/path/to/export
Bunu 1 20.000 blog yazısıyla bir SaaS müşteri için kullandım. 6 saat sürdü. Sonuç 800MB XML dosyasıydı.
Adım 4: Sizin Başsız CMS'nize İthalat
Contentful, adı verilen bir ithalat aracı sağlarcontentful-import. WordPress XML'i içerikli içerik modeli ile uyumlu bir JSON formatına dönüştürmeniz gerekecek.
Senaryo fikri:Bir Node.js veya Python senaryosu yazınxml2jsKütüphane. Map WordPress fields to Contentful fields.
- WordPress
post_title→ Contentfultitle(Short text) post_content→body(Rich text)post_excerpt→excerpt(Long text)post_date→publishDate(Date)categories→category(Reference field)tags→tags(Reference field)- Featured image →
featuredImage(Media field)
Değiştirilmiş bir versiyon kullanıyorumWordPress Contentful MigratorAçık kaynak aracı. Haritanın %80'ini ele alır.
Zaman tahmini:1000+ yazı ile bir site için 2-5 gün.
Adım 5: Set Up Next.js Project
Next.js projesini başlangıç:
npx create-next-app@latest my-saas-site --typescript
Contentful SDK'yı yükleyin:
npm install contentful
Bir dosya oluşturunlib/contentful.ts:
import { createClient } from 'contentful'
const client = createClient({
space: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
})
export default client
Artık herhangi bir yerde içerik getirebilirsin.
Adım 6: Sayfaları Next.js ile Oluşturun
Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using Using UsinggetStaticPropsveyagetServerSidePropsİçerikten içerik getiriyorsunuz ve bunu veriyorsunuz. Blog yazıları için:
export async function getStaticProps({ params }) {
const { items } = await client.getEntries({
content_type: 'blogPost',
'fields.slug': params.slug,
})
return { props: { post: items[0].fields } }
}
Performans kazanmak:Next.js, zaman inşasında statik sayfaları üretir. Blog yükleriniz 4 saniye yerine 300m altında.
İşte geçiş sonrası bir müşteriden gerçek veriler:
| Metrik | WordPress | Next.js (statik) |
|---|---|---|
| Sayfa yükleme zamanı | 4.3 | 0.8'ler |
| Etkileşimli Zaman | 6.1s | 1.2 |
| Lighthouse performans puanı | 42 | 89 |
| SEO puanı (Semrush) | 68 | 92 |
| Bounce rate | 58% | 34% |
| Dönüşüm oranı | 1.9% | 3.6% |
Kaynak:DG10 Agency istemcisinden iç veriler anonimleşmiştir.
Adım 7: Dinamik Yollar ve Kullanıcı Dashboards
SaaS uygulamaları kullanıcıya özel sayfalara ihtiyaç duyar. Next.js dinamik rotaları destekler[slug].tsxveya[id].tsxKullanıcı panoları için, kullanıngetServerSidePropsKullanıcı verilerini arkanızdan getirmek.
Örnek: Örnek:/dashboard/[userId].tsxHesap bilgilerini getirir ve kişiselleştirilmiş bir sayfa oluşturur.
Adım 8: Set Up SEO and Redirects
WordPress URL'ler değişmiş olabilir. 404 hataları önlemek için 301 yönlendirme ayarlanmalıdır.
Next.js'de kullanımnext.config.js:
async redirects() {
return [
{ source: '/old-wordpress-page', destination: '/new-page', permanent: true },
]
}
SEO meta etiketleri için, kullanınnext/headbileşen veya bileşennext-seoPaket.
Sonuç:Göçten sonra, 30 gün içinde organik trafikte% 12 artış gördük çünkü daha hızlı yük süreleri nedeniyle.
Adım 9: Start and Monitor
Deploy onVercelveyaNetlify. Her ikisi de Next.js için optimize edilmiştir.
Takip Et:
- Cron işi: koşmak
npm run buildİçerikten yeni içerik getirmek için günlük olarak. - Analytics Analytics AnalyticsGoogle Analytics 4 veya Plausible kullanın.
- Hata izleme: Sentry veya LogRocket.
Common Hatalar ve Them Nasıl Kaçırılır
Hata 1: Testten önce tüm içeriği abartmak.10 sayfa ile başlayın. Geçerli SEO, hız ve kullanıcı deneyimi. Sonra ölçek.
Hata 2: Görüntü optimizasyonunu görmezden gelir.WordPress genellikle büyük orijinal görüntüler saklar. CDN gibi bir CDN kullanınCloudinaryveyaimgix. Next.js da kullanabilirnext/imageOtomatik optimizasyon için.
Hata 3: Formları kullanma.WordPress formları (e.g., Contact Form 7) Next.js'te çalışmıyor. Use Use Use Use Use UseFormlarpreeveya kendi API rotanızı inşa edin.
Hata 4: yedeklemeyi unutun.Eski WordPress sitesi göçün ardından en az 30 gün boyunca yaşıyor. Yönlendirmeleri ve içerik hataları düzelteceksiniz.
Sık Sorulan Sorular
Next.js göçü maliyetine ne kadar bir WordPress yapar?
Bir SaaS pazarlama sitesi genellikle bir ajansla 15K-$40K çalışır, sayfa sayısı tarafından yönlendirilir, CMS karmaşıklığı ve entegrasyon yüzeyi. Headless CMS Lisansı (Contentful, Sanity) ve barındırma (Vercel, Netlify) tekrar hatları ekleyin - bütçelemeden önce kayıt numaralarınıza karşı ücretsiz sınırları onaylayın. Gönderme haritası ve analitik pariteyi teslim edilebilirler olarak yazın, varsayımlar değil.
Göç sırasında SEO sıralamasını kaybeder miyiz?
Planlanan bir göç iki ila altı hafta boyunca acı çekiyor, sonra performansa dayalı sorgularda üst üste geri dönüyor. Kayıplar sadece haritaların atıldığı veya analitik parite kaybedildiğinde kalıcı hale gelir - her ikisi de yukarıdaki zaman çizelgesinde kapıldı. Search Console indeks kapsamını 60 gün boyunca haftalık olarak izleyin; düz kapsama artı kurtarma tıklamaları en kötü şekilde olduğunuz anlamına gelir.
Hangi kafasız CMS seçmemiz gerekir: Contentful, Sanity, or Rafi?
Yönetilen altyapı ve serbest bir katmanı başlatmak isteyen takımlar için memnun; editör deneyimi ve gerçek zamanlı işbirliği için Sanity; kendi barındırdığı kontrol için. Bu kılavuz, 2026 Eylül’den itibaren içerikli (5 kullanıcı, 10.000 kayıt ücretsiz tier kullanır, ancak geçiş kalıbı transferleri.
Bir kerede her şeyin yerine büyümeli miyiz?
Evet - üst-traffic şablonlar ile başlayan sayfayı kes, WordPress ve Next.js tarafını arka arka planlı yönlendirmelerin arkasında. Incremental kesimover, bir trafik uçurumu olmadan 12 sayfalık işletme göçümizin nasıl gönderildiğidir.
Daha sonra personel üzerinde reaktör geliştiricilerine ihtiyacımız var mı?
Birisi ön uçuna sahip olmalıdır - ya da evde reaktör kapasitesi veya bir bakım koruyucusu. Ekibiniz sıfır JavaScript'e sahipseniz, faktör karara devam eder; performans kazanımlar yalnızca kodbase'in yalın kalması durumunda kalır. dörtte bir bağımlılık ve paket bütçeli bir inceleme en az uygulanabilir bakımdır.
DG10 hakkında okumaya devam edin
- Next.js Enterprise için WordPress
- Core Web Vitals Fix: Geliştirici Kılavuzu Lighthouse 95
- İş Akışı için AI Agents
Göç ne kadar sürer: Gerçek Zamanlar
200 sayfa altında bir SaaS pazarlama sitesi için, 6 ila 10 hafta planlayın: içerik denetim ve başsız CMS modelleme için iki hafta, bileşen inşaları ve veri göçü için üç ila dört, ve yönlendirmeler için iki, QA ve sahnelendi. Dinamik uygulama sayfaları ile büyük kataloglar 12 ila 16 hafta sürüyor - aynı 8 ila 16 haftalık grubumuz kurumsal göç çalışma yerlerimiz. Aşama takımları her zaman içerik modellemedir: WordPress, sayfa başına yapıyı geliştirmenize olanak sağlarken, bir başsız CMS onu tanımlamanız ve bu adımın bir hafta daha pahalıya mal olmasını sağlar.
Tek bir sayfa göç etmeden önce yapılan bir yönlendirme haritası ile SEO sürekliliği koruyun - her indeksli URL 1:1 hedef alır, sonra Arama Konsolu'da 60 gün boyunca takip edilir. Temiz göçlere bile iki haftalık bir trafik sıkıntısını bekleyin; kalıcı kayıplardan elde edilen ayrılar, tarama istatistikleri ve indeks kapsamının haftalık olarak izlendiğidir. Analiz paritesi (same olayları, aynı eğlenceler) ile geçiş, bu yüzden performans hikayesi - bu% 60 yük-zaman kes - sadece bizim değil kendi verilerinizde kanıtlanabilir.
Pre-Migration SEO Denetim: Hareket etmeden önce yakalamanız gerekenler
Bağlantı koduna dokunmadan önce, altı ay boyunca karşılaştırabilirsiniz: sitemap artı Arama Konsolundan tam URL envanteri (sadece sayfa başına değil), Core Web Vitals by şablon from CrUX, and the complete yönlendirme and backlink profili per URL. Çoğu takım per-template kesir ve pişman olur - göçler nadiren her şablon eşit hareket eder ve bir trafik dalgasının kırık bir blog şablonu veya bir site çapında ceza olup olmadığını söyleyemezsiniz.
Her şeyi sürümlenen dosyalara aktarın, ekran görüntüleri değil: Frog taramaları, Arama Console performans ihracat, GA4 iniş sayfa raporları ve önemli olan bağlantılar için bir backlink listesi. Tüm takımın onlara ulaşabileceği yerde depolayın, çünkü geliştirici dokuz hafta içinde bir yönlendirme boşluğuna ihtiyaç duyar, birisinin hafızasını değil. Bu denetim üç ila beş gün alır ve ilk kez herkes “bu sayfayı her zaman böyle mi?” diye sorar - verilerle, cevap dakika alır; onsuz, tartışma haftalar alır.
Next.js Sizin SaaS için doğru mu?
Next.js ihtiyacınız olduğunda en iyi şekilde çalışır:
- Hızlı iniş sayfaları (blog, pazarlama sitesi)
- Kullanıcı panoları dinamik verilerle
- API sunucusuz işlevleri için rotalar
- Yüksek SEO performansı
Ancak sadece kullanıcı hesabı olmayan basit bir blogunuz varsa aşırıdır. Bu durumda, WordPress'i tut.
SaaS büyüyen için, WordPress'ten Next.js'e geçiş stratejik bir harekettir. Üç dönüşüm oranını gördüm ve ev sahipliği maliyetlerini yarı yarıya kestim. Denetimle başlayın. Sonra bize ulaşın.
Yardıma mı ihtiyacınız var?DG10 Agency WordPress-to-Next.js göçlerinde uzmanlaşmıştır. İçeriği ithal ediyoruz, özel sayfalar, yönlendirmeler ve dağıtım. Book a free Consult on ourWeb ve mobil gelişim hizmetleriSayfa.
