NextJS Nedir?

Next.js, Netflix, Uber, Starbucks veya Twitch gibi dünyanın dört bir yanındaki en büyük ve en popüler şirketler tarafından yaygın olarak kullanılmaktadır. Ayrıca, statik sitelerle çalışmak için mükemmel olan en hızlı büyüyen React frameworklerinden biri olarak kabul edilir — ki bu, son zamanlarda web geliştirme dünyasında en çok konuşulan konulardan birisidir.

Stack Overflow'un 2024 Developer Survey verilerine göre, web geliştiricileri arasındaki en popüler 4. web framework Next.js imiş.

Yıllar geçtikçe Next.js sürekli olarak evrim geçirerek web geliştirmenin sürekli değişen ortamına hitap eden özellikler sunmuştur. Güncellemeleri sürekli olarak performansı, geliştirici deneyimini iyileştirmeye ve sağlam SEO yetenekleri sağlamaya odaklanmıştır.

Gelin hep beraber Next.js'e ve temel özelliklerine bir bakış atalım.

Next.js Nedir?

Next.js, React tabanlı bir frameworktür. Vercel tarafından geliştirilmiştir ve SSR (Server-side rendering), SSG (Static Site Generation) gibi modern web geliştirme için güçlü araçlarla donatılmıştır. Next.js, SEO dostu, hızlı yükleme süreleri ve geliştirilmiş performans sunarak hem kullanıcılar hem de geliştiriciler için işleri kolaylaştırır diyebiliriz.

Hem basit hem de karmaşık web uygulamalarını çok daha hızlı ve kolay bir şekilde oluşturmamıza olanak tanır ve Next'in üzerine katılarak geliştirilen birçok harika framework sayesinde de artık çok daha iyi bir UX (User experience) ve SEO verimliliğine sahip hızlı web siteleri oluşturabiliriz.

Next.js Özellikleri

Server Side Rendering

Sayfalar server tarafında işlenir ve kullanıcılara önceden render edilmiş HTML olarak sunulur. Bu, sayfa yükleme sürelerini kısaltır ve SEO'yu iyileştirir.

Static Generation

Uygulamanın tamamını veya belirli sayfalarını derleme zamanında statik HTML dosyalarına dönüştürür.

API Routes

Next.js ile, aynı app içinde API endpointleri oluşturmak mümkündür.

Next.js ile oluşturulmuş API endpointleri

Automatic Code Splitting

Next.js, web uygulamanızın kodlarını otomatik olarak daha küçük parçalara böler ve böylece kullanıcılar yalnızca ihtiyaç duydukları kodu yükler. Bu, performansı artırır ve sayfa yükleme sürelerini önemli ölçüde kısaltır.

File-System Based Routing (Dosya Sistemi Tabanlı Yönlendirme)

Next.js, pages veya app klasörü içindeki dosya yapısını kullanarak otomatik olarak yönlendirme (routing) mantığını oluşturur, böylece ayrı bir routing yapılandırmasına ihtiyaç duyulmaz.

pages directory

Image Optimization (Görüntü Optimizasyonu)

Next.js, next/image bileşeni aracılığıyla otomatik görüntü optimizasyonu sağlar. Bu, farklı ekran boyutları ve cihazlar için optimize edilmiş görüntüler sunarak performansı artırır.

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}

Dynamic Routing

Next.js, dinamik yönlendirme ile pathler (yollar) ve parametrelerle çalışmayı oldukça kolaylaştırır.

Oluşturulmuş dynamic routing klasörleri

Parametreler useRouter() kullanılarak alınabilir:

import { useRouter } from 'next/router'

const router = useRouter();
const language = router.query.language;
const pathId = router.query.pathId;

Next.js ve SEO (Search Engine Optimization)

Next.js, güçlü bir framework olmasının yanı sıra, SEO (Arama Motoru Optimizasyonu) açısından da birçok avantaj sunar. Bu sayede, web sitenizin arama motorlarında daha üst sıralarda yer almasını ve organik trafik elde etmesini kolaylaştırır.

• SSR ve SSG Next.js, Server-side Rendering ve Static Site Generation gibi farklı derleme yöntemleri sunar. Bu yöntemler sayesinde, arama motorları botları web sitenizin içeriğini kolayca tarayabilir ve anlayabilir, bu da SEO performansınızı artırır.

• Meta tags ve Headerlar next/head bileşeni aracılığıyla sayfa başlıklarını, meta açıklamalarını ve diğer önemli meta etiketlerini kolayca yönetmenize olanak tanır. Bu, arama motorlarına sayfalarınızın içeriği hakkında daha fazla bilgi sağlar ve SEO performansınızı artırır.

• XML Site Haritaları (Sitemaps) Otomatik olarak XML site haritaları oluşturarak arama motorlarına web sitenizin yapısı hakkında bilgi verir ve tüm sayfalarınızın taranmasını kolaylaştırır.

Next.js Kurulumu ve Kullanımı

Son olarak nasıl bir Next.js projesi oluşturabileceğimizden ve projenin yapısından bahsedip yazımızı noktalayalım.

Proje oluşturma

Next.js ile bir proje oluşturmak oldukça kolaydır. Node.js npm veya yarn'ın kurulu olduğuna emin olduktan sonra başlayabilirsiniz.

npx create-next-app@latest
# veya
yarn create next-app

Projenin Yapısı

Next.js projeleri genellikle şu klasörlerden oluşur:

• src: Uygulamanızın temel bileşenlerini yazdığınız klasördür.

• pages/: Her klasör (routing) ve içindeki dosya (index.js, index.tsx) bir sayfa olarak tanımlanır.

• public/: Statik dosyalar (assets, fonts) bu klasöre konulur.

• styles/: CSS dosyaları bu klasörde bulunur.

• api/: API endpoint'leri oluşturmak için kullanılır.

• app (Next.js 13 ve sonrası): Yeni App Directory (Uygulama Dizini) yapısını kullanarak sayfaları ve düzenleri yönetmek için kullanılır.

• • layout.js Sayfalarınızda ortak olarak kullanılan layout bileşeni.

• • page.js Sayfa içeriği

• • loading.js Yüklenme sayfası

• package.json: Projenin dependencylerini ve komutları içerir.

• next.config.js: Next.js yapılandırmalarınızı içerir.

Örnek bir proje yapısı

Sonuç

Next.js hakkında çok daha kapsamlı bilgiye sahip olmak için dokümanını okuyabilir ve Vercel'in sağlamış olduğu React ve Next.js kurslarına ücretsiz erişim sağlayabilirsiniz.

• Next.js Websitesi

• Next.js Dokümantasyonu

• Next.js Öğren

Next.js, modern web uygulamaları geliştirmek için güçlü bir framework'tür. SEO dostu, performans odaklı ve geliştirici deneyimini iyileştiren özellikleri ile öne çıkar. Hem küçük hem de büyük ölçekli projeler için ideal bir seçimdir. Artan popülerliği sebebiyle de kariyerinizde envanterinize eklenmeye değer bir teknolojidir.

Okuduğunuz için teşekkürler!