Next.js İnteraktif Kursunda Öne Çıkarılan Kavramlar Neler?
Giriş:
Next.js sunduğu bir çok özellikle geliştiricilerin ilgisini çekmeye devam ediyor. Özellikle full-stack geliştirme için Vercel araçları ile ortaya koyduğu bütünleşik çözümler büyük merak uyandırıyor.
Ben de Next.js’in 15. versiyonuyla neler yaptığını sorgularken aşağıda linki bulunan kendi ücretsiz interaktif kursunu buldum ve onu tamamladım.
Kursun oldukça akıcı olduğunu ve iyi hazırlandığını söyleyebilirim. Bir proje özelinde ilerlemesi, bölümlerin net olarak ayrıştırılması, bölüm sonlarında sorular ve egzersizlerle öğretimi pekiştirmesi sıkılmadan ilerlemenizi sağlıyor. Ben de bu yazı ile birlikte öğrendiğim, ilgimi çeken hususları sizlerin dikkatine sunmak istedim.
1- Proje Bilgisi
Proje basitleştirilmiş olarak bir finansal dashboard hazırlanmasını temel alıyor. Çok fazla kod yazmanızı gerektirmeden öğretilmek istenen noktalara odaklanılıyor.
- Bir landing sayfası.
- Bir login sayfası(odak noktası:authentication).
- Dashboard sayfası (odak noktası; veri çekme işlemleri).
- Faturalar özelinde CRUD işlemlerinin gösterimi
- Vercel tarafında veritabanı oluşturma
Paket Yönetimi
Daha hızlı ve etkili olması nedeniyle paket yöneticisi olarak pnpm kullanımı öneriliyor.
Dosya Yapısı
Projenin dosya yapısı; görsel bileşenlerin ve iş mantığının ayrıştırıldığı bir model sunuyor. Sayfalama bazlı bir route’lama olduğunu için bu yapılar da sahip olacakları URL’lere göre ayrıma tabi tutuluyor. Config ve public klasörleri alışık olduğumuzu haliyle konumlandırılıyor.
Placeholder Veriler
Projede kullanılacak veriler, ileri kullanımlar için sunuluyor. Ayrıca oluşturulan veri tabanı için bu yapılara uygun olarak bir geliştirme sunuluyor.
Typescript
Projede type güvenliği açısından typescipt kullanılıyor.
2- CSS(Stilleme) Çözümleri
Global CSS
Uygulama geneli işlenecek stilleme gereklilikleri bu dosyada uygulayanarak layout dosyasına import edilip kullanım imkanı elde eder.
Tailwind ve CSS Modülleri
Projede Tailwind kullanıldığı için global CSS tanımlamaları bu framework’ün varsayılan yapıları import edilerek uygulandı.
Stillemede çakışmaları engelemek açısından her iki yapı da önemli kullanım alanları sunuyor. Projede sağladığı utility class’ların hızlandırıcı etkisi göz önüne alınarak Tailwind yönünde bir tercih yapılmış.
clsx
Şartlı stilleme gereklilikleri ortaya çıktığında oldukça kolay ve anlaşılabilir bir çözüm sunması nedeniyle bu kütüphane kullanılmış.
Diğer stilleme çözümleri
Gerek Tailwind gerekse CSS modülleri Next.js’te hem ayrı ayrı hem de birlikte olacak şekilde tercih edilen yöntem olarak görülüyor. Ancak Sass ya da CSS-in-JS kullanımları da tercih edilebilir.
3- Yazı Fontlarının ve Image’ların Optimizasyonu
next/font
Next.js sağladığı bu modül ile fontların otomatik olarak optimize edilmesini sağlar. Font dosylarını build zamanında indirerek diğer statik assetler ile birlikte barındırır. Bu sayede fontlar için yapılacak servis çağrılarına gerek olmaz.
next/image
<img/> konusu, yapısı itibariyle geliştiricileri responsive yapı ve yüklenme süresinin optimizasyonu yönüyle oldukça zorlar.
Next.js <Image/> bileşeni ile bu optimizasyonları arka planda yapıyor.
4- Layoutların ve Sayfaların Yapılandırılması
Next.js routing çözümü olarak dosya sistemi ile çalışmaktadır. İç içe geçmiş klasörler aracılığıyla URL segmentleri oluşturulur.
page.tsx dosyası özellikli olarak kullanılır ve route’a erişim sağlanması açısından zorunlu bir bileşendir.
Route klasörleri altında adresleme sağlamadan bu segment ile bir arada bulundurulmak(colocate) istenen bileşenler, test dosyaları ya da ilgili kod parçaları oluşturulabilir.
Next.js’te özel layout.tsx dosyası ile UI oluşturarak bir çok sayfada paylaşım imkanı sunulabilir.
Partial Rendering
layout.tsx dosyası ile kazanılan bir fayda da sayfalar arasında navigasyon yapıldığında sayfa kısımları render olurken layout kısımları render olmaz.
Root Layout
Uygulamanın en kökünde oluşturulan bu layout tüm sayfalara erişim sağlar. Font tanımlaması, <html> ve <body> taglerin değiştirilmesi ve metataglerin eklenmesi gibi işlemler bu dosya üzerinde yapılabilir.
5- Sayfalar Arası Navigasyon
next/link
<Link/> bileşeni sayesinde client-side navigasyonu yapma imkanı tanır.
Next.js route segmentleri ile otomatik olarak kod bölümlemesi(code splits) sağlar.
<Link/> bileşenleri tarayıcı görünümünde ortaya çıktığında Next.js bu bağlantılı route ile alakalı kodları önceden çağırma(prefetches) işlemine tabi tutar.
usePathname
Next.js sağladığıusePathname() hook’u ile aktif olan linkin gösterilmesine yardımcı olur.
6- Veritabanın Kurulması
@vercel/postgres
Yalnızca ön-yüz geliştirme ile ilgilenen kişiler için yabancı gelebilecek bir durum olmasına karşın bir arayüz aracılığıyla veri tabanı oluşturma özelliği sunması Next.js’in full-stack olma yolundaki önemli göstergelerinden biri olduğu söyleyebiliriz.
Deploy süreçlerinin otomatik olarak yönetilmesi için Github ve Vercel entegrasyonu yapmamız gerekmektedir.
Atılan her yeni commit’te CI/CD süreçleri tetiklenir.
Storage
Proje üzerinde oluşturulan Next.js Route Handler ile veritabanını tarayıcı üzerinde oluşturulan bir route ile besleyebiliriz.
Süreçleri yönetmek için SQL bilgisi gerekmektedir. Vercel sağladığı panel ile veritabanı oluşturma imkanı tanır. Panel, verileri görüntüleme ve sorgu atma özellikleri barındırır.
7- Veri Çağırma
API Katmanı
Veritabanı güvenilirliği açısından ara katman olarak 3.party ya da proje içinde oluşturulabilen Route Handlers ile sorgu yapılabilir.
Veritabanı Sorgusu
API servisleri ile ya da React Sunucu bileşenleri ile veritabanındaki mantıksal işlemlerin yönetilmesi sağlanabilir.
React Sunucu Bileşenleri
Yeni bir yaklaşım olarak projeye bazı özellikler katar.
async/awaitsyntax ile sunucu tarafında veri çağırma işlemi sağlar. Client-side olanuseEffect,useStateveya veri çağırma kütüphanelerine olan bağımlılığı ortadan kaldırır.- Sunucu tarafında çalıştığı için maliyetli işlemlerin client-side’ta yapılmaması adına alternatif sunar.
- Sunucu tarafında olması veritabanı sorguları için API katmanı oluşturma gerekliliğini ortadan kaldırır.
SQL Kullanımı
import { sql } from ‘@vercel/postgres’;
SQL gerek endüstri standardı olması gerekse Vercel’in sağladığı güvenlik avantajları gibi bazı faktörler sayesinde projede React sunucu bileşenleri içinde kullanım alanı bulur.
Request Waterfall
“Waterfall”, servis çağrılarının bir önceki çağrının bitmesine bağlı olarak tetiklenmesini referansla kullanılan bir terimdir.
Yöntemsel olarak da tercih edilebileceği gibi istemsizce uygulandığında performans problemleri ortaya çıkarır.
Paralel Veri Çağırma
“Waterfall”ın sorun yarattığı durumda servis çağrılarının paralel olarak yapıldığı bir çözüm ortaya koyulabilir.
JavaScript tarafından sağlanan Promise.all() veyaPromise.allSettled() bu işlemi yapmak için kullanılır. Ancak burada en yavaş gerçekleşen servis çağrısına bağımlı olmamız gibi dezavantajlı bir durumla yüzleşmemiz gerekir.
8- Statik ve Dinamik Rendering
Statik Rendering
Blog siteleri ya da ürün sayfaları gibi dinamik veri bağımlılığı çok olmayan durumlarda bu render çözümü kullanım alanı bulur.
Daha hızlı, sunucu yükünün az olduğu ve SEO yönüyle avantajlı Web siteleri oluşturmak mümkün hale gelir.
Dinamik Rendering
Oluşturulan içeriklerin sunucuda çağrı zamanında oluşturulduğu yönteme dinamik rendering adı verilir.
Gerçek zamanlı, kullanıcıya özel ve çağrı zamanında veri sağlaması yönüyle avantaj sağlar.
Dinamik rendering ile uygulamanız en yavaş veri çağrınız kadar hızlıdır.
9-Streaming
Dinamik renderlama kısmında bahsettiğimiz en yavaş servis çağrısının tüm sayfayı bloklanmasını engellemek adına ortaya çıkmış bir çözümdür.
Route içinde servis bağımlılıklarına göre oluşturulan küçük birimlerin(chunks) aşamalı olarak yayınlanmasını temel alır.
loading.tsx
Özel isimlendirmeye sahip bu dosya ile yükleme zamanında ikinci bir seçenek(fallback) olarak UI oluşturabilirsiniz.
Skeletons
İskelet yapısı olarak kullanılan bu yöntemde dinamik verinin sunucu tarafından gelme sürecine kadar fallback bir görünüm ile daha yumuşak bir geçiş yapılmasını sağlar.
Streaming ile amaçlanan küçük birimlerin yükleme süreçleri bir birinden bağımsız olarak bu taslak görüntüler ile elde edilebilir.
Route Grupları
() parantez gösterimi ile oluşturulan klasör altında dosyaları mantıksal bir bağlam ile URL yapısını etkilemeden konumlayabiliriz. Bu aynı zamanda uygulama geneli, sayfa ya da bileşen özelinde yükleme görünümlerini bir birlerini ezmeyecek biçimde oluşturmamız için bir yöntemdir.
<Suspense>
React Suspense yapısı ile birlikte bileşen seviyesinde streaming yapabiliriz. Dinamik bileşenleri bu bileşen ile sararak fallback UI görünümü sağlayabiliriz.
Bu bileşeni kullanırken çeşitli kriterlere göre bir karar vermemiz gerekir. Bileşenler barındırdığı veriler yönüyle servis bağımlılığı taşıyorsa, kullanıcı deneyimi ve içerik önceliklendirmemiz nasıl olacaksa buna göre deneysel olarak kendimize en uygun olacak yöntemi belirleyebiliriz.
Sunucu bileşenleri ve Suspense yapısı streaming adı verilen bu yeni render yapısını bizlere sundu. Ancak bu yapıları kullanırken son kullanıcı deneyimi bizler için en önemli faktör olacaktır.
10- Partial Prerendering (Kısmi Önişleme)
Deneyimsel olarak sunulan bu yeni özelikle Next.js hem statik hem de dinamik rendering yapmanın avantajlarını aynı route üzerinde elde etmimiz için geliştirildi.
React Suspense yapısının kullanımı ile dinamik içeriklerin renderlanması şartların sağlanması için ertelenirken statik içerikler yükleme zamanında önişlemeden geçirilir. Dinamik görünümler için fallback yapı da bu statik oluşumda yer edinir.
Bir bileşeni Suspense ile sarmak onu dinamik hale getirmez, Suspense bir ara katman olarak kullanılır.
Bu yapının kullanımı yönüyle en güzel tarafı da yalnızca config klasörüne ekleme yapmamız ve bunun dışında kod yapımızda herhangi bir değişikliğe gitmemizdir.
Özet
Veri çağırma ile başlayan 7. bölümle buraya kadar aslında bağlantı konular üzerinde durduk.
- React sunucu bileşenleri ile sunucu tarafında veri çağırma işlemlerinin sağlayacağı avantajları gördük.
- SQL yapılarının doğrudan kod yapımıza dahil edilmesi ile client tarafında işlem yükümüzü azaltabileceğimizi anladık.
- Javascript ile paralel servis çağrılarının yapılmasını irdeledik.
- Paralel servis çağrılarının dezavantajı ile streaming ile baş edebileceğimizi yöntemsel olarak işledik.
- Kısmi önişlemenin statik ve dinamik renderig yapılarının ortaklaşa kullanımı ile sunacağı fayda üzerine konuştuk.
11- Arama ve Sayfa Numarası Ekleme
URL search params
Client tarafında yapılmasının yanı sıra URL parametreleri kullanılarak server tarafında da arama yapılabilir.
URL arama parametreleri ile sunucu tarafı arama gerçekleştirmenin;
- Kayıt altına alma ve paylaşılabilme,
- Sunucu tarafı işleme ve ilk yükleme optimizasyonu,
- Analitik ölçüm ve izlenebilirlik,
sağlaması yönüyle avantajları bulunmaktadır.
Next.js API’leri: useSearchParams, usePathname, veuseRouter
Genel işleyiş aşamaları aşağıdaki gibidir.
- Kullanıcı girişini yakalama.
- Arama parametreleri ile URL’i güncelleme.
- URL ile input alanını senkronize etme.
- Arama sorgusu ile tabloyu güncelleme.
useSearchParams() hook vs. searchParams prop?
Client tarafında parametre okunması yani kullanıcı girişi yapıldığında tekrar sunucuya gitmemek adına hook kullanırız, server tarafında prop ile ilerleyebiliriz.
Pagination
URL parametreleri kullanılarak sayfalama yapmak tıpkı arama fonksiyonu gibi çalışır.
Arama yapılan alan için oluşturulan sorguya sayfa için gerekli parametre sağlanan toplam sayfa sayısına göre eklenir ve sonrasında tam URL oluşturulur.
Lifting state up or server ?
URL parametleri ile yapılan arama ve sayfalama state yönetimini sunucuya kaldırmamıza olanak sağlar.
12- Verileri Mutasyona Uğratma
React Server Actions
Bir API ucuna ihtiyaç duymadan asenkron kod yapılarını sunucu tarafında işleyen aksiyonlar olarak hem Client hem de Server bileşenlerinde kullanılabilen veri mutasyonlarının yapılabildiği fonksiyonlardır. Veri güvenliği açısından önem arz ederler.
Progressive Enhancement
Form yapılarında, server aksiyonlarını server bileşenler ile kullanmak Javascript kullanım dışı bırakılsa bile mümkün hale gelir.
API'ler revalidatePath ve revalidateTag
Next.js’in cache mekanizmasına derinden entegre oldukları için cache’lerin tekrar validasyonu gerçekleştirilebilir.
Native FormData
React Server Aksiyonları bir POST API ucu yaratarak form elementlerinin “action” attribute’una bunu geçmemizi sağlar. Veri yapısı olarak native FormData’yı kullanır.
Normal HTML yapıların da action attribute’una API ucunu geçeriz. Ancak React bu attribute’u özelleştirdiği için arka planda server aksiyonlar bunu oluşturur. Bu nedenle URL tanımlama gereği ortadan kalkar.
Validasyon kütüphanesi Zod
Typescript’i önceliklendiren bu kütüphane ile şema bazlı form nesnelerinin eşleşme ve validasyon kontrollerini yaparız.
revalidatePath ve redirect
Next.js Client’ta Router cache mekanizması ve sahip olduğu “prefetching” özelliği ile daha hızlı navigasyon yaptırır. Bu cache mekanizmasını tekrar validasyona tabi tutmak için “revalidatePath” fonksiyonunu kullanırız. “redirect” fonksiyonu ile de route’lar arasında yönlendirme yapılabilir.
Dinamik Route Segmentleri
Tam ismini bilemediğimiz dinamik route’lar için [ ] gösterimi ile dosya bazlı oluşumlar yaparız. Örnek olarak, [id], [post] or [slug].
Server Aksiyonlarına Parametre Geçme
Bu aksiyonlar doğrudan parametre kabul etmez. Bunun yerine Server Aksiyonlar JS bind kullanır. Bu sayede geçilen herhangi bir değer şematik halde kodlanmış olur.
13- Hata Yönetimi
redirect ‘in try/catch bloğu dışında kullanılması
redirect kendi mekanizması nedeniyle hata üreterek çalıştığı için “try/catch” bloğu içinde kullanıldığında “catch” tarafından yakalanabilir, bu nedenle yalnızca “try” başarılı döndüğünde kullanılmalıdır.
error.tsx dosyası
Route segment’leri için bir UI sınırı oluşturarak beklenmedik tüm hataları yakalayıp kullanıcılara fallback gösterimi sunulabilir.
notFound fonksiyonu
Veri çağırma işleminde kaynağa erişilemiyorsa ortaya çıkacak hata mesajı yerine daha anlamsal (404 mesajı gibi) bir yapı kullanmak için bu fonksiyon kullanılabilir.
not-found.tsx dosyası
Özel olarak isimlendirilmiş bu dosyayla da route yapısına has fallback görünümler oluşturulur.
14- Erişilebilirliğin Geliştirilmesi
eslint-plugin-jsx-a11y
Next.js, sahip olduğu ESLint konfigürasyonu ile erişilebilirlik sorunlarını erkenden yakalama imkanı tanır.
Opsiyonel olarak package.json dosyasına next lint script’i eklenerek bu durum test edilebilir.
Form Validasyonu
- Client Tarafı
Elementlere ilgili gerekliliği aktararak tarayıcının sağlağı özellikleri kullanmayı ya da çeşitli kütüphaneler kullanarak konfigüre edilmiş hata yönetimi çözümleri sunmayı temel alır.
- Server Tarafı
Sunucu tarafında hata yönetimi; veritabanına gitmeden veri kontrolü, kötü niyetli kullanıcıların client tarafında yarattığı riski azaltması, tek bir doğruluk kaynağı oluşturması sayesinde tercih edilebilir bir çözüm olarak öne çıkar.
useActionState hook’u ile hata yönetimi ve kullanıcılara uyarı oluşturmak mümkündür.
Zod kütüphanesinin hata yönetimi için sağladığı özellikler kullanılabilir.
“aria label”lar, elementlere uygun biçimde yerleştirildiğinde erişilebilirliği artırdığı göz önünde bulundurulmalıdır.
15- Authentication(Kullanıcı Kimliği Tanımlama) Ekleme
Authentication süreci yapısı itibariyle; oturum yönetimi, sign-in, sign-out ve diğer açılardan birçok zorluklar barındırır.
NextAuth.js bu zorlukları soyutlayarak birleştirilmiş bir çözüm sunar.
CLI ile paketi indirip oluşturulan “SECRET_KEY”i ortam değişkeni olarak hem local’de hem de Vercel’de tanımlamak gerekir. Sonrasında kolay biçimde konfigüre edilebilir.
Oluşturulan route’ları tanımlanmamış kullanıcılar için koruma altına alan bir ara katman oluşturur.
Ayrıca bu ara katman sayesinde tanımlanmamış kullanıcılar için render süreci de başlatılmayacağı için performans avantajı da kazanılmış olur.
Şifre Kodlama
Şifre güvenliği açısından hash mekanizması sağlayan bcrypt kullanılabilir.
Authentication Sağlayıcıları
NextAuth.js. providers bir dizi içerisinde Google veya GitHub gibi farklı giriş seçenekleri tanımlamamıza olanak tanır. Farklı kimlik doğrulama çözümleri de uygulamak mümkündür.
16- Metadata Ekleme
Metadata Neden Önemli?
Kullanıcı ara yüzünde yer edinmese de uygulamayı arama motorlarına ve sosyal medya platformlarına tanıtması sayesinde daha SEO dostu ve paylaşılabilir bir yapı üretmemize olanak tanır.
Metadata Çeşitleri
// Tarayıda görünen başlık
<title>Page Title</title>
// Açıklama metni
<meta name="description" content="A brief description of the page content." />
// Tanımlayıcı kilit sözcükler
<meta name="keywords" content="keyword1, keyword2, keyword3" />
// Sosyal medya görünümü (Open Graph)
<meta property="og:title" content="Title Here" />
<meta property="og:description" content="Description Here" />
<meta property="og:image" content="image_url_here" />
// Tarayıca görünen icon
<link rel="icon" href="path/to/favicon.ico" />Metadata API
- Konfigürasyon Bazlı
Statik bir metadata nesnesi ya da dinamik bir “generateMetadata” metodu ile layout.js veya page.js dosyalarında sağlanabilir.
- Dosya Bazlı
Özelleştirilmiş dosya isimleri ile geniş bir alanda metadata ekleme sağlanabilir. favicon.ico, apple-icon.jpg, icon.jpgd,opengraph-image.jpg,twitter-image.jpg,robots.txt,sitemap.xml
Yukarıdaki seçenekler kullanılarak otomatik olarak <head> elementi ilgili sayfa için düzenlenebilir.
Sayfa Bazlı Metadata Ekleme
layout.js içerisindeki herhangi bir metadata kapsadığı diğer sayfalar tarafından da kullanılacaktır. Next.js bu yapıyı sayfa bazlı olarak da tanımlamayı mümkün hale getirmiştir.
%s operatörüyle layout.jsiçerisinde bir şablon oluştururak sayfa özelinde yapılan tanımlama ile yer değiştirme sağlanabilir.
SONUÇ:
Next.js’in sunduğu interaktif kursta, modern web geliştirme kavramlarına odaklanarak ilerliyor ve geliştiricilerin full-stack çözümler sunan Next.js’in güçlü yönlerini anlamalarına yardımcı oluyor.
1. Full-Stack Geliştirme:
Next.js, sadece frontend değil, backend işlevlerini de entegre eden bir yapı sunuyor. Veritabanı entegrasyonları, sunucu tarafında veri çağırma ve API oluşturma gibi işlevlerle full-stack bir framework olarak kullanılabiliyor. Özellikle Vercel’in sağladığı veritabanı hizmetleri ve entegrasyonları bu durumu pekiştiriyor.
2. Performans ve Optimizasyon:
Next.js, statik site üretimi (Static Site Generation — SSG) ve sunucu tarafı işleme (Server-Side Rendering — SSR) gibi tekniklerle performansı optimize ediyor. Aynı zamanda font ve görsel optimizasyonu gibi önceden hazırlanmış araçlarla yükleme sürelerini minimuma indiriyor.
3. Yapısal Düzen ve Modülerlik:
Dosya tabanlı route sistemi, sayfaların ve bileşenlerin mantıksal olarak organize edilmesine olanak tanıyor. Aynı zamanda Tailwind CSS ve CSS modülleri ile stil çözümlerinin modüler bir şekilde yönetilmesi sağlanıyor.
4. Veri Yönetimi:
Next.js, veritabanı ve API işlemleri için sunucu tarafında veri çağırmayı destekleyerek, performans ve güvenlik açısından büyük avantajlar sunuyor. React Sunucu Bileşenleri sayesinde, veritabanı işlemleri doğrudan server üzerinde yapılabiliyor, bu da client-side yükünü azaltıyor.
5. Navigasyon ve Route Yönetimi:
Link bileşeni ile hızlı client-side navigasyonu sağlanırken, Next.js’in sunduğu route segmentleri ile otomatik kod bölme ve önceden yükleme (prefetching) özellikleri öne çıkıyor. Ayrıca, Suspense yapısı ile dinamik bileşenler arasında daha akıcı geçişler sağlanabiliyor.
6. Dinamik Veri ve Streaming:
Next.js, dinamik verilerin aşamalı olarak yüklenmesini sağlayan “streaming” özelliğini sunuyor. Bu özellik, yükleme sürelerini iyileştirerek kullanıcı deneyimini artırıyor. Skeleton ekranlar ve fallback UI’lar ile kullanıcıya hızlı ve kesintisiz bir deneyim sunuluyor.
7. Veri Mutasyonu ve Form İşlemleri:
React Server Actions ile veri mutasyonlarını server üzerinde yönetmek mümkün hale geliyor. API kullanmadan formları yönetebilmek ve sunucu tarafında form işlemleri gerçekleştirmek, bu yeni yöntemle daha kolay hale geliyor.
8. Hata Yönetimi ve Erişilebilirlik:
Next.js, hata yakalama ve özel hata sayfaları oluşturarak kullanıcı deneyimini iyileştiriyor. Ayrıca, sağladığı linting araçları ile erişilebilirlik sorunlarını erken aşamada çözmeye olanak tanıyor.
9. Yenilikçi Render Teknikleri:
Next.js, statik ve dinamik render tekniklerini birleştirerek esnek ve performanslı bir geliştirme deneyimi sunuyor. Partial Prerendering (kısmi önişleme) ile hem statik hem de dinamik içerikler aynı route üzerinde işlenebiliyor.
Genel olarak, kurs Next.js’in modern web uygulamaları için sunduğu güçlü özelliklere kapsamlı bir giriş yapıyor ve projelerde bu özellikleri nasıl kullanabileceğinizi gösteriyor.
Kaynaklar:
Github Bağlantısı: https://github.com/EyupOzmen/nextjs-dashboard
Proje Bağlantısı: https://nextjs-dashboard-sage-five-16.vercel.app/
