Strapi ve Next.js Kullanarak JAMstack Blog Yapalım — MongoDB, Strapi kurulumu ve Heroku Deploy
Selamlarr 👋 . Bu yazıda Strapi ve Next.js kullanarak basit bir JAMstack blog nasıl ortaya çıkarırız anlatmaya çalışacağım. JAMStack hakkında detaylı bilgi almak için JAMStack sitesini ziyaret edebilir veya sevgili Adem İlter in şurada ki sunumunu izlemenizi tavsiye ederim. Projemiz de database olarak MongoDB Atlas , CMS olarak Strapi, Strapi deployment için Heroku, Nextjs projemizin deploymentı için Vercel ve stillendirme için TailwindCSS kullanacağız. Hadi gelin başlayalım.
1 — MongoDB Atlas database kurulumu
MongoDB ye kayıt olup ilk giriş yaptıktan sonra karşımıza ilk olarak Şekil 1.1 de ki ekran karşımıza çıkıyor. Buradan ücretsiz olan Shared Clusters seçeneği altında ki Create a cluster a tıklayıp devam ediyoruz.
Create a cluster dedikten sonra bu sefer Şekil 1.2 de ki ekran bizi karşılıyor. Burada istediğiniz cloud providerı ve bölgeyi seçebilirsiniz. Seçiminizi yaptıktan sonra sağ alttaki Create cluster butonuna basıyoruz ve ilerliyoruz.
Clusters sekmesinin hemen altında veritabanımızın hazırlandığını göreceksiniz. Veritabanımız hazırlanırken erişim sağlayacak kullanıcımızı oluşturalım. Sol menüden Şekil 1.3 de kırmızı kutu içine alınmış Database Access butonuna tıklayarak ilgili sayfaya ilerliyoruz.
Açılan sayfada Add New Database User butonuna tıklayınca yeni kullanıcı ekleme formu karşımıza çıkıyor. Açılan pencereden kullanıcı adımızı ve şifremizi belirledikten sonra Add User butonuna tıklayıp kullanıcımızı kaydediyoruz.
Kullanıcı ekleme işlemini tamamladıktan sonra sol menüden Network Access butonuna tıklayarak ilgili sayfaya ilerliyoruz. Açılan sayfada sağ yukarıda ki Add IP Adress butonuna tıkladıktan sonra karşımıza Şekil 1.4 de ki ekran. çıkıyor. Kırmızı okla işaretlenmiş Allow Access From Anywhere butonuna tıklayıp ardından Confirm butonuna tıklayıp kaydediyoruz.
Şimdilik MongoDB de ki ayarlamalarımız bitti, fakat sekmeyi kapatmamakta fayda var çünkü yakında MongoDB ye tekrardan geri döneceğiz.
2 — Strapi Kurulumu
Terminalimize gidip,
npx create-strapi-app my-projectyazarak Strapi kurulumumuzu başlatıyoruz. my-project kısmını değiştirerek projenizi isimlendirebilirsiniz. Daha sonra sırasıyla aşağıda ki adımları takip ediyoruz.
1- MongoDB yi database olarak kullanacağımız için Custom (manual settings) seçimini yapıyoruz.
2- Database olarak mongo seçimi yapıyoruz.
3- Host bilgisini doldurmak için öncelikle tekrardan MongoDB ye gidiyoruz.
Şekil 2.1 de kırmızı kutu içerisine alınmış Connect butonuna tıklıyoruz. Ardından Şekil 2.2 de gösterildiği gibi Connect your application seçeneğine tıklıyoruz.
Karşımıza Şekil 2.3 de ki ekran çıkıyor olacak. Şekil 2.3 de mavi çizgi ile altı çizilmiş olan host adresini kopyalayıp terminal ekranımıza yapıştırıyoruz ve devam ediyoruz. Örnekteki host adresi cluster0.tmkhu.mongodb.net
4- srv connection : true değerini girip devam ediyoruz.
5- Port ayarını değiştirmeyeceksek Enter a basıp devam ediyoruz.
6- Karşımıza sırasıyla username ve password seçenekleri çıkacak. Bu bilgileri MongoDB de Database access menüsünde oluşturduğumuz kullanıcı adı ve şifresiyle dolduruyoruz.
7- Authentication database seçeneğini Enter deyip geçiyoruz. Ardından Enable SSL connection seçeneğinin karşısına y yazıp devam ediyoruz. Bu aşamadan sonra proje dosyalarımız kurulmaya başlayacak.
Kurulum işlemi tamamlandıktan sonra projemizi IDE de açıp terminal e
npm run developkomutunu girip çalıştırıyoruz.
Komutumuz çalıştıktan sonra tarayıcımız otomatik olarak http://localhost:1337/admin/auth/register-admin adresini açıcak. Otomatik olarak açılmazsa eğer tarayıcıya yukarıda ki adresi yazıp kendimiz erişebiliriz. Açılan ekranda kullanıcı bilgilerimizi doldurup kayıt oluyoruz ve karşımıza Strapi Admin Dashboard’u çıkıyor 🎉.
Öncelikle Sol menüden Content Types Builder seçeneğine tıklıyoruz.
Ardından Şekil 2.5 de kırmızı okla gösterilmiş Create new collection type seçeneğine tıklıyoruz. Açılan pencereden koleksiyonumuza bir isim veriyoruz ve devam ediyoruz. Blog örneğinden devam ettiğimiz ben gönderilerim için posts olarak isimlendireceğim. Devam ettikten sonra karşımıza field ekleme ekranı çıkacak. Burada farklı farklı seçenekler karşımıza çıkıyor. Bunlardan istediğimizi kullanabiliriz.
Ben gönderi başlıkları için title isimli Text, content isimli Rich Text ve kapak resimleri için cover isimli Media fieldları oluşturacağım. Field oluşturma sırasında ayarları istediğiniz şekilde yapabilirsiniz. Media field ında sorun yaşamamak için Singe Media ve Advantages Options sekmesinden Select allowed types of media kısmınında sadece Images seçeneklerini seçmenizi öneririm.
Seçimleri yapıp kaydettikten sonra Posts koleksiyonum Şekil 2.6 da ki gibi oldu.
Koleksiyonumuzu oluşturduktan sonra sol menüden Settings seçeneğine tıklıyoruz.
Settings sayfasında Roles/Public seçeneğine Şekil 2.7 de ki gibi ilerliyoruz.
Açılan pencereden Permissions sekmesinin altında, postlarımıza şimdilik sadece erişmek istediğimiz için find ve findone seçeneklerini Şekil 2.8 de ki gibi seçiyoruz ve kaydediyoruz. Strapi arayüzü üzerinde ki gerekli ayarlarımız tamamlandı. Artık postlarımızı oluşturabiliriz. ✨✨✨
Sol menüden Posts seçeneğine tıklıyoruz ve Postlarımızın listelendiği, aynı zamanda yeni post ekleme butonumuzun olduğu sayfaya gidiyoruz.
NOT : Blog örneğinden ilerlediğimiz için koleksiyonumuza Posts ismini vermiştik. Başka bir isimlendirme yaptıysanız sol menüde koleksiyon isminiz farklı olacaktır.
Add New Post butonuna tıklayarak yeni post ekleme işlemlerini yapabiliriz. Kaydettikten sonra postlarımız draft durumunda olacaktır. Yayına almak için publish butonuna tıklamamız yeterli. İlk postumuz hazır 💃💃.
Her şey sorunsuz ilerlediyse , http://localhost:1337/posts adresine istek atarak API end pointimizi deneyebiliriz.
Şekil 2.9 de görüldüğü gibi API imiz sorunsuz şekilde çalışıyor. Artık Strapi den girdiğimiz ve publish ettiğimiz her post burada görüntülenecektir. Otomatik slug oluşturma işlemi için ben şuradaki işlemleri de yaparak slug fieldı ekledim. Strapi dökümantasyon sayfasını daha fazla özelleştirme için inceyelebilirsiniz.
Oluşturduğumuz Strapi projesini açıp config/database.js dosyasını MongoDB bağlantımızı sağlamak için aşağıdaki gibi düzenliyoruz.
Ardından proje ana proje dizinimizde .env dosyasını oluşturuyoruz. İsterseniz .env.example isimli dosyayı sonunda ki example uzantısını silip kullanabilirsiniz.
.env dosyamızı aşağıdaki gibi düzenliyoruz.
- DATABASE_URI değeri Şekil 2.3 de host ismini aldığımız bağlantının tamamı. username ve password değerlerini MongoDB de Database access menüsünde oluşturduğumuz kullanıcı adı ve şifresiyle değiştiriyoruz.
- DATABASE_NAME değeri ise DATABASE_URI değerinde ki mongodb.net/myFirstDatabase değeri. Projenizde databasenizi farklı isimlendirdiyseniz farklı olacaktır.
Strapi ile ilgili yapacaklarımız şimdilik bu kadar. Sıra Heroku’ya deploy edip Strapi’ye her yerden ulaşılabilir kılmak.
3 — Heroku Deploy
Öncelikle Heroku’nun websitesine girip kayıp oluyoruz. Ardından Heroku CLI yı işletim sistemimize göre bilgisayarımıza kuruyoruz.
Heroku CLI kurulduktan sonra proje dizinimizde terminali açıp
heroku loginkomutunu girip çalıştırıyoruz ve Heroku’ya giriş yapıyoruz.
Giriş yaptıktan sonra Heroku dashboard ekranından yeni proje oluşturuyoruz. Yeni proje oluşturduktan sonra her şey sorunsuzsa bizi Şekil 3.1 de ki ekran karşılıyor olacaktır.
Deploy Using Heroku Git bölümünde Heroku ya nasıl deploy edeceğimiz aslında oldukça açık bir şekilde anlatılmış. Ben yine de tekrardan üstünden geçeceğim. Öncelikle terminalimizi proje dizininde açıyoruz. Ardından sırasıyla aşağıdaki adımları takip ediyoruz.
$ git init
$ heroku git:remote -a HEROKU_PROJE_ISMI
$ git add .
$ git commit -m "commit"
$ git push heroku masterDeploy işlemi tamamlandığında terminalimizde ki Şekil 3.2 de ki gibi bir mesajla karşılaşacağız.
Heroku nun verdiği adrese tıklıyoruz ve karşımıza aşağıda ki ekran çıkıyor,
Oops ! Karşımıza hata ekranı çıktı ama telaşlanmayın çözümü basit. Heroku dashboardunu açıp uygulamamızın settings sayfasını açıyoruz. Ardından Reveal config vars butonuna tıklıyoruz.
Açılan key-value şeklinde ki formu projemizde ki .env dosyamızda ki değerler ile Şekil 3.5 de ki gibi dolduruyoruz ve tekrardan Heroku’nun bize verdiği adrese gidiyoruz
Vee … 🕐
Deployment başarılı 🎉🎉 .
Artık /admin adresinden giriş yapabilir veya /posts adresinden isteklerimizi yapabiliriz.
Projemizin backend işlemleri böylece tamamlanmış oldu. Kaynak dosyalarına https://github.com/afatihyavasi/NextBlog adresinde ki backend branch inden erişebilirsiniz. Yazının ikinci kısmında Next.js ile blogun frontend kısmını ve TailwindCSS Typography plugini ile kolayca markdown içerikleri stillendirmeyi anlatacağım. Sevgiyle kalın .
