Next.js Nedir? Tercih Sebepleri Nelerdir?

Next.js, React tabanlı bir web uygulama çerçevesidir. Kullanıcıların web siteleri oluştururken kullanabilecekleri bir araçtır. Next.js’in en önemli özelliklerinden biri sunucu taraflı rendering (SSR) özelliğidir. Bu özellik sayesinde, uygulamanın performansı artar ve SEO dostu hale getirilir. Bu, web sitesinin daha hızlı yüklenmesi ve kullanıcıların aradıkları şeyi daha kolay bulmaları anlamına gelir.

Next.js aynı zamanda dinamik sayfalar oluşturmak için getInitialProps() yöntemini kullanır. Bu yöntem, sayfa yüklendiğinde sunucudan gelen verileri sayfaya yerleştirir. Böylece, uygulamanın ilk yüklenmesinde gerekli olan tüm veriler sunucu tarafından sağlanır ve daha hızlı bir deneyim sunar.

Next.js, React ile birlikte kullanıldığında, geliştiricilere birçok avantaj sağlar. Örneğin, React bileşenlerini kullanarak web sitelerinin farklı bölümlerini kolayca oluşturabilirsiniz. Ayrıca, Next.js, önceden hazırlanmış birçok bileşen içerir, bu da geliştiricilerin daha hızlı ve daha verimli çalışmasına olanak tanır.

Sonuç olarak, Next.js, performansı artıran, SEO dostu ve dinamik web siteleri oluşturmak için kullanışlı bir araçtır. Geliştiricilerin React ile birlikte kullanarak web sitelerini kolayca oluşturmalarına olanak tanır.

Routing

Next.js, Server Components üzerine inşa edilmiş dosya sistemi tabanlı bir router sağlar. Bu router, layout’ları, iç içe geçmiş routing’i, yükleme durumlarını, hata yönetimini ve daha fazlasını destekler. Yani, Next.js’in routing özelliği ile sayfalar arasındaki geçişler hızlı ve kolay bir şekilde gerçekleştirilebilir.

Rendering

Next.js, hem istemci tarafında hem de sunucu tarafında, istemci ve sunucu bileşenleriyle render edilir. Sunucu tarafında Statik ve Dinamik Rendering ile daha da optimize edilir ve Edge ve Node.js runtime’larında streaming özelliği sunar. Böylece, sayfaların hızlı bir şekilde yüklenmesi sağlanır.

Data Fetching

React bileşenlerinde async/await desteği ve React ve Web Platform ile uyumlu olan fetch() API’si ile basitleştirilmiş veri alma desteği sunar. Bu sayede veri alma işlemleri daha hızlı ve düzenli bir şekilde gerçekleştirilebilir.

async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  // Recommendation: handle errors
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data');
  }
 
  return res.json();
}
 
export default async function Page() {
  const data = await getData();
 
  return <main></main>;
}

Styling

Next.js, CSS Modules, Tailwind CSS ve CSS-in-JS gibi tercih ettiğiniz stil yöntemlerini destekler. Bu sayede, stil dosyalarının yönetimi daha kolay ve düzenli bir şekilde gerçekleştirilebilir.

Next.js, uygulamanızı şekillendirmenin farklı yollarını destekler:

• Global CSS: Kullanımı basit ve geleneksel CSS deneyimi olanlar için tanıdıktır, ancak uygulama büyüdükçe daha büyük CSS paketlerine ve stilleri yönetmede zorluklara yol açabilir.
• CSS Modülleri: Adlandırma çakışmalarını önlemek ve sürdürülebilirliği artırmak için yerel olarak kapsamlı CSS sınıfları oluşturun.
• Tailwind CSS: Yardımcı program sınıfları oluşturarak hızlı özel tasarımlara izin veren, yardımcı program öncelikli bir CSS çerçevesi.
• Sass: CSS’yi değişkenler, iç içe kurallar ve karışımlar gibi özelliklerle genişleten popüler bir CSS ön işlemcisi.
• CSS-in-JS: CSS’yi doğrudan JavaScript bileşenlerinize gömerek dinamik ve kapsamlı stil oluşturmayı etkinleştirin.

Optimizasyon

Next.js, Native tarayıcı tembellik yüklemesi ile geliştirilmiş Image bileşeni ve otomatik font optimizasyonu ile yeni Font Modülü gibi iyileştirmeler sunar. Bu sayede sayfaların yüklenme süreleri kısalır ve kullanıcı deneyimi artar.

import Image from 'next/image';
import profilePic from '../public/me.png';
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  );
}

TypeScript Desteği

Next.js, daha iyi tür denetimi ve daha verimli derleme gibi iyileştirmelerle birlikte, isteğe bağlı zincirleme ve nullish coalescing desteği gibi özellikleri destekleyen TypeScript için geliştirilmiş bir destek sunar. Bu sayede, TypeScript kullanıcıları daha hızlı ve güvenli bir şekilde uygulama geliştirebilirler.