Mehmet Pekcan
Mehmet Pekcan
  • Видео 161
  • Просмотров 468 794
Next.js 13 - JWT ile Auth ve Rol Sistemi
Bu video da en çok kullanılan auth yöntemlerinden birisi olan JWT sistemini manuel olarak en baştan birlikte implement edeceğiz. Bunu yaparken Next.js 13'ü kullanıp, Middleware sayesinde session kontrolünü sürekli olarak yapabileceğiz. JWT token yaratma ve verify işlerimi için ise Jose Npm paketini kullanıyoruz. İyi seyirler.
Final Kodlar:
github.com/mehmetpekcan/nextjs-13-jwt-auth-example
Başlangıç Kodlar:
github.com/mehmetpekcan/nextjs-13-jwt-auth-example/tree/starter
00:00 - JWT Nedir?
02:33 - JWT ile Auth Mantığı?
03:57 - App’i Tanıyalım
06:42 - Auth Middleware’i Oluşturuyoruz
30:28 - Login Akışları
42:38 - Rol Sistemi
🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz:
pekcan.dev
www.linkedin.com/in/me...
Просмотров: 8 154

Видео

Next.js 13 - Redux ile State Management
Просмотров 7 тыс.Год назад
Bu video ile birlikte Next.js içerisinde Redux ile state management yapmak için gerekli olan kurulum/configuration akışlarını anlatıyorum. Özellikle yeni App klasörü ile birlikte gelen server component'lerden kaynaklı 3 farklı kullanım senaryomuz var: Client side, Server Side, Server to Client (Hydration). Final Kodlar: github.com/mehmetpekcan/nextjs-13-state-management Başlangıç Kodlar: github...
#50 - Statik Analiz - Commit Öncesi Test Kontrol - husky - lint-staged - Modern Frontend Testing
Просмотров 1 тыс.Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Statik Analiz - Commit Öncesi Test Kontrol - husky - lint-staged' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpe...
#49 - Dependency Injection - react-magnetic-di ile Daha İyi DI Yönetimi - Modern Frontend Testing
Просмотров 517Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Dependency Injection - react-magnetic-di ile Daha İyi DI Yönetimi' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superp...
#48 - Dependency Injection - Implementasyon - Modern Frontend Testing
Просмотров 479Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Dependency Injection - Implementasyon' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ...
#47 - Dependency Injection - Nedir? Neden İhtiyaç Duyarız? - Modern Frontend Testing
Просмотров 708Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Dependency Injection - Nedir? Neden İhtiyaç Duyarız?' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/meh...
#46 - Mocking - spyOn ile Fetch'i Mock'lamak - Modern Frontend Testing
Просмотров 389Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'spyOn ile Fetch'i Mock'lamak' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ilgil...
#45 - Mocking - Npm Paketi Mock Etmek - Axios - Modern Frontend Testing
Просмотров 377Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Npm Paketi Mock Etmek - Axios' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ilgi...
#44 - Mocking - Module Mock Etmek - Modern Frontend Testing
Просмотров 439Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Module Mock Etmek' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ilgili etiketler...
#43 - Mocking - Mock Function'ı Detaylandırma - Promise Mocking - Modern Frontend Testing
Просмотров 491Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Mock Function'ı Detaylandırma' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ilgi...
#42 - Mocking - Function Mock Etme - Modern Frontend Testing
Просмотров 533Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Function Mock Etme' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ilgili etiketle...
#41 - Mocking - Mock Nedir? Neden İhtiyaç Duyarız? - Modern Frontend Testing
Просмотров 770Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Mock Nedir? Neden İhtiyaç Duyarız?' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile...
#40 - Detaylar - beforeEach ve afterEach Kullanımı - Modern Frontend Testing
Просмотров 381Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'beforeEach ve afterEach Kullanımı' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ...
#39 - Detaylar - Hook Testing ve Act Kullanımı - renderHook - Modern Frontend Testing
Просмотров 322Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Hook Testing ve Act Kullanımı - renderHook' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan V...
#38 - Detaylar - Custom Renderer Setup - Modern Frontend Testing
Просмотров 310Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Custom Renderer Setup' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ilgili etike...
#37 - Detaylar - Provider ile Component Sarmak - Custom Wrapper - Modern Frontend Testing
Просмотров 348Год назад
#37 - Detaylar - Provider ile Component Sarmak - Custom Wrapper - Modern Frontend Testing
#36 - Kullanıcı Etkileşimleri - Click, Double Click, Hover Events - Modern Frontend Testing
Просмотров 314Год назад
#36 - Kullanıcı Etkileşimleri - Click, Double Click, Hover Events - Modern Frontend Testing
#35 - Kullanıcı Etkileşimleri - Type ve Upload Events - Modern Frontend Testing
Просмотров 312Год назад
#35 - Kullanıcı Etkileşimleri - Type ve Upload Events - Modern Frontend Testing
#34 - Kullanıcı Etkileşimleri - Clear ve Select/Deselect Events - Modern Frontend Testing
Просмотров 301Год назад
#34 - Kullanıcı Etkileşimleri - Clear ve Select/Deselect Events - Modern Frontend Testing
#33 - Kullanıcı Etkileşimleri - Clipboard Events - Copy, Paste, Cut - Modern Frontend Testing
Просмотров 367Год назад
#33 - Kullanıcı Etkileşimleri - Clipboard Events - Copy, Paste, Cut - Modern Frontend Testing
#32 - Kullanıcı Etkileşimleri - Keyboard Events - Modern Frontend Testing
Просмотров 346Год назад
#32 - Kullanıcı Etkileşimleri - Keyboard Events - Modern Frontend Testing
#31 - Kullanıcı Etkileşimleri - Mouse/Pointer Events - Modern Frontend Testing
Просмотров 468Год назад
#31 - Kullanıcı Etkileşimleri - Mouse/Pointer Events - Modern Frontend Testing
#30 - Kullanıcı Etkileşimleri - UserEvents vs FireEvents - Modern Frontend Testing
Просмотров 392Год назад
#30 - Kullanıcı Etkileşimleri - UserEvents vs FireEvents - Modern Frontend Testing
#28 - Queries - DOM Query Selector - Modern Frontend Testing
Просмотров 343Год назад
#28 - Queries - DOM Query Selector - Modern Frontend Testing
#27 - Queries - waitForElementToBeRemoved - Modern Frontend Testing
Просмотров 330Год назад
#27 - Queries - waitForElementToBeRemoved - Modern Frontend Testing
#26 - Queries - waitFor ile Async Test Yazmak - Modern Frontend Testing
Просмотров 425Год назад
#26 - Queries - waitFor ile Async Test Yazmak - Modern Frontend Testing
#29 - Debugging - DOM'u Yazdırmak - Modern Frontend Testing
Просмотров 340Год назад
#29 - Debugging - DOM'u Yazdırmak - Modern Frontend Testing
#25 - Queries - findBy ile Async Test - DOM Update'i Beklemek - Modern Frontend Testing
Просмотров 391Год назад
#25 - Queries - findBy ile Async Test - DOM Update'i Beklemek - Modern Frontend Testing
#24 - Queries - queryBy ile Olmayan Elementleri Kontrol Etmek - Modern Frontend Testing
Просмотров 382Год назад
#24 - Queries - queryBy ile Olmayan Elementleri Kontrol Etmek - Modern Frontend Testing
#23 - Queries - Text Matching Yöntemleri - Modern Frontend Testing
Просмотров 445Год назад
#23 - Queries - Text Matching Yöntemleri - Modern Frontend Testing

Комментарии

  • @TehranBayram
    @TehranBayram 14 часов назад

    kral emegine saglik

  • @TehranBayram
    @TehranBayram 14 часов назад

    baya kaliteli anlatim emeginize saglik reyiz

  • @cihatturgut2011
    @cihatturgut2011 4 дня назад

    En sonunda adam gibi proje yaparak ve gerçekten güzel bir anlatımla Next.js dersi bulabildim. Emeğine sağlık kardeşim.

  • @egesamur9238
    @egesamur9238 7 дней назад

    hocam selamlar next js te redux kullanmak mantıklı bir yaklaşım mı acaba

  • @1yavuzahmet
    @1yavuzahmet 9 дней назад

    cok kaliteli anlatim tarzi, emeginize saglik tesekkurler.

  • @mehmetguven1557
    @mehmetguven1557 11 дней назад

    Eline emeğine sağlık hocam, cidden çok öz ve anlaşılır bir seri olmuş. Kendi adıma çok teşekkür ederim.

  • @birkbirk1204
    @birkbirk1204 18 дней назад

    öğreneyim diye bir site yapmaya çalışıyorum. 4 saattir şunun cevabını arıyordum tam pes etmişken denk geldim :) çok teşekkür ederim bütün gece dua edicem sana

  • @esrak.8547
    @esrak.8547 19 дней назад

    Çok açıklayıcı teşekkürler

  • @yasinozen171
    @yasinozen171 19 дней назад

    Eğitimler süper. Genelde yorum yazılmadığını gördüm videolara bence bunun sebebi, insanlar o kadar akıcı bir şekilde eğitimlere odaklanıyor ki anlamıyor bile nasıl bittiğini :D Elinize emeğinize sağlık.

  • @ilkeratar3847
    @ilkeratar3847 21 день назад

    Versiyon 14 ile birlikte artık set ve remove işlemleride server tarafında yapılabiliyor

  • @Vacbid
    @Vacbid 23 дня назад

    Seo konusundaki yorumlarınızın hiç birine katılmıyorum. 2022 yılından bu yana google arama botları chrome ile CRA aları tarayıp indekleyebilir ve bu konuda da çok başarılıdırlar. Araştırabilirsiniz. Kaynak aklımda değil ama bayağı açıklama bulabilirsiniz. CRA da tarama bütçesi ile ilgili bir sıkıntı var o da iyi bir configle aşılmayacak bir sorun değil.

  • @AhmetErennn
    @AhmetErennn 29 дней назад

    Gzipped yazan eklentinin adı ne

  • @WaffenVerband
    @WaffenVerband Месяц назад

    Emeğine sağlık

  • @kvothe8664
    @kvothe8664 Месяц назад

    o kadar keyifli bi anlatim ki,, isim var kapatmak istiyorum ogrenme istegim agir basiyor izlemeye devam ediyorum. anlatim bu kadar akici ve kusursuz olmasa ayni etkiyi yapmazdi. elinize saglik cook tesekkurler

  • @oguzalpbozkurt
    @oguzalpbozkurt Месяц назад

    Çok teşekkürler harika anlatım.👍

  • @veyselsimsir
    @veyselsimsir Месяц назад

    Merhaba head bir türlü çalışmadı

  • @bahazenbil4430
    @bahazenbil4430 2 месяца назад

    Türkiye de ki en kaliteli anlatımı yapıyorsunuz. Ezberden çıkıp nasıl çalıştığını öğrenmek nasıl bir lütuftur. Elinize sağlık.

  • @eelguneezmemmedov1671
    @eelguneezmemmedov1671 2 месяца назад

    Tesekkurler Hocam🤍

  • @eelguneezmemmedov1671
    @eelguneezmemmedov1671 2 месяца назад

    Hocam Bir tane Proje uzerinden anlatirmisiniz Folder structure falan bunlarda onemli Baya sknti yaratiyor tutorialdan gercek real world projelere gecmek

  • @korayaslnn
    @korayaslnn 2 месяца назад

    Selamlar, bazen kodlar arasında eksik parantezler vb şeyler kullanıyorsun fakat sayfayı kaydettiğinde editör otomatik eksikleri düzenliyor bunu hangi plugin ile sağlıyorsun acaba?

    • @selcukgry
      @selcukgry Месяц назад

      "prettier vscode" diye aratarak bulabilirsin. Visual Studio code'ye eklenti olarak ekleyebilirsin, daha sonra ayarlamalarını yap tamamdır.

  • @serenaykaraer3944
    @serenaykaraer3944 2 месяца назад

    hocam repositerine nerden ulaşabiliriz?

  • @efraildokme
    @efraildokme 2 месяца назад

    öğrenmek amacıyla bir çok react dersi izledim hepsinde kafam karıştı yarıda bıraktım. next js dersleri de daha önce izlemiştim ama pek verim alamamıştım. Anlatımın çok sade, ne bildiğini göstermek için değil öğrenilmesi için çekilmiş dersler olmuş. teşekkür ederim kardeşim.

  • @haltarratay1901
    @haltarratay1901 2 месяца назад

    Hocam sizden baka baka bir klon proje yaptım. Çok benzedi ama yapacak bir şey yok. Eğitim için teşekkürler.

  • @yasindemir6258
    @yasindemir6258 2 месяца назад

    haftalardır doğru düzgün next.js öğrenebilecegim kurslar arıyorum. udemy'de yabancı bir hocanın next.js kursuna aladım ama İngilizcem pek iyi olmadığı için anlamıyorum. altyazi ile takip ediyorum ama yeterli olmuyor. Üstüne hoca çok ama çok karmaşık anlatıyor hiçbir şey anlamıyorum. Aradım aradım bazı kaynakları takip ettim en son sizi buldum. cevher bulmuş gibiyim. muhteşem anlatıyorsunuz. en son videoyu 1 sene önce çekmişsiniz. lütfen içerik üretmeye devam edin. anlatımınız çok güzel. Bir çok Türkçe kaynak tükettim yazılım alanında ama gördüğüm en iyi anlatıcı sizsiniz. bunu değerlendirmelisiniz bence. iyi günler dilerim. dersler için teşekkürler.

  • @gulbeyazozer7941
    @gulbeyazozer7941 2 месяца назад

    Hocam merhaba video için teşekkürler. Eğer kullanıcı authsa login sayfasına yönlendirmesin, dashboardda kalsın istiyorum. Bunu tek bir middlewareda tanımlayabiliyor muyuz? Nasıl bir çözümü var yardımcı olur musunuz?

  • @gokhande00
    @gokhande00 2 месяца назад

    Hocam selamlar, Next.js 15'i de sizden dinlemeyi çok isterim.

  • @alperyazirr
    @alperyazirr 2 месяца назад

    Hocam merak ettiğim bir soru var. Her page, her component için bu loading.jsx i neden oluşturuyoruz ? tek bir loading kompanenti oluşturup her yerde çağıramıyormuyuz? MovieLoading, HakkımızdaLoading filan derken kod tekrarına giriyor gibi sanki

  • @abdullah19957
    @abdullah19957 3 месяца назад

    sektöre backend ile başlanır mı

  • @ekrem9440
    @ekrem9440 3 месяца назад

    bugüne kadar izledigim Turkce yazilim videolari arasinda en iyisi sizinki. En anlasilir akici Yazilim eğitim serisi bu video serisi.

  • @madao930
    @madao930 3 месяца назад

    hocam 13.3 versiyon ile root not-found.jsx geldi :)

  • @Gulca.y_
    @Gulca.y_ 3 месяца назад

    bunları öğrendik ama yeni mezun oldugum için kimse geri dönüş yapmıyor 😢

  • @yusuf-cetin
    @yusuf-cetin 3 месяца назад

    Üzerinden zaman geçmiş. Paylaşım yapmayı bırakmışsınız. Videolarını izleyerek pixel perfect kendi tasarımımı birazda chat gpt ile html'e çevirdim. Emekleriniz için teşekkürler. Sizede göstermek isterim.

  • @erencanyakut4103
    @erencanyakut4103 3 месяца назад

    Hocam merhabalar, projeleriniz izlemeye ve olabilidğince takip etmeye çalışıyorum elinize emeğine sağlık. Bir projede primeflex kullanmamı istediler ve bir custom-theme oluşturmam gerekiyor bunu nasıl yapabilirim kaynakları çok fazla anlayamadım yardımcı olma şansınız var mı ?

  • @orhan5221
    @orhan5221 3 месяца назад

    css'e yeni başlayanlardanım oldukça açıklayıcı olmuş videon eline sağlık.

  • @nektariis
    @nektariis 3 месяца назад

    Anlatım için teşekkürler. v14 ile gelen generateMetadata fonksiyonu kullanılarak head file'ına gerek kalmadan(duplicate durumundan kaçınılıyor) da metadatalar üretilebiliyor.

  • @muratyilmazdev
    @muratyilmazdev 3 месяца назад

    Çok teşekkür ederim. Emeğinize sağlık. Nextjs'e yeni başlayanlar için çok başarıı bir eğitim serisi olmuş.

  • @nohostco
    @nohostco 3 месяца назад

    CSS'e yeni başladım sayılır gerçekten anlatımı güzel, etkili bir video olmuş elinize sağlık,

  • @amuslimintheusa
    @amuslimintheusa 3 месяца назад

    Hocam elinize sağlık anlatımınız çok güzel. ama örnekte sadece console çıktısı yazdıran fonsiyonlar var. Resolve içine text yerine method da yazabiliyor muyuz? Görsel arama motoru yazdım. ilk aramayı yaptıktan sonra div içinde resimler var ya, 2. aramayı yaparsa kullanıcı onları silip 2. arama sonuçlarını getirsin istoyoru. div.innerHTML=" " ; ile de çözülebilyor konu. ama promiseleri anlamak için bu yöntemle if(div.hasChild) ile sorgulatmat istiyorum ama öğrendiklerimi uyarlayamıyorum

  • @canyucel5392
    @canyucel5392 4 месяца назад

    @pekcanmehmet bu kursa başlamak için html css js ile belirli bir seviyede olmak gerekir mi? özellike javascriptte ne kadar ileri olmak gerekir

  • @eneskutulman260
    @eneskutulman260 4 месяца назад

    Hocam ellerinize sağlık çok güzel bir anlatım olmuş yeni başladım next.js ' e . Bu arada loadingi görüntülemek için delay koymak yerine network tabından internet hızınızı yavaşlatabilirsiniz . :)

  • @sahiniz
    @sahiniz 4 месяца назад

    Next.js 15 çıkıyor, yeni seri gelir mi?

  • @berfinbasc7958
    @berfinbasc7958 5 месяцев назад

    çok kalıtelı bır ıcerık olmuş.

  • @tugbakoc5700
    @tugbakoc5700 5 месяцев назад

    Mehmet Bey videolar için teşekkür ederim. Emeğinize sağlık. Her zaman içerik üretin, ben destekliyor olacağım.

  • @rsadyusifov3303
    @rsadyusifov3303 5 месяцев назад

    Tesekkurler

  • @PeriklesPeriklesoglu
    @PeriklesPeriklesoglu 5 месяцев назад

    teşekkür ederim

  • @PeriklesPeriklesoglu
    @PeriklesPeriklesoglu 5 месяцев назад

    teşekkür ederim

  • @PeriklesPeriklesoglu
    @PeriklesPeriklesoglu 5 месяцев назад

    teşekkür ederim

  • @PeriklesPeriklesoglu
    @PeriklesPeriklesoglu 5 месяцев назад

    teşekkür ederim

  • @PeriklesPeriklesoglu
    @PeriklesPeriklesoglu 5 месяцев назад

    teşekkür ederim