Next.js

Okunuşu: nekst cey es

Güncellendi 3 Ekim 20262 dk okuma

Kısaca

Next.js, React'e yönlendirme, sunucu tarafı render, statik üretim ve sunucu kodu ekleyen bir framework'tür; bütün bir web uygulaması tek projede geliştirilir.

Next.js nedir?

Next.js, React'in boş bıraktığı yerleri doldurmak için 2016'da bugün Vercel adını taşıyan şirket tarafından yayımlandı. React bileşenleri render eder; ama gerçek bir site sayfalara ve URL'lere, veri yüklemeye, hız ve arama motorları için sunucu tarafı render'a ve bir derleme düzenine de ihtiyaç duyar. Next.js bunların hepsini mantıklı varsayılanlarla sağlar; yeni bir proje de tek bir komutla başlar.

Yönlendirme dosyalara dayanır: App Router'da page.tsx dosyası içeren app/blog/[slug] gibi bir klasör, /blog/bir-yazi adresindeki sayfa olur. Bileşenler varsayılan olarak React Server Components'tir; sunucuda çalışır, veritabanını doğrudan okuyabilir ve tarayıcıya yalnızca HTML gönderir. Etkileşim gerektiren bileşenler ise "use client" ile işaretlenir.

Her sayfa kendisine uygun biçimde render edilebilir: derleme anında bir kez üretilir (SSG), her istekte render edilir (SSR) ya da belirli bir süreden sonra arka planda yeniden üretilir. Route handler'lar ve server action'lar aynı projenin API sunmasını ve form gönderimlerini işlemesini sağlar; framework ayrıca görselleri, fontları ve betikleri de optimize eder.

Sık yapılan bir yanlış, Next.js'in yalnızca Vercel'de çalıştığı düşüncesidir. Açık kaynaklıdır; herhangi bir Node.js sunucusunda, bir Docker konteynerinde ya da birçok site için statik dışa aktarım (static export) olarak çalışır; yine de bazı özellikleri Vercel platformuna en doğal biçimde oturur. React'in yerini de almaz; onun üzerine kuruludur.

Önemli noktalar

Next.js, eksiksiz web uygulamaları için bir React framework'üdür.
app dizinindeki klasörler ve dosyalar yönlendirmeleri belirler.
Server Components sunucuda çalışır; istemci bileşenleri etkileşim ekler.
Sayfalar statik (SSG), istek başına render (SSR) ya da zamanla yeniden üretilen sayfalar olabilir.
Açık kaynaklıdır ve yalnızca Vercel'de değil, her Node.js sunucusunda çalışır.

Örnek

Veriyi sunucuda yükleyen bir sayfa (app/posts/page.tsx)tsx

// A Server Component: runs on the server, sends only HTML
export default async function PostsPage() {
  const res = await fetch("https://api.example.com/posts");
  const posts: { id: number; title: string }[] = await res.json();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Sık sorulan sorular

React ile Next.js arasındaki fark nedir?

React, bileşenlerden kullanıcı arayüzü kurmaya yarayan bir kütüphanedir. Next.js ise React üzerine kurulu, yönlendirme, sunucu tarafı render, statik üretim, veri yükleme ve bir derleme düzeni ekleyen bir framework'tür.

Next.js ön yüz mü, arka uç mu?

İkisi de. Kullanıcı arayüzünü render eder; ama Server Components'i, route handler'ları ve server action'ları sunucuda çalışır, böylece tek bir Next.js projesi hem ön yüzü hem de arka uç mantığını içerebilir.

Next.js kullanmak için Vercel gerekir mi?

Hayır. Next.js açık kaynaklıdır; Node.js çalıştıran herhangi bir sunucuda, Docker'da ya da statik dışa aktarım olarak çalışabilir. Arkasındaki şirket Vercel, özelliklerini kutudan çıktığı gibi destekleyen bir barındırma sunar.

Sık karşılaştırılanlar

Next.js vs ReactReact, arayüzleri bileşenlerle kurmaya yarayan bir kütüphanedir; Next.js ise ona yönlendirme, sunucu tarafı render ve statik üretim ekleyen bir framework'tür.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin