Next.js ve KeystoneJS ile React odaklı bir blog oluşturun

KeystoneJS, tüm Node.js CMS çerçeveleri arasında en iyi seçeneklerden biridir. Kendi jeneratör komut satırı aracı ile tüm modellerin üretilmesi, veri tabanı bağlantısı işlemlerini gerçekleştirir ve size otomatik olarak oluşturulan bir yönetici arayüzü sunar. Aynı zamanda son derece özelleştirilebilirdir, böylece kendi ihtiyacınıza göre kendi modelinizi yapabilirsiniz. Ancak ön uçta kendi şablon motorlarını kullanıyor ve React bu çerçevede yerleşik değil.

Next.js, minimum konfigürasyona sahip bir SEO dostu React web sitesi oluşturmanıza olanak tanıyan popüler bir React SSR (Sunucu Tarafı İşleme) çerçevesidir. Sunucu tarafı oluşturma ile istemciye dönmeden önce sunucudaki SEO meta etiketlerini ayarlayabilirsiniz. Bu yüzden arama motoru, özellikle bloglar ve haber siteleri için önemli olan herhangi bir Javascript çalıştırmadan verileri tarayabilir.

Bu eğitici yazı, her iki çerçevenin de güçlü yanlarını kullanmak ve onları tam güçlü bir blog / haber sitesi oluşturmak için birleştiriyor.

Ön şartlar:

  • düğüm & npm yüklü

KeystoneJS'i yükleyin

İlk önce mongoDB'yi kurun ve çalışmasını sağlayın. Mac kullanıyorum, bu yüzden Homebrew ile yüklemeye bir örnek.

demlemek mongodb yüklemek
demlemek hizmetleri mongodb başlatmak

Ardından proje kökünüze, KeymanJS'i Yeoman jeneratörüyle yükleyin.

npm yo-g yükle
npm kurulum -g jeneratör-kilit taşı
yo kilit taşı

KeystoneJS kurma adımlarının bir örneği.

KeystoneJS'nin tüm ön uç bileşenlerini daha sonra kaldıracağımız için şablon motoru ve CSS ön işlemcisini seçmek önemli değildir.

Daha sonra proje kökünüzde bunun gibi bir klasör yapısı görmelisiniz.

Çalıştırmayı dene

düğüm kilit taşı

Kilit taşı inişi localhost: 3000'de görünmeli ve kilit taşı uygulamanız kurulmalıdır.

KeystoneJS’in ön uç bileşenlerini kaldırın ve Next.js’e takın

React, Next.js ve axios'u (ağ isteği için) yükleyin.

npm Bir sonraki reaksiyon tepki-dom axios - save yükleyin

Ardından proje kökünüzde, klasör şablonlarını ve genel ve içindeki dosyaları kaldırın.

Next.js ve React dosyalarını içerecek şekilde klasör sayfaları, bileşenleri ve statik ile değiştirin.

Artık klasör yapınız böyle görünmelidir.

Ardından, keystone.js'de Next.js uygulama nesnesini başlatın.

Ve Next.js uygulamasının hazırlığı içindeki Keystone.js yapılandırmasını kaydırın.

Next.js uygulamasını rotalara aktarmanız gerekir, böylece daha sonra Next.js ile rota oluşturabiliriz.

keystone.set ('routes', zorunlu ('./ routes') (uygulama));

KeystoneJS ön kodunu çıkardıktan sonra, keystone.js dosyanız böyle görünmelidir.

Daha sonra bu dosyalardan hiçbirini kullanmayacağımızdan, bağlantılar klasöründe, görünüm klasörünü ve middleware.js dosyasını kaldırın. İndex.js dosyasını yalnızca rota klasöründe tutarız.

Routes / index.js dosyasında, konfigürasyon örneği aşağıdadır. KeystoneJS'den gönderileri almak için bir / api / posts uç noktası var ve yolların geri kalanı Next.js.

Keystone.js & routes / index.js dosyasını kurduktan sonra, düğüm kilit taşı özelliğini yeniden çalıştırmayı deneyebilirsiniz.

KeystoneJS sayfası yerine bir Next.js 404 sayfası görünmelidir.

Next.js. ile bir sayfa yapmaya çalışalım.

Sayfalar klasöründe index.js dosyasını yeni bir dosya haline getirin.

Ve düğümü kilit taşı yeniden çalıştırın.

Merhaba dünya ortaya çıkıyor ve Next.js, KeystoneJS ile başarıyla bağlanmıştır.

Next.js ön yüzünü uygulama

Önce yönetici paneline giriş yapın: http: // localhost: 3000 / keystone ve bazı gönderiler yapın, böylece gösterilecek veriler olsun.

Sonra Sayfalar klasöründe, yeni bir dosya _document.js olun. Burada Bootstrap veya herhangi bir üçüncü taraf ön uç kütüphanesini içe aktarabiliriz.

Sayfalarda / index.js. Gönderileri Next.js yönteminde getInitialProps () ile alabilir ve sahne olarak geri döndürebilirsiniz. Sonra verileri kullanabilir ve mesajları React'te oluşturabilirsiniz.

Öyleyse işte buradayız, yazılar localhost'ta ortaya çıkıyor: 3000!

KeystoneJS & Next.js'yi entegre ettik ve başarılı bir şekilde basit bir blog oluşturduk. Her iki bu iki çerçeve de karmaşıktır, böylece daha karmaşık web siteleri oluşturmak için bunları kullanabilirsiniz.

Örnek projenin tamamı github'da barındırılıyor.

https://github.com/victor36max/keystone-next-example