Next.js 14 ile Modern Web Uygulamaları Geliştirme

Giriş

Next.js 14, React ekosistemindeki en güçlü framework'lerden biri olmaya devam ediyor. Bu yazıda, App Router ve Server Components kullanarak modern web uygulamaları geliştirmenin inceliklerini keşfedeceğiz.

Next.js 14, performans ve geliştirici deneyimi açısından büyük iyileştirmeler getiriyor. Bu güncellemeler, modern web uygulamaları için vazgeçilmez özellikler sunuyor.

App Router Nedir?

App Router, Next.js 13 ile tanıtılan ve 14'te olgunlaşan yeni yönlendirme sistemidir. Bu sistem, dosya tabanlı yönlendirmeyi React Server Components ile birleştirerek güçlü bir geliştirme deneyimi sunar.

Temel Özellikler

• Layouts: Sayfalar arasında paylaşılan UI bileşenleri
• Nested Routes: İç içe geçmiş yönlendirme yapısı
• Loading States: Otomatik loading UI desteği
• Error Handling: Yerleşik hata yönetimi

Server Components

Server Components, React 18 ile gelen ve Next.js 14'te varsayılan olan bir özelliktir. Bu bileşenler sunucuda render edilir ve client'a HTML olarak gönderilir.

1// Bu bir Server Component
2async function BlogPost({ slug }: { slug: string }) {
3  const post = await fetchPost(slug);
4  
5  return (
6    <article className="prose">
7      <h1>{post.title}</h1>
8      <p>{post.content}</p>
9      <AuthorCard author={post.author} />
10    </article>
11  );
12}
13
14// Client Component gerektiğinde
15"use client";
16function LikeButton({ postId }: { postId: string }) {
17  const [likes, setLikes] = useState(0);
18  
19  return (
20    <button onClick={() => setLikes(l => l + 1)}>
21      ❤️ {likes}
22    </button>
23  );
24}

Avantajları

1. Daha Küçük Bundle Boyutu: JavaScript client'a gönderilmez
2. Doğrudan Veritabanı Erişimi: API katmanı olmadan veri çekme
3. Gelişmiş SEO: Tam SSR desteği

Data Fetching

Next.js 14'te veri çekme işlemleri daha da basitleşti. fetch API'si artık otomatik olarak cache'leniyor:

1// Statik veri - Build time'da çekilir
2async function getStaticData() {
3  const res = await fetch('https://api.example.com/data', {
4    cache: 'force-cache',
5  });
6  return res.json();
7}
8
9// Dinamik veri - Her istekte yeniden çekilir
10async function getDynamicData() {
11  const res = await fetch('https://api.example.com/data', {
12    cache: 'no-store',
13  });
14  return res.json();
15}
16
17// ISR - Belirli aralıklarla güncellenir
18async function getRevalidatedData() {
19  const res = await fetch('https://api.example.com/data', {
20    next: { revalidate: 3600 }, // 1 saat
21  });
22  return res.json();
23}

Caching Stratejileri

Next.js 14, güçlü bir caching mekanizması sunar:

Sonuç

Next.js 14, modern web geliştirme için harika bir seçenek. Server Components, App Router ve gelişmiş caching özellikleri ile hem geliştirici deneyimini hem de son kullanıcı performansını önemli ölçüde iyileştiriyor.

Fribe.co olarak Next.js ile kurumsal web siteleri ve özel projeler geliştiriyoruz. Bizimle iletişime geçin ve projenizi birlikte hayata geçirelim!