NEXT.JS (v13) ile Film Uygulaması Yapalım
HTML-код
- Опубликовано: 18 окт 2024
- Next.JS 13 ü tamamen kavramak amaçlı olarak bir film uygulaması yapalım :)
#react #reactjs #nextjs #nodejs #api #frontend #backend #webdevelopment #webdesign #frontenddeveloper #tailwindcss #html #css #mernstack #javascript #typescript
Dostum eline ağzına sağlık çok süper bir anlatım olmuş uğraşıyorsun böyle hakkın ödenmez hakkını helal edesin bizlere
Rica ederim ne demek.Sizlere bir şeyler katabiliyorsam ne mutlu bana :)
Eline sağlık gerçekten çok açıklayıcı olmuş. Tek oturuşta sıkılmadan tamamladım ve çok verim aldım. Umarım daha güzel projeler de gelir. Abone olundu :)
Çok tesekkür ederim :)) Daha iyileri gelecek hiç şüphen olmasın 🙌
Bizi yalniz birakmadisin icin tskler Berkant cok faydali oluyorsun. Bizleri sakin yalniz birakma.👍
Cok tesekkür ederim :) Aslında anormal bir yogunlugum var ama yinede elimden geldigince videoları atmaya devam edecegim
tek kelimeyle harika anlatım ilaç gibi geldi
Begenmene sevindim :) Daha iyileride gelecek yakında
hocam elinize sağlık. videolarınızın devamını bekiyoruzz
Cok tesekkür ederim. Devamı mutlaka gelecek :)
Elinize sağlık hocam çok kaliteli ve sade bir anlatım
EyvAllah kardesim.Cok daha güzel seyler yapacagız 🙌
Eline saglik harika bir video. Bir sorum olacak, acaba rtk query gibi bir yapiyi da burada kullanabilir miyiz? Daha buyuk projelerde fetch islemleri icin. Performans farki olur mu pek fikrim yok ama sormak istedim simdiden tesekkurler.
güzel projeydi devamını bekleriz hocam
3-4 gün sonrasını bekle o zaman.Cok daha iyisi gelmek üzere :))
Abi içeriklerin çok güzel 💕
Cok sagol abicim :) ❤️
Bir sonraki proje typescript ile olursa tadından yenmez.
Kafamda typescript ile alakalı baya bir sey var.En kısa zamanda güzel bir icerik oluşturacağım
hocam bu next theme eklentisi yerinde direkt boolean değer içeren useState ile icon şeklinde button yaparak buna onclick özelliğiyle boolean değeri true ya çevirip buna bağlı olarak bu state in true olması halinde body e bg-black classname i verse daha kısa ve pratik olmaz mıydı?
O sekilde de yapabilirsin ancak bu seferde yazı renklerinin terse cevrilmesi bir nebzede resimlerin çevrilmemesi gibi kombinasyonlar biraz karıştırıcı olabiliyor
Elinize sağlık
Rica ederim ne demek :)
Hocam eline sağlık
Cok tesekkürler İbrahim :)
hocam sizin çektiğiniz apiyi çekince hata alıyorum ve en başta apilerin görünmesi için alabilmemiz için bir yeri atladım demiştiniz, ne yapmam gerekiyor tam olarak
Apiler degismis büyük ihtimalle.Bu videoyu cektikten belli bir süre sonra cogu kisi senin söylediklerini söyledi bana.Bence burada baska bir apiden yararlanmak daha mantıklı olacaktır
Hocam 1:00:00 itibari ile neden next/link kullanmayıp next/navigation üzerindne useRouter kullanmayı tercih ettik? Ben Link ile denedim öyle de çalıştı. Hangisinin kullanımı daha makul?
İkisinide kullanabilirsin.Her konuya deginmek istedigim icin useRouter uda kullandım.Hangisi kolayına geliyorsa onu kullan :)
Elinize anlatımınıza sağlık, çok teşekkürler hocam
Hocam Next.JS kullanarak auth sistemi de kullanabileceğimiz bir blog sistemi gelir mi? Belki JWT kullanarak belki de Firebase Google Auth
Tabii ki yaparız.Onuda ekleyelim listeye
Hocam eline sağlık. Kaynak kodları da paylaşırsanız daha kullanışlı olabilir.
Cok teşekkürler.Son video ile birlikte kodları paylasmaya basladım.Biraz gec oldu ama bundan sonra bu tip projelerin kaynak kodlarını githuba atıyor olacagım
hocam bi sorum olucaktı. Nextjs v13 yazıyorum .header ve sidebarda login ulunduğunda ve login olunmadığında gösterilen şeyler farklı. header componentinin içinde logout butonunu kullanarak logout olunduktan sonra bu componentlerin refresh olunması gerekiyor ki login olunmadığındaki şeyleri görebileyim . bunu nasıl sağlayabilirim
Endpointe istek attıktan sonra sana backend tarafından gelen tokeni cookielere ya da localstorage icine kaydetmen lazım daha sonra da navbar kısmında onu cagırıp eger kayıtlı token varsa sunu göster yoksa diger kısmı göster gibi islemler yapman lazım.Refresh atmadan otomatik yansımasını istersende useEffect altındaki array parametresini location gibi bir parametreye baglayıp anlık olarak değiştirebilirsin
NextTheme kısmında hata alanlar htmle suppressHydrationWarning eklerse hatayı engelleyebilirler.
örn:
Eline sağlık, Nexte yeni başlayan biri olarak çok şey öğrendim. Daha da üst seviye bir proje de geliştirebilir misin?
Rica ederim :) Next 13 ü kullanarak cok daha üst seviye projeler yapacağım.Aklımda bir iki tane saglam proje fikri var
💥💯
🙏🙌
Selam. Ellerinize saglik. Warning: Extra attributes from the server: data-theme,style boyle bir error aliyorum ve gece mooduna degismedi 20:07-de , Nasil çöze bilirim ?
Selamlar, buna aksam bakıp dönüs yapıcam sana :)
Tesekkur ederim@@bk.berkantkaya Ben baktim bu bir "Warning" yani "Error' deyil, yuklediyimiz paket "next-themes" "html"-e attributlar ekliyor o yuzden.
Hocam elinize sağlık çok güzel olmuş , aklıma bazı sorular takıldı.
1-Next js 'i böyle saf kullanmak varken neden redux veya hooks ile kullanalım(yanlış sorduysam affola bilgim eksik :) )
2-classname'nin içine bir şeyler yazarken altta kodlar gözüküyor ama bende gözükmüyor elle yazıyorum onu nasıl yaptınız acaba
cok tesekkür ederim.İlk soruna şöyle cevap vereyim.Redux aslında next.js , react ya da vue ya filan bakmaz.Mesela sen x sayfasında tanımladıgın bir state i y sayfasında rahatca kullanmak istersen ya da buna benzer durumlar olursa projene kurabilirsin.Yani aslında tamamen ihtiyaca yönelik bir sey.Next yazınca, redux kullanmaya gerek yok gibi bir durum söz konusu degil.Ayrıca next ya da reactı kullanıp hookları kullanmamak mümkün degil :) İkinci sorunu tam anlayamadım biraz daha detaylandırırsan cevap verebilirim :)
@@bk.berkantkaya hocam birde tailwind kullanmadık dimi biz , ona hitaben bir kod yazdığımızı görmedim , sadece eklenti indirdk
@@MuhammedDemirell classNameler icine yazdıgım css ler aslında tailwind.Yani kullandık tailwindi
"tailwind css intellisense" extensionunu kurarsan hepsini elle yazmak zorunda kalmayacaksın önizleme sende de görünecek @@MuhammedDemirell
hocam su title degismiyor. 13 sonradan degistirmis olabilir mi? cunku bununla da ilgili bir sey bulamadim. nextjs orgdaki de calismiyor, acayip bir durum
Titledan kastın nedir tam olarak metadatalardan mı bahsediyorsun
@@bk.berkantkaya evet
@@Gitartelitete sorunu çözebildin mi bende de çalışmıyor
layout içinde:
export const metadata = {
title: "MovieApp"
}
tesekkurler, artik buldum xdd@@mustafasenkaya6457
Hocam on numara anlatıyorsun eline sağlık fakat ufak bir sorun var oda biraz robot gibi konuşuyorsunuz, biraz daha samimi olursanız tadından yenmez
Bu yazılım öyle bir sey ki hızlı hızlı konusup gecince cogu kisi tarafından anlasılmıyor.O yüzden olabildigince kelimeleri tane tane kullanmaya calısıyorum.Ne yalan söyleyim normalde bende bazen hızlı hızlı gercege yakın konusmak istiyorum ama bu seferde anlamayan arkadaslar oluyor.Elbet ayarını tuttururuz be :)
hocam latest bölümü çalışmıyor. sitedan da baktım genel olarak kodda sorun varmış gibi.
Aynen öyle kardesim.Endpointlerde latest a göre cekebilirsiniz diyor ancak kod üzerinden veriler gelmiyor.Latest yerine baska bir parametre ekleyerek işleme devam edilebilir :)
Hocam apiden bir türlü şu linki bulamadım olmuyor yardım eder misiniz
Yarın bakayım kardesim, unutursam mutlaka hatırlat bana
Merhaba hocam, json server ile fake API yapimi ve bu api yi react projesinde kullanmak hakkında video gelir mi?
Merhabalar, bunu da listeye ekleyelim o zaman :)
@@bk.berkantkaya çok yararlı olur hocam teşekkürler.
Populer fılmler sayfasına fetch isteğini yapamıyorum acaba sorun mu var
Oranın apisi sorunlu.Baska bir parametre kullanabilirsin sayfasından :)
Elinize emeğinize sağlık Tailwind css otomatik responsive sağlıyor mu?
Çok tesekkürler.Tailwind otomatik responsive saglamaz ama sm md lg gibi ekran boyutları icin custom yapıları oldugundan isini cok kolaylastırır.Bir videomda sadece tailwind ile responsive bir sayfa yapmıstım.Onu inceleyebilirsin
movie details icin fetchlediginiz api sitede hangisi?
ya nedensizce head klasörüme yazdığım şey sekmemin başlığı olmuyor
api de çekemiyorum site değişmiş bulamıyorum :/ Kaydolma işlemlerini tamamladım key aldım ama veriyi çecek link i bulamıyorum
Bakmak lazım ya.Sitenin degismesi ilginc.Bulabilirsem linkini buraya bırakırım kardeşim
özel hoca gibisin abi bir şekilde halettim adamsın
hocam video, benim yaptığım, vs code , vscode gezinme cubuğu arasında dolaşırken öldüm. üç güne zor bitiririm ben bu videoyu :))
hata 1: hoca providersle sarmalar sarmalamaz siyah oldu. eğer sizinki de direk siyah olmazsa videoyu sonuna kadar devam ettirin sonunda siyah olacak : )
39:35 hocam searchparamsın içi boş geliyor acaba siz onu nasıl gönderdiniz pageye
Bugun bitirdik askerligi.Dediklerine birkaç gün icinde bakacagım.Bende merak ettim :)
@@bk.berkantkaya ayyy gözünüz aydın hocam
bu yorumu okuyunca gülmüştüm, iki saatlik video 3 güne mi biter diye, 4.gün hala bitmedi :D hatalarla hastalıkla uğraşmaktan zor ilerledim
app dir stabıl degıl calısmıyor
Tam olarak anlamadım demek istedigini
Hocam github kodları var mı
Bir tanede deploy videosu cekecegim. Orada githuba atmak durumunda kalacagım zaten.Yarın aksama kadar atmıs olurum diye düşünüyorum :)
@@bk.berkantkaya çok teşekkürler hocam