Next.js Nedir?

Next.js: React İçin Güçlü Bir Framework

Giriş

Web geliştirme dünyasında React, dinamik ve bileşen tabanlı yapısıyla büyük bir popülerlik kazanmıştır. Ancak, React tek başına bir framework olmadığı için bazı önemli özellikleri eksik kalabilir. İşte bu noktada Next.js devreye girer.

Bu makalede, Next.js’in sunduğu avantajları, temel kullanımını ve neden tercih edilmesi gerektiğini inceleyeceğiz.

Next.js Nedir?

Next.js, Vercel tarafından geliştirilen, React tabanlı açık kaynaklı bir framework’tür. React uygulamalarını daha performanslı, SEO dostu ve kullanıcı deneyimi açısından daha iyi hale getirmek için geliştirilmiştir.

Next.js’in Avantajları

• Sunucu Tarafında Render (SSR): Sayfaların sunucu tarafında oluşturulmasını sağlayarak SEO ve performansı artırır.
• Statik Site Üretimi (SSG): Önceden oluşturulmuş statik sayfalarla hızlı yüklenme süresi sunar.
• Otomatik Kod Bölme (Code Splitting): Sayfa bazlı kod yükleme sayesinde gereksiz kod çalışmasını engeller.
• API Routes: Backend ihtiyacı olan uygulamalar için dahili API desteği sunar.
• Gelişmiş Yönlendirme Sistemi: Dosya tabanlı yönlendirme (file-based routing) ile kolay sayfa yönetimi sağlar.
• Gömülü CSS Desteği: CSS modülleri ve global CSS kullanımı ile stil yönetimini kolaylaştırır.

Next.js Kurulumu

Next.js kullanmaya başlamak için aşağıdaki komutlarla yeni bir proje oluşturabilirsiniz:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

Bu komutlar, yeni bir Next.js projesi oluşturur ve geliştirme sunucusunu başlatır.

Next.js ile İlk Sayfa

Next.js, pages klasörü içindeki dosyalara göre otomatik olarak yönlendirme yapar. pages/index.js dosyasına aşağıdaki kodu ekleyerek bir ana sayfa oluşturabilirsiniz:

export default function Home() {
    return <h1>Merhaba, Next.js!</h1>;
}

Bu sayfa, http://localhost:3000 adresinde çalışacaktır.

Dinamik Sayfalar ve Routing

Next.js, dosya bazlı yönlendirme (file-based routing) sistemine sahiptir. pages/hakkinda.js dosyası oluşturduğunuzda, otomatik olarak /hakkinda yolu tanımlanmış olur.

Dinamik sayfalar için pages/blog/[id].js gibi bir yapı kullanabilirsiniz:

import { useRouter } from 'next/router';

export default function BlogPost() {
    const router = useRouter();
    const { id } = router.query;
    return <h1>Blog Yazısı: {id}</h1>;
}

Bu yapı, /blog/1 veya /blog/2 gibi dinamik URL’leri destekler.

Next.js API Routes

Next.js, backend işlemleri için dahili API route desteği sunar. pages/api/hello.js dosyasında aşağıdaki kodu kullanarak bir API endpoint oluşturabilirsiniz:

export default function handler(req, res) {
    res.status(200).json({ message: "Merhaba, API!" });
}

Bu API, http://localhost:3000/api/hello adresinden erişilebilir.

Sunucu Tarafında Render (SSR) ve Statik Site Üretimi (SSG)

Next.js, getServerSideProps fonksiyonu ile sunucu tarafında render yapmayı destekler:

export async function getServerSideProps() {
    return {
        props: { zaman: new Date().toISOString() },
    };
}

export default function SunucuRender({ zaman }) {
    return <p>Bu sayfa sunucu tarafında oluşturuldu: {zaman}</p>;
}

Statik site üretimi için getStaticProps fonksiyonunu kullanabilirsiniz:

export async function getStaticProps() {
    return {
        props: { zaman: new Date().toISOString() },
    };
}

export default function StatikRender({ zaman }) {
    return <p>Bu sayfa statik olarak oluşturuldu: {zaman}</p>;
}

Sonuç

Next.js, React projelerini daha hızlı, SEO uyumlu ve ölçeklenebilir hale getiren güçlü bir framework’tür. SSR, SSG, dinamik routing ve dahili API desteği gibi özellikleriyle modern web uygulamaları için ideal bir çözümdür. Eğer React kullanıyorsanız, Next.js’i denemek projelerinize büyük avantajlar sağlayacaktır.