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.

Şekil 1.1

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.

Şekil 1.2

Şekil 1.3

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.

Şekil 1.4

Ş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-project

yazarak 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

Ş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.

Şekil 2.2

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

Şekil 2.3

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 develop

komutunu 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 🎉.

Şekil 2.4 - Strapi Admin Dashboard Genel Görünüm

Öncelikle Sol menüden Content Types Builder seçeneğine tıklıyoruz.

Şekil 2.5

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.

Şekil 2.6

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.

Şekil 2.7

Şekil 2.8

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

Ş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 login

komutunu 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.

Şekil 3.1

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 master

Deploy işlemi tamamlandığında terminalimizde ki Şekil 3.2 de ki gibi bir mesajla karşılaşacağız.

Şekil 3.2

Heroku nun verdiği adrese tıklıyoruz ve karşımıza aşağıda ki ekran çıkıyor,

Şekil 3.3

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.

Şekil 3.4

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

Şekil 3.5

Vee … 🕐

Şekil 3.6

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 .