Next.js vs Nuxt.js Modern Vue ve React Framework'lerinin Karşılaştırması

Yunus Emre Güzel
12 Ocak 202520 dkFrontend
Next.js vs Nuxt.js Modern Vue ve React Framework'lerinin Karşılaştırması

Next.js vs Nuxt.js: Modern Vue ve React Framework'lerinin Karşılaştırması

Modern web geliştirme dünyasında, Next.js ve Nuxt.js, sırasıyla React ve Vue.js ekosistemlerinin en popüler full-stack framework'leri olarak öne çıkıyor. Her iki framework de benzer hedeflere sahip olsa da, farklı yaklaşımları ve çözüm yöntemleriyle dikkat çekiyor. Bu yazıda, her iki framework'ü detaylı bir şekilde karşılaştıracak ve hangi senaryolarda hangisinin daha uygun olabileceğini değerlendireceğiz.

Temel Özellikler ve Mimari Yaklaşımlar

Next.js (React)

Next.js, React ekosistemi için geliştirilmiş, Vercel tarafından desteklenen güçlü bir framework'tür. App Router ve React Server Components gibi modern özellikleriyle öne çıkar.

Next.js'in temel özellikleri:

  • React Tabanlı: Modern React özellikleri ve ekosistemi
  • App Router: Dosya sistemi tabanlı routing
  • Server Components: Sunucu taraflı React bileşenleri
  • Automatic Code Splitting: Otomatik kod bölümleme
  • Image Optimization: Yerleşik görsel optimizasyonu
  • API Routes: Serverless API endpoint'leri
  • Middleware: İstek/yanıt manipülasyonu
  • TypeScript Desteği: Tam TypeScript entegrasyonu
// Next.js App Router örneği
// app/page.tsx
export default async function HomePage() {
  const products = await getProducts();
  
  return (
    <main>
      <h1>Ürünlerimiz</h1>
      <ProductGrid products={products} />
    </main>
  );
}

// API Route örneği
// app/api/products/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const products = await getProducts();
  return NextResponse.json(products);
}

Nuxt.js (Vue)

Nuxt.js, Vue.js ekosistemi için geliştirilmiş, güçlü bir full-stack framework'tür. Vue 3 ve Composition API desteğiyle modern web uygulamaları geliştirmeyi kolaylaştırır.

Nuxt.js'in temel özellikleri:

  • Vue Tabanlı: Vue 3 ve Composition API desteği
  • Auto Imports: Otomatik bileşen ve composable import'ları
  • Nuxt Modules: Zengin modül ekosistemi
  • Nitro Engine: Güçlü sunucu motoru
  • Vue DevTools: Gelişmiş geliştirici araçları
  • Directory Structure: Organize dosya yapısı
  • Nuxt Layers: Modüler uygulama mimarisi
  • TypeScript Desteği: Tam TypeScript entegrasyonu
<!-- Nuxt.js Page örneği -->
<!-- pages/index.vue -->
<script setup lang="ts">
const { data: products } = await useFetch('/api/products')
</script>

<template>
  <main>
    <h1>Ürünlerimiz</h1>
    <ProductGrid :products="products" />
  </main>
</template>

<!-- API Route örneği -->
<!-- server/api/products.ts -->
export default defineEventHandler(async (event) => {
  const products = await getProducts()
  return products
})

Veri Yönetimi ve State Management

Next.js Server Actions ve Client State

Next.js 13+ ile gelen Server Actions, sunucu tarafı işlemleri doğrudan component'ler içinde tanımlamamıza olanak sağlar.

// app/actions.ts
'use server';

export async function createProduct(formData: FormData) {
  const product = {
    name: formData.get('name'),
    price: Number(formData.get('price'))
  };
  
  try {
    await db.product.create({ data: product });
    revalidatePath('/products');
    return { success: true };
  } catch (error) {
    return { error: 'Ürün oluşturulamadı' };
  }
}

// Client component örneği
'use client';

export default function ProductForm() {
  const [pending, startTransition] = useTransition();
  
  async function handleSubmit(formData: FormData) {
    startTransition(async () => {
      const result = await createProduct(formData);
      if (result.success) {
        toast.success('Ürün oluşturuldu');
      }
    });
  }
  
  return (
    <form action={handleSubmit}>
      <input name="name" placeholder="Ürün adı" />
      <input name="price" type="number" placeholder="Fiyat" />
      <button type="submit" disabled={pending}>
        {pending ? 'Oluşturuluyor...' : 'Oluştur'}
      </button>
    </form>
  );
}

Nuxt.js State Management ve Composables

Nuxt.js, Vue'nun reaktif sistem ve Composition API'sini kullanarak güçlü bir state management çözümü sunar.

<!-- composables/useProducts.ts -->
export const useProducts = () => {
  const products = ref([])
  const loading = ref(false)
  const error = ref(null)

  const fetchProducts = async () => {
    loading.value = true
    try {
      const { data } = await useFetch('/api/products')
      products.value = data.value
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  }

  const createProduct = async (product) => {
    try {
      await $fetch('/api/products', {
        method: 'POST',
        body: product
      })
      await fetchProducts()
      return { success: true }
    } catch (err) {
      return { error: err.message }
    }
  }

  return {
    products,
    loading,
    error,
    fetchProducts,
    createProduct
  }
}

<!-- components/ProductForm.vue -->
<script setup>
const { createProduct } = useProducts()
const pending = ref(false)

async function handleSubmit(event) {
  pending.value = true
  const formData = new FormData(event.target)
  const result = await createProduct({
    name: formData.get('name'),
    price: Number(formData.get('price'))
  })
  
  if (result.success) {
    useToast().success('Ürün oluşturuldu')
  }
  pending.value = false
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input name="name" placeholder="Ürün adı" />
    <input name="price" type="number" placeholder="Fiyat" />
    <button type="submit" :disabled="pending">
      {{ pending ? 'Oluşturuluyor...' : 'Oluştur' }}
    </button>
  </form>
</template>

Routing ve Sayfa Yapısı

Next.js App Router

Next.js'in App Router'ı, modern ve performanslı bir routing sistemi sunar:

// app/layout.tsx
export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="tr">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

// app/products/[id]/page.tsx
export default async function ProductPage({
  params
}: {
  params: { id: string }
}) {
  const product = await getProduct(params.id);
  
  return (
    <div>
      <h1>{product.name}</h1>
      <ProductDetails product={product} />
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews productId={params.id} />
      </Suspense>
    </div>
  );
}

// Parallel Routes
// app/products/[id]/@modal/page.tsx
export default function Modal() {
  return (
    <div className="modal">
      <h2>Ürün Detayları</h2>
      {/* Modal içeriği */}
    </div>
  );
}

Nuxt.js Routing

Nuxt.js, Vue Router'ı temel alan, ancak daha basit ve otomatik bir routing sistemi sunar:

<!-- layouts/default.vue -->
<template>
  <div>
    <Header />
    <slot />
    <Footer />
  </div>
</template>

<!-- pages/products/[id].vue -->
<script setup>
const route = useRoute()
const { data: product } = await useFetch(`/api/products/${route.params.id}`)
</script>

<template>
  <div>
    <h1>{{ product.name }}</h1>
    <ProductDetails :product="product" />
    <Suspense>
      <ProductReviews :product-id="route.params.id" />
      <template #fallback>
        <ReviewsSkeleton />
      </template>
    </Suspense>
  </div>
</template>

<!-- components/ProductModal.vue -->
<script setup>
const modal = useModal()
</script>

<template>
  <div v-if="modal.isOpen" class="modal">
    <h2>Ürün Detayları</h2>
    <!-- Modal içeriği -->
  </div>
</template>

Performans Optimizasyonu

Next.js Optimizasyonları

Next.js, yerleşik olarak birçok performans optimizasyonu sunar:

// Image Optimization
import Image from 'next/image';

function ProductImage({ product }) {
  return (
    <Image
      src={product.image}
      alt={product.name}
      width={500}
      height={300}
      placeholder="blur"
      blurDataURL={product.blurHash}
      priority={product.featured}
    />
  );
}

// Route Segment Config
export const dynamic = 'force-dynamic';
export const revalidate = 3600;
export const fetchCache = 'force-cache';
export const preferredRegion = 'edge';

// Streaming
export default async function ProductPage() {
  return (
    <div>
      <ProductHeader />
      <Suspense fallback={<ProductDetailsSkeleton />}>
        <ProductDetails />
      </Suspense>
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews />
      </Suspense>
    </div>
  );
}

Nuxt.js Optimizasyonları

Nuxt.js de güçlü performans optimizasyon özellikleri sunar:

<!-- components/ProductImage.vue -->
<script setup>
const props = defineProps({
  product: Object
})
</script>

<template>
  <nuxt-img
    :src="product.image"
    :alt="product.name"
    width="500"
    height="300"
    placeholder
    loading="lazy"
    format="webp"
  />
</template>

<!-- nuxt.config.ts -->
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/products/1', '/products/2']
    },
    storage: {
      redis: {
        driver: 'redis',
        /* redis config */
      }
    }
  },
  image: {
    provider: 'cloudinary',
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/my-account'
    }
  }
})

<!-- Lazy Loading -->
<template>
  <div>
    <ProductHeader />
    <LazyProductDetails />
    <LazyProductReviews />
  </div>
</template>

Deployment ve Build Optimizasyonu

Next.js Deployment

Next.js, Vercel ile mükemmel bir entegrasyon sunar:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['cdn.example.com'],
    formats: ['image/avif', 'image/webp']
  },
  experimental: {
    serverActions: true,
    serverComponents: true
  },
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY'
          }
        ]
      }
    ];
  }
};

module.exports = nextConfig;

Nuxt.js Deployment

Nuxt.js, çeşitli deployment seçenekleri sunar:

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: 'vercel',
    prerender: {
      crawlLinks: true,
      routes: ['/sitemap.xml']
    }
  },
  experimental: {
    payloadExtraction: true,
    inlineSSRStyles: false,
    viewTransition: true,
    componentIslands: true
  },
  modules: [
    '@nuxtjs/robots',
    '@nuxt/image',
    '@nuxtjs/sitemap'
  ]
})

Karşılaştırma ve Seçim Kriterleri

Next.js'in Güçlü Yanları

  1. React Ekosistemi:

    • Geniş React topluluğu
    • Zengin paket ekosistemi
    • Modern React özellikleri
    • Facebook desteği
  2. Server Components:

    • Sunucu taraflı rendering
    • Küçük bundle size
    • SEO optimizasyonu
    • Performans avantajları
  3. Vercel Entegrasyonu:

    • Kolay deployment
    • Edge functions
    • Analytics
    • CDN optimizasyonu
  4. Build Optimizasyonu:

    • Otomatik code splitting
    • Image optimization
    • Font optimization
    • Script optimization
  5. Geliştirici Deneyimi:

    • TypeScript desteği
    • Hot reloading
    • Debugging araçları
    • Detaylı dokümantasyon

Nuxt.js'in Güçlü Yanları

  1. Vue Ekosistemi:

    • Vue 3 ve Composition API
    • Vue DevTools entegrasyonu
    • Vue ekosistemi uyumluluğu
    • Progressive framework yapısı
  2. Auto Imports:

    • Otomatik component imports
    • Composables auto-imports
    • Utilities auto-imports
    • API auto-imports
  3. Nitro Engine:

    • Universal deployment
    • Serverless support
    • Edge-side rendering
    • API layer
  4. Modüler Yapı:

    • Nuxt Modules
    • Nuxt Layers
    • Plugin sistemi
    • Middleware sistemi
  5. Developer Experience:

    • Vue DevTools
    • TypeScript desteği
    • Hot module replacement
    • Zero-config başlangıç

Hangi Framework Ne Zaman Tercih Edilmeli?

Next.js Tercih Edilebilecek Durumlar

  1. React Ekosistemi Tercih Edildiğinde:

    • React deneyimi olan ekipler
    • React native entegrasyonu
    • React kütüphaneleri kullanımı
    • React community desteği
  2. Enterprise Projeler:

    • Büyük ölçekli uygulamalar
    • Kurumsal çözümler
    • Mikroservis mimarileri
    • Kompleks state yönetimi
  3. Vercel Deployment İstendiğinde:

    • Global CDN ihtiyacı
    • Edge computing
    • Serverless functions
    • Otomatik CI/CD
  4. SEO Kritik Projeler:

    • E-ticaret siteleri
    • Blog platformları
    • Haber siteleri
    • Pazarlama siteleri
  5. Performans Kritik Uygulamalar:

    • Yüksek trafikli siteler
    • Global uygulamalar
    • Mobile-first projeler
    • PWA uygulamaları

Nuxt.js Tercih Edilebilecek Durumlar

  1. Vue Ekosistemi Tercih Edildiğinde:

    • Vue deneyimi olan ekipler
    • Vue kütüphaneleri kullanımı
    • Vue community desteği
    • Vue native entegrasyonu
  2. Hızlı Prototipleme:

    • MVP projeleri
    • Startup projeleri
    • Proof of concept
    • Hızlı geliştirme
  3. Modüler Yapı İhtiyacı:

    • Plugin bazlı geliştirme
    • Modüler mimari
    • Yeniden kullanılabilir kod
    • Kolay genişletilebilirlik
  4. Full-stack Çözümler:

    • API development
    • Backend integration
    • Database operations
    • Authentication systems
  5. Modern Web Uygulamaları:

    • SPA uygulamaları
    • PWA projeleri
    • JAMstack uygulamaları
    • Hybrid uygulamalar

Sonuç

Her iki framework de kendi alanlarında güçlü özelliklere sahip ve modern web uygulamaları geliştirmek için mükemmel araçlar sunuyor. Seçim yaparken aşağıdaki faktörleri detaylı olarak değerlendirmeniz önemli:

Proje Gereksinimleri

  • Frontend framework tercihi (React vs Vue)
  • Teknik gereksinimler
  • Performans beklentileri
  • SEO gereksinimleri

Ekip Deneyimi

  • Framework deneyimi
  • Ekosistem bilgisi
  • Öğrenme eğrisi
  • Mevcut projeler

Deployment İhtiyaçları

  • Hosting platformu
  • Ölçeklenebilirlik
  • CDN gereksinimleri
  • Edge computing

Performans Kriterleri

  • Bundle size
  • First contentful paint
  • Time to interactive
  • Core Web Vitals

Geliştirme Süreci

  • Development workflow
  • Testing stratejisi
  • CI/CD pipeline
  • Monitoring tools

İlgili Etiketler: #NextJS #NuxtJS #React #Vue #WebDevelopment #Frontend #Framework #Performance

Kaynaklar