JavaScript frameworks are pre-written code templates for building web applications. Frameworks provide structured foundation and tools for efficient development. Frameworks help developers build websites and apps more quickly
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.
Layouts are reusable UI components shared between multiple pages. Next.js 13 introduced built-in layout support. Layout components must export from layout.js or layout.tsx
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.
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.
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.
Next.js, Prisma, Vercel Postgres and GitHub authentication are used for blogging app. Free Postgres database is hosted on Vercel with environment variables. Prisma CLI creates database schema and connects to PostgreSQL
HTML is a markup language, DOM is an object model of HTML. Server Side Rendering (SSR) renders HTML on server, Client Side Rendering (CSR) renders in browser
Article demonstrates Next.js deployment to GitHub Pages with GitHub Actions. Project uses React 18 and Next.js framework from previous freeCodeCamp tutorial. Basic knowledge of React, Next.js, and GitHub is required
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.
React introduced Zero-Bundle-Size React Server Components in late 2020. React has changed from client-side to server-side component architecture. Next.js has adopted server components approach
Bu video, bir yazılım eğitim içeriğidir ve eğitmen tarafından Next.js ve Strapi kullanarak pagination (sayfalama) oluşturma süreci adım adım gösterilmektedir.. Video, mevcut uygulamanın sorunlarını çözerek başlıyor ve yeni bir "movies" sayfası oluşturuyor. Ardından Strapi'nin limit filtresi kullanarak her sayfada üç film gösterme, Next.js router ile sayfa geçişleri yapma ve önceki/sonraki sayfa butonları oluşturma konularını ele alıyor. Ayrıca Strappy platformunda get server-side props kullanarak sayfa numarasını hesaplama ve Strappy'nin count endpoint'ini kullanarak API'den gelen verilerin sayısını alma işlemleri gösteriliyor.. Eğitim boyunca kod yazarken pratik çözümler sunuluyor ve Strapi'nin start fonksiyonu gibi pagination için özel özellikleri de gösteriliyor. Video sonunda tüm kodların GitHub'da paylaşıldığı belirtilmektedir.
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.
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.
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.