• Buradasın

    Next.js

    Özetteki ilgi çekici içerikler

    • Next.js'te Fetch Kullanımı Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı Next.js'te veri çekme (data fetching) yöntemlerinden biri olan Fetch'i anlatmaktadır. Video, Fetch'in üç temel kullanım şeklini (statik veri, dinamik veri ve revalidate) detaylı şekilde açıklamaktadır. Konuşmacı, her bir kullanım şeklini örneklerle göstererek, statik sayfaların her seferinde aynı HTML'i göstermesi, dinamik sayfaların her server request'te tekrar çalışması ve revalidate sayfalarının belirli aralıklarla yenilenmesi gibi özelliklerini anlatmaktadır. Ayrıca, Fetch'in JavaScript'in normal fetch metoduna benzer şekilde kullanılabildiği ve üçüncü parti kütüphanelerle (örneğin Axios) nasıl entegre edilebileceği de açıklanmaktadır.

      • youtube.com

    • Next.js'de Veri Silme İşlemi Eğitimi

      Bu video, Mehmet Fatih tarafından sunulan bir eğitim içeriğidir. Mehmet Fatih, MSoftware Block ve Seyyar Yazılımcı olarak kendini tanıtmaktadır.. Videoda, Next.js uygulamasında veri silme işleminin nasıl yapılacağı adım adım gösterilmektedir. Önceki bölümde API'den verilerin çekilmesi ve listelenmesi yapılmış, bu bölümde ise silme işlemi için gerekli kodların yazılması anlatılmaktadır. Ayrıca hata durumlarının nasıl ele alınacağı ve tablo boş olduğunda uyarı mesajı gösterme mantığı da açıklanmaktadır.. Konuşmacı, özellikle öğrenme sürecinde olan izleyicilere istikrarlı ve azimli olmaları, bolca pratik yapmaları gerektiğini vurgulamaktadır. Video, bir eğitim serisinin bir parçası olup, bir sonraki bölümde görüşmek üzere sonlanmaktadır.

      • youtube.com

    • Next.js'te App Klasörü Yapısı ve Netflix Klon Projesi

      Bu video, bir eğitim serisinin bir parçası olup, konuşmacı Next.js'in app klasör yapısını ve kullanımını anlatmaktadır. Video, Next.js versiyon 3 ile gelen app klasörünün önemini vurgulayarak başlıyor ve bu klasörün routing akışlarını ve state yönetimini nasıl yönettiğini açıklıyor. Konuşmacı, Netflix klon benzeri bir film sitesi örneği üzerinden app klasörünün yapısını gösteriyor ve bu site üzerinde header, footer, main alan, kategoriler, film listeleri, loading state'leri ve hata sayfaları gibi bileşenleri inceliyor. Video, app klasörünün yapısını detaylı olarak anlatacağını ve ilerleyen videolarda örnek proje üzerinden devam edeceğini belirterek sona eriyor.

      • youtube.com

    • Next.js'te getServerSideProps Metodu Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı Next.js framework'ünde getServerSideProps metodunu anlatmaktadır. Video, server-side rendering kavramını açıklayarak başlıyor ve normal client-side rendering ile server-side rendering arasındaki farkları görsel şemalarla gösteriyor. Ardından, getServerSideProps metodunun nasıl kullanılacağını adım adım kod örnekleriyle gösteriyor. Konuşmacı, Rest Countries API'si üzerinden veri alma, komponent proplarına veri gönderme ve bu yöntemin SEO açısından avantajlarını açıklıyor. Video, getServerSideProps metodunun sadece pages klasöründeki sayfalarda kullanılabileceği ve modüllerin kullanıcı tarafına eklenmediği gibi önemli bilgilerle sonlanıyor.

      • youtube.com

    • Next.js Kurulum Eğitimi

      Bu video, bir eğitim içeriği olup, anlatıcı Next.js kurulumunu adım adım göstermektedir. Video, Next.js'in ne olduğunu açıklayarak başlıyor ve ardından kurulum sürecini detaylı şekilde anlatıyor. Anlatıcı, Next.js'in React framework olduğunu, TypeScript ile kullanıldığını ve server rendering yaptığını belirtiyor. Kurulum için Node.js 16.8 ve üstü sürümünün gerekli olduğunu vurguluyor ve "npm install -g npx create-next-app next-13" komutunu kullanarak kurulum yapmayı gösteriyor. Ayrıca, kurulum sonrası uygulamanın nasıl çalıştırılacağını da açıklıyor.

      • youtube.com

    • Next.js'te Komponent ve Layout Kullanımı Eğitimi

      Bu video, bir web geliştirme eğitim serisinin bir bölümüdür. Eğitmen, önceki derste oluşturulan basit bir web sitesine navigasyon ekleme konusunu ele almaktadır. Video, kod tekrarını önlemek için komponent mantığını ve layout kavramını anlatmaktadır. Eğitmen önce navigasyon komponenti oluşturarak kod tekrarını önler, ardından bu komponenti layout (master page) olarak kullanarak her sayfaya navigasyon eklemeyi gösterir. Layout kavramı, Next.js'te master page mantığına benzer şekilde, her sayfaya ortak bir tasarım ve navigasyon eklemek için kullanılır. Video, kod tekrarını önleme ve web sitelerinin daha düzenli yapılandırılmasını sağlayan temel kavramları açıklamaktadır.

      • youtube.com

    • React ve Next.js ile Web Uygulaması Geliştirme Eğitimi

      Bu video, Adem İltar tarafından sunulan bir web geliştirme eğitim serisinin bir bölümüdür. Eğitmen, izleyicilerden gelen yorumları ve sorunları ele alarak uygulamayı geliştirmektedir. Videoda, React ve Next.js framework'lerinde web uygulaması geliştirme süreci adım adım anlatılmaktadır. İçerik, side bar tamamlanması, buton komponenti oluşturma (link button ve base button), navigation komponenti stillendirilmesi, yeni sayfaların (explore, notification, messages, bookmark, list, profile) oluşturulması ve router kullanımı ile sayfa geçişlerinin yönetimi konularını kapsamaktadır. Eğitmen, kod hiyerarşisini düzenleyerek importları daha düzenli hale getirmekte, Twitter logosunun boyutunu düzeltmekte ve hover efektlerini ayarlamaktadır. Ayrıca, bir sonraki derste tema değiştirme özelliğinin nasıl ekleneceği hakkında bilgi verilmekte ve bu özelliğin sayfadaki değişkenler ve renklerle nasıl entegre edileceği açıklanmaktadır.

      • youtube.com

    • Next.js ile Web Sitesi Oluşturma Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı Next.js framework'ünü tanıtmaktadır. Konuşmacı, Next.js'i birkaç kez kullanmış ve bu bilgileri paylaşmak istemiştir. Video, Next.js'in ne olduğunu açıklayarak başlıyor ve ardından manuel setup sürecini adım adım gösteriyor. Konuşmacı, Node.js kurulumu, npm ile paket yükleme, script ekleme ve sayfaları oluşturma gibi temel adımları gösteriyor. Ayrıca, Next.js'in linkleme mekanizmasını ve stillendirme konusuna da değiniyor. Video, sıfırdan orta seviyeye kadar olan kullanıcılar için hazırlanmış olup, Next.js'in React üzerine kurulu olduğunu ve yazılmasının kolay olduğunu vurguluyor.

      • youtube.com

    • Sıfırdan Web Sitesi Oluşturma Eğitimi

      Bu video, bir konuşmacının kendi web sitesi oluşturma sürecini adım adım anlattığı eğitim içeriğidir. Video, sıfırdan bir blog sitesi oluşturma sürecini ele almaktadır. İlk bölümde Next.js framework ve Tailwind CSS kurulumu gösterilirken, ikinci bölümde Tailwind JIT özelliği, GitHub'a proje yükleme, Gitignore dosyası oluşturma, Pratier kurulumu ve Versel platformunda proje deploy edilmesi anlatılmaktadır. Video serisi altı bölümden oluşacak olup, sonraki bölümlerde layout tasarımı, blog listesi, yorum kutusu entegrasyonu ve Redis veritabanı kullanımı gibi konular ele alınacaktır.

      • youtube.com

    • Upwork Platformunda İlk Freelance İş Deneyimi

      Bu videoda, konuşmacı Upwork platformunda yaptığı ilk freelance iş deneyimini paylaşıyor. Konuşmacı, üniversite mezunu ve Next.js teknolojisi üzerine çalışmış bir geliştirici. Video, Upwork platformunda iş arama sürecini ve ilk iş bulma stratejilerini anlatıyor. Konuşmacı, boş bir profille nasıl iş bulabildiğini, advanced search özelliğini nasıl kullandığını ve düşük fiyatlı (50 dolar) bir projeyi nasıl tamamladığını detaylı şekilde anlatıyor. Ayrıca, Next.js ve TypeScript ile fotoğraf exif verilerini çıkaran bir uygulama geliştirdiğini ve beş yıldızlı bir değerlendirme aldığını gösteriyor. Video, yeni başlayanlar için platform kullanımı ve iş bulma stratejileri hakkında faydalı bilgiler sunuyor.

      • youtube.com

    • Next.js'te Server-Side Yönlendirme Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı Next.js framework'ünde server-side yönlendirme (redirection) konusunu anlatmaktadır. Video, re-direction'in ne olduğunu ve neden kullanıldığını açıklayarak başlıyor. Konuşmacı, server-side ve client-side yönlendirme arasındaki farkları, özellikle güvenlik açısından server-side yönlendirmenin avantajlarını vurguluyor. Ardından Next.js'te server-side yönlendirme yapmanın nasıl yapılacağını kod örnekleriyle gösteriyor. Ayrıca, SEO açısından 200 status kodunun kullanılmasının önemi ve Google gibi arama motorlarının bu konudaki beklentileri hakkında bilgi veriyor.

      • youtube.com

    • Next.js ile Uluslararasılaştırma Eğitimi

      Bu video, Oğuz adlı bir eğitmen tarafından sunulan Next.js framework'ünde uluslararasılaştırma (internationalization) işlemini anlatan bir eğitim içeriğidir. Videoda, Next.js'in 10. versiyondan itibaren sunduğu uluslararasılaştırma özelliği adım adım gösterilmektedir. Eğitmen, yeni bir Next.js projesi oluşturma, next.config.js dosyası ile dil desteği yapılandırma, dil dosyalarını oluşturma ve kullanıcı dil seçimi yapma sürecini kod örnekleriyle anlatmaktadır. Ayrıca, router push ile yönlendirme yaparak ve iki farklı dosya üzerinden metin değiştirme işlemini uygulamalı olarak açıklamaktadır. Eğitim, browser'daki dil ayarlarının nasıl çalıştığını ve kullanıcı dil seçimi yapıldığında içerik nasıl değiştiğini detaylı olarak göstermektedir. Bu işlem için özel bir paket yüklemenin veya konfigürasyonun gerekmediği, sadece birkaç kod parçası ve iki lokal tanımla gerçekleştirilebileceği vurgulanmaktadır.

      • youtube.com

    • Same Dev Yapay Zekası Tanıtımı

      Bu video, bir kişinin Same Dev adlı yapay zeka aracını tanıttığı bir eğitim içeriğidir. Konuşmacı, yapay zekanın nasıl çalıştığını ve kullanımını göstermektedir. Videoda Same Dev yapay zekasının, sadece prompt kullanarak istenen web sitesini kopyalayabildiği gösterilmektedir. Konuşmacı önce Amazon'u klonlama deneyimini paylaştıktan sonra, Data Body web sitesini klonlama sürecini adım adım göstermektedir. Yapay zekanın React ve Next.js kullanarak web sitelerini klonladığı, ancak bu işlem uzun sürdüğü ve arada takıldığı belirtilmektedir. Ayrıca, klonlanan web sitelerinin kaynak kodlarına nasıl erişilebileceği de gösterilmektedir.

      • youtube.com

    • Next.js Uygulamalarında Ortam Değişkenleri Kullanımı

      Bu video, bir eğitim içeriği olup, Next.js uygulamalarında ortam değişkenlerinin nasıl kullanılacağını göstermektedir. Video, Next.js'in ortam değişkenleri ile çalışmak için sunduğu yerleşik destek üzerine odaklanmaktadır. İçerikte, .env dosyası oluşturma, ortam değişkenlerini tanımlama ve bu değişkenlere erişim sağlama adımları gösterilmektedir. Ayrıca, gizli bilgilerin tarayıcıda gösterilmemesi için "NEXT_PUBLIC_" öneki kullanmanın önemi vurgulanmaktadır. Video, örnek bir blog uygulaması üzerinden pratik uygulamalar içermektedir.

      • youtube.com

    • React'ın Yeni Kurulumu: Next.js

      Bu video, bir eğitim içeriği olup, eğitmen React'ın yeni kurulumunu anlatmaktadır. Videoda React'ın artık create-react-app'i desteklemeyeceğini ve yerine Next.js, Gatsby ve Remix gibi full stack framework'leri önerdiğini açıklıyor. Eğitmen, Next.js'in kurulumunu adım adım gösteriyor ve projenin nasıl başlatılacağını anlatıyor. Ayrıca Next.js'in hazır router yapısı, image komponenti optimizasyonu gibi ekstra özelliklerini kısaca açıklıyor. Video, bir sonraki derslerde Next.js, TypeScript ve Tailwind CSS ile yeni bir tutorial'a geçileceğini belirterek sona eriyor.

      • youtube.com
  • Yazeka sinir ağı makaleleri veya videoları özetliyor