WordPress’i Next.js ile başsız bir CMS olarak nasıl çalıştırılır (3 adımda)

WordPress Headless, içeriğiniz üzerinde daha fazla kontrol ve tamamen özel bir ön uç oluşturma özgürlüğü sağlar. Bununla birlikte, bu sunum katmanını yapılandırma ve tasarlama işlemi her zaman kolay değildir. Sağlam bir geliştirme çerçevesine sahip. Next.js gibi çerçeve, daha önce bir web geliştirme deneyiminiz olmasa bile, WordPress içeriğinizi güzel ve yüksek performanslı bir ön görünüm oluşturmanıza yardımcı olabilir. Bu makalede, sizi kafası olmadan WordPress ile tanıştıracağız ve daha sonra bir sonraki.js çerçevesinin ne olduğunu ve faydalarını açıklayacağız. Ayrıca, üç basit adımda WordPress’i başsız bir CMS olarak çalıştırmak için next.js’yi nasıl kullanacağınızı da göstereceğiz. Başlayalım!
Tipik İçerik Yönetim Sistemi (CMS) başı olmayan WordPress’e giriş ön uç ve arka ucuna sahiptir. Ancak, CMS’yi ‘başsız’ olarak çalıştırmak mümkündür. Başsız WordPress ile, başı (ön uç) vücuttan (arka uç) çıkarırsınız. Bu, WordPress yönetici panellerini ve bilinen içerik yönetimi araçlarını kullanmaya devam edebileceğiniz anlamına gelir. Bununla birlikte, geleneksel ‘monolitik’ CM’lerin aksine, başsız WordPress içeriğinizi görüntülemenin bir yolunu sunmaz. Tersine, Head’siz CMS, RESTful Uygulama Programlama Arabirimi’ni (API) kullanarak içeriğinizi veri olarak sunar.
İçeriğinize erişmek için, yangının sonuna ağ istekleri gönderebilirsiniz. WordPress varsayılan bir yangın dinlenmeye sahiptir – bu, kafaları olmayan CMS topluluğu arasında çok popüler olan nedenlerden biridir. Verilerinize yangının bitiş noktası boyunca erişmek, olağan WordPress sınırlarından bağımsız olarak kendi ön ucunuzu tasarlamayı ve oluşturmanızı sağlar. WordPress’i tek sayfa uygulaması (SPA) veya hücresel uygulama gibi yeni bir bağlamda bile kullanabilirsiniz. Bu özgürlük maliyetle geliyor. Kendi ön ucunuzu yapılandırmak, özellikle sınırlı bir geliştirme veya web tasarım deneyiminiz varsa, zaman ve karmaşık bir süreç olabilir. Bu nedenle, birçok başsız CMS sahibi, Frontity, Gatsby veya Next.js gibi çerçevelerden yardım istemeyi tercih etmeyi seçer. :
Çalışma, insanların yüzde 40’ının siteyi yüklemek için üç saniyeden fazla beklemek istemediğini göstermektedir. Sabırsız ziyaretçileri çekmek istiyorsanız, Next.js gibi performansa odaklanan araçlar çok önemli olabilir. Next.js çalışma çerçevesi, yalnızca geçerli sayfa için gereken JavaScript ve CSS’yi yüklemek için otomatik kod ayırma kullanır. Tarayıcının gereksiz komut dosyalarını indirme ihtiyaçlarını ortadan kaldırmak, sayfanın yükleme süresini önemli ölçüde artırabilir.

Next.js, başlangıçta kullanıcıların sunucu tarafında karşılaştığı bileşenleri oluşturarak hissedilen zaman yükleme süresini de artırabilir. HTML tarayıcıya gönderildikten sonra, ziyaretçiler kullanıcı deneyimi (UX) için çok iyi olan bu içeriğe doğrudan erişebilir. Performans, arama motoru optimizasyonunda (SEO) bir başka ana faktördür. Google, sayfa hızını bir sıralama faktörü olarak kullandığını doğruladı ve şimdi temel web hayati yaşamları performansa odaklanan başka bir sıralama sinyali olmaya hazır. Tüm web trafiğinin yüzde 53’ünden fazlası organik aramadan geliyor, Next.js çok önemli bir arama sıralamasına çıkmanıza yardımcı olabilir. Yeni teknoloji öğrenmek zaman ve çaba gerektirir ve bazı ünlü çerçevelerin dik bir öğrenme eğrisi vardır. Ancak, bir ‘görüş’ çerçevesi olarak, next.js kullanım kolaylığı için tasarlanmıştır. Ayrıca sıfır konfigürasyona sahip derleme ve otomatik paketleme ile donatılmıştır. Next.js’nin esneklik yerine kullanıcı misafirperverliğine öncelik verdiğine dikkat edilmelidir. Next.js’nin sizin için doğru olup olmadığından emin değilseniz, gelecekte projenizde önemli değişiklikler yapmanız gerekip gerekmediğini düşünmelisiniz. Örneğin, sonraki.js ayarlarınızla başka bir yönlendirici kullanmaya karar verirseniz zorlu bir mücadeleyle karşılaşabilirsiniz.
WordPress’i Next.js (3 adımda) ile başsız bir CMS olarak nasıl çalıştırır (3 adımda) Başsız WordPress CM’leriniz için ön uç oluşturmak için önce WordPress’i yüklemelisiniz. Bunu bir web sunucusunda barındırabilir veya yerel olarak barındırabilirsiniz. Ayrıca, Next.js GraphQL kullandığından, WPGraphQL eklentisini yüklemenizi öneririz. Bu ücretsiz araç, WordPress API REST’den daha hızlı GraphQL ile WordPress veri sorgularını yapmanızı sağlar. Sırt kurulduktan sonra, cepheyi oluşturmaya başlayabilirsiniz. Üç kolay adımda nasıl yapılacağına bakalım. Adım 1: Geliştirme ortamınızı bir sonraki başlamaya ve çalıştırmamıza yardımcı olacak şekilde hazırlayın. Next-uygulama ‘. Bu, gerekli proje dosyaları ve mevcut yapılandırmalarla bir sonraki.js bootstrap uygulamasıyla sonuçlanır. Düğüm Paketi Yöneticisi (NPM) ile paketlenmiş NPX aracını kullanarak Create-Next-App’i yükleyebilirsiniz. Bu bileşeni indirmenin en kolay yolu bir HomeBrawe Paket Yöneticisi kullanmaktır:
Bir HomeBrawe yüklemek için bilgisayarınıza terminal uygulamasını veya komut istemini açın. Ardından, aşağıdaki komutu çalıştırın:
/bin/bash -c “$ (curl -fssl https://raw.githubuserconcent.com/homebrew/install/head/install.sh)” Artık terminal talimatlarını takip ederek bir homebraw yükleyebilirsiniz. Homebone etkin ve çalıştırıldıktan sonra, bir komutu kullanarak Node.js ve Düğüm Paket Yöneticisi’ni (NPM) yükleyebilirsiniz: Brew Install Düğüm Bilgisayarınızın nasıl yapılandırıldığına bağlıdır, dosya izninizi düzenlemeniz gerekebilir. Bazı değişiklikler yapmanız gerekiyorsa, terminal gerekli tüm bilgileri görüntüler. Ekrandaki talimatları izleyin, ardından Demet Kurulumu Komutunu tekrar çalıştırmayı deneyin. Adım 2: Next.js projesini oluşturun Şimdi, Create-Next-App kullanarak bir sonraki.js’i ayarlayabiliriz. Başlamak için, bilgisayarınızın terminal penceresini veya komut istemini açın ve aşağıdaki komutu çalıştırın: NPX Create-Next-App Headless-WP-DEMO, yerel kullanıcı dizininizde bir WP-DEMO projesi oluşturur. Bu işlem tamamlandıktan sonra, terminal sizden bir sonraki işlemi oluşturmak, çalıştırmak ve başlatmak için aşağıdaki komutu girmenizi isteyecektir. Aşağıdaki komutu girme: Başsız CD -WP-Demo İplik Dev “Başarılı bir şekilde derlenmiş” mesajını görürseniz, Tebrikler-Next.js artık yerel makinenizde çalışıyor! Projenizi görmek için web tarayıcınızda yeni bir sekme açabilir ve http: // localhost: 3000 adresine gidebilirsiniz.
Yeni başlayan siteyi Next.js göreceksiniz:

Bu sağlam bir başlangıç. Ancak, next.js şu anda yalnızca kukla içeriği görüntüler. WordPress arka ucunuza bağlanalım. Adım 3: Next.js’i WordPress CMS’nize bağlayın, bunun tersini belirlemedikçe, NPX kullanıcılar dizininde başsız-WP-DEMO projenizi oluşturur. Lütfen ve bu klasöre gidin. Next.js uygulamanızın ana giriş noktası olan projenizi /pages/index.js dosyalarını bulabilirsiniz. Uygulama: Bu dosyayı uyumlu herhangi bir metin düzenleme uygulamasında açın. Bir hoş geldiniz mesajı görüntüleyen ve en son gönderimize bir bağlantı ekleyen basit bir yön sayfası oluşturacağız. Bu dosyada etiketini bulun ve içindeki her şeyi silin. Daha sonra aşağıdakilerle değiştirebilirsiniz: