Nuxt 3 ve Vue.js Eğitimi

Eğitim Hakkında

Dosya tabanlı yönlendirmeden veri çekmeye, Nitro sunucu rotalarından SEO ve dağıtıma Nuxt 3

Nuxt.JS and Vue.JS Eğitimi, Vue 3 üzerine kurulu Nuxt 3 çatısıyla sunucu tarafı render edilen, SEO dostu ve üretime hazır web uygulamaları geliştirmeyi öğretir. Katılımcılar dosya tabanlı yönlendirme, layout ve middleware yapısını, useFetch ve useAsyncData ile veri çekmeyi ve otomatik içe aktarmayı uygular. Nitro sunucu motoruyla API uç noktaları yazılır, SSR, SSG ve hibrit render modları karşılaştırılır. Program SEO meta yönetimi ve dağıtım adımlarıyla tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; dosya tabanlı yönlendirmeyle başlayan bir Nuxt uygulaması üç gün boyunca SSR, sunucu API ve dağıtımla tamamlanır.

Seviye

Orta Seviye — Nuxt 3 ile sunucu tarafı render, dosya tabanlı yönlendirme ve Vue.js uygulamaları

Öğrenme Metodu

Sunucu tarafı render edilen bir içerik uygulaması üç gün boyunca kurulur; her modülde geliştirme sunucusunda çıktı ve kaynak kodu incelenir.

Neden Bu Eğitim?

🔍SEO ve performans

Sunucu tarafı render ve statik üretim ile arama motorlarına uygun, hızlı ilk yükleme yapan uygulamalar geliştirirsiniz.

🗂️Yapılandırılmış proje

Dosya tabanlı yönlendirme, otomatik içe aktarma ve katı dizin yapısıyla düzenli, bakımı kolay projeler kurarsınız.

🧩Tam yığın çatı

Nitro sunucu motoruyla aynı projede hem arayüzü hem API uç noktalarını yazarak tek çatıda tam yığın uygulama üretirsiniz.

Anahtar Konular

nuxt js eğitiminuxt 3 eğitimivue js eğitiminuxt kursusunucu tarafı render eğitimissr eğitiminuxt seovue ssrnuxt vue kursuön yüz geliştirme eğitimi

“Nuxt, Vue'nun esnekliğini sunucu tarafı rendering'in gücüyle birleştirir; sonuç hem geliştiriciyi hem arama motorlarını memnun eden uygulamalardır.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve kurulum gereksinimleri

1

Vue.js temeli

Bileşen, reaktivite, props ve Composition API gibi temel Vue kavramlarına aşinalık beklenir; Nuxt bunun üzerine kurulur.

2

JavaScript bilgisi

Modern JavaScript (ES6+), modül, asenkron ve fetch kavramlarına hakimiyet veri çekme konularında faydalı olur.

3

Web temeli

HTTP, istek-yanıt döngüsü ve HTML/CSS temeli SSR ve SEO konularını anlamada işe yarar.

4

Geliştirme ortamı

Node.js, npm veya pnpm ve bir kod editörü kurulu; Nuxt projesinin derlenip çalıştırılabilir olması gerekir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Nuxt proje yapısını tanır, pages dizini ile dosya tabanlı yönlendirmeyi kurar, layout ve middleware uygular ve otomatik içe aktarma mekanizmasını kullanır.

Modül 1

Proje Kurulumu ve Yapı

nuxi ile Nuxt 3 projesinin oluşturulması
Dizin yapısı ve nuxt.config.ts yapılandırması
Geliştirme sunucusu ve derleme komutları
Vue 3 ve Nuxt arasındaki ilişki ve farklar
Modül sistemi ve eklenti (plugin) kavramı
app.vue ve giriş noktasının anlaşılması

Modül 2

Dosya Tabanlı Yönlendirme

pages dizini ile otomatik rota oluşturma
Dinamik rota ve köşeli parantez parametreleri
İç içe rota ve NuxtPage yerleşimi
NuxtLink ile ön yükleme ve gezinme
Yakalama tümü (catch-all) ve 404 sayfası
useRoute ve useRouter ile programatik erişim

Modül 3

Layout ve Middleware

layouts dizini ile ortak düzen bileşenleri
definePageMeta ile sayfa düzeni seçimi
Rota middleware ile erişim kontrolü
Global ve adlandırılmış middleware ayrımı
Sunucu ve istemci middleware yürütme sırası
Hata sayfası (error.vue) ile hata yönetimi

Modül 4

Otomatik İçe Aktarma ve Composable

components dizini ile otomatik bileşen aktarımı
composables dizini ile paylaşılan mantık
useState ile SSR uyumlu paylaşılan durum
Yardımcı fonksiyonların otomatik aktarımı
Otomatik içe aktarmanın yapılandırılması
Özel composable yazımı ve yeniden kullanım

Günün hedefiKatılımcı useFetch ve useAsyncData ile veri çeker, hydration kavramını anlar, SSR, SSG ve hibrit render modlarını karşılaştırır ve route rules ile uygular.

Modül 1

useFetch ve useAsyncData

useFetch ile bildirimsel veri çekme
useAsyncData ile özel asenkron mantık
Yükleniyor (pending) ve hata durumları
Sunucuda ve istemcide çalışma farkları
Anahtar (key) ile önbellek ve tekrar çağrı
lazy ve transform seçenekleriyle veri işleme

Modül 2

Render Modlarının Anlaşılması

İstemci tarafı render (CSR) ve sınırları
Sunucu tarafı render (SSR) akışı ve faydaları
Statik site üretimi (SSG) ve prerender
Hydration kavramı ve istemciye devir
Hydration uyuşmazlığı (mismatch) hataları
ClientOnly ile yalnızca istemci bileşenleri

Modül 3

Hibrit Render ve Route Rules

nuxt.config ile routeRules tanımı
Rota bazında SSR, SSG ve SPA seçimi
ISR benzeri yeniden doğrulama (revalidate)
Önbellek başlıkları ve kenar (edge) render
Yönlendirme ve başlık kuralları
Sayfa bazlı render stratejisinin seçimi

Modül 4

Durum ve Hata Yönetimi

useState ile sunucu-istemci durum paylaşımı
Pinia entegrasyonu ile global durum
createError ile anlamlı hata fırlatma
showError ve clearError ile hata akışı
Yeniden deneme ve geri dönüş (fallback) deseni
Veri tutarlılığı ve önbellek geçersizleştirme

Günün hedefiKatılımcı Nitro ile sunucu API uç noktaları yazar, useHead ve useSeoMeta ile SEO meta verilerini yönetir ve uygulamayı farklı ortamlara dağıtma adımlarını uygular.

Modül 1

Nitro ile Sunucu Rotaları

server/api dizini ile API uç noktaları
defineEventHandler ile istek işleme
readBody ve getQuery ile girdi okuma
Sunucu tarafı veritabanı ve servis erişimi
Ara katman (server middleware) kullanımı
Ortam değişkenleri ve runtimeConfig yönetimi

Modül 2

SEO ve Meta Yönetimi

useHead ile title ve meta etiketleri
useSeoMeta ile tip güvenli SEO alanları
Open Graph ve Twitter kart etiketleri
Dinamik sayfalarda sayfaya özel meta
Yapılandırılmış veri (JSON-LD) ekleme
Erişilebilirlik ve anlamsal HTML ilkeleri

Modül 3

Sitemap, Performans ve Görsel

Sitemap ve robots yapılandırması
nuxt/image ile görsel optimizasyonu
Font ve varlık (asset) ön yükleme
Lighthouse ile performans ölçümü
Payload ve bundle boyutunun küçültülmesi
Önbellekleme stratejileriyle hız kazanımı

Modül 4

Derleme ve Dağıtım

nuxi build ve generate komutları farkı
Node sunucu olarak dağıtım (preset)
Statik hosting ve kenar (edge) dağıtımı
Vercel, Netlify gibi platformlara yayın
Ortam yapılandırması ve gizli anahtar yönetimi
Üretim izleme ve hata takibi yaklaşımı

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Nuxt yapısı

Nuxt 3 proje yapısını, dizin kurallarını ve nuxt.config yapılandırmasını kavrar, düzenli projeler kurarsınız.

✅

Dosya yönlendirme

pages dizini ile dosya tabanlı yönlendirmeyi, dinamik ve iç içe rotaları ve middleware ile erişim kontrolünü yapılandırırsınız.

✅

Veri çekme

useFetch ve useAsyncData ile sunucu ve istemci tarafında veri çeker, yükleniyor ve hata durumlarını yönetirsiniz.

✅

Render modları

SSR, SSG, CSR ve hibrit render arasındaki farkları kavrar, route rules ile sayfaya uygun stratejiyi seçersiniz.

✅

Sunucu rotaları

Nitro ile server/api altında defineEventHandler kullanarak aynı projede API uç noktaları yazabilirsiniz.

✅

SEO yönetimi

useHead ve useSeoMeta ile meta etiketlerini, Open Graph ve yapılandırılmış veriyi yöneterek SEO'yu iyileştirirsiniz.

✅

Performans

Görsel optimizasyonu, önbellekleme ve payload küçültme ile hızlı yüklenen, Lighthouse'ta yüksek puanlı uygulamalar kurarsınız.

✅

Dağıtım modları

Nuxt uygulamasını Node sunucu, statik hosting veya kenar ortamlarına runtimeConfig yönetimiyle güvenle dağıtabilirsiniz.

Kimler İçin Uygundur?

Vue.js temeli olan ve sunucu tarafı render ile SEO dostu uygulamalar geliştirmek isteyen ön yüz geliştiricileri
SPA sınırlarını aşmak isteyen Vue kullanıcıları
tam yığın Nuxt projeleri kurmak isteyen geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Vue.js temeli olan ve sunucu tarafı render ile SEO dostu uygulamalar geliştirmek isteyen ön yüz geliştiricileri, SPA sınırlarını aşmak isteyen Vue kullanıcıları ve tam yığın Nuxt projeleri kurmak isteyen geliştiriciler için uygundur. Temel Vue ve JavaScript bilgisi beklenir.

Vue bilmeden bu eğitime katılabilir miyim?

Nuxt, Vue 3 üzerine kurulu olduğu için temel Vue bilgisi gerekir. Bileşen, reaktivite, props ve Composition API kavramlarına aşinalık beklenir. Vue temeli olmayan katılımcılara önce Vue.js giriş eğitimi önerilir; bu eğitim Nuxt'un getirdiği yapı ve sunucu yeteneklerine odaklanır.

SSR, SSG ve hibrit render arasındaki fark nedir?

SSR her istekte sayfayı sunucuda üretir ve dinamik içerik için uygundur; SSG sayfaları derleme anında statik üretir ve çok hızlıdır; hibrit render ise route rules ile sayfa bazında bu stratejileri karıştırmanıza izin verir. Eğitimde üç modun akışı, avantajları ve hangi sayfa için hangisinin seçileceği uygulamalı işlenir.

Eğitimin süresi ve formatı nedir?

Eğitim üç gün sürer ve her gün dört modülden oluşur. Sunucu tarafı render edilen bir içerik uygulaması baştan sona kurulur; her modülde geliştirme sunucusunda çıktı ve kaynak kodu incelenir. Yüz yüze veya online yapılabilir ve içerik kurumun kullandığı Nuxt sürümüne göre uyarlanabilir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve uçtan uca kurulan örnek Nuxt uygulamasını belgeler; kurumsal gruplara mevcut projeler üzerinden SEO ve render stratejisi değerlendirmesiyle genişletilebilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

NUXT.JS AND VUE.JS EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Proje Kurulumu ve Yapı

Dosya Tabanlı Yönlendirme

Layout ve Middleware

Otomatik İçe Aktarma ve Composable

useFetch ve useAsyncData

Render Modlarının Anlaşılması

Hibrit Render ve Route Rules

Durum ve Hata Yönetimi

Nitro ile Sunucu Rotaları

SEO ve Meta Yönetimi

Sitemap, Performans ve Görsel

Derleme ve Dağıtım

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Javascript ve Vue.js için Başlangıç Seviye Kursu Eğitimi

Micro-Frontendleri Vue.js ile Oluşturma Eğitimi

Nuxt SEO Ustalık Kursu Eğitimi

Vue.js: Component Communication & Routing Eğitimi

Vue.js: Working with Components Eğitimi

Vue.js: Working With Forms & Unit Testing Eğitimi