NNext.js 15 ile Modern Web Geliştirme

Next.js 15, React tabanlı web uygulamaları geliştirmek için en popüler framework'lerden biri olmaya devam ediyor. Bu yazıda, Next.js 15'in sunduğu yeni özellikleri ve bu özellikleri nasıl projelerimizde kullanabileceğimizi inceliyeceğiz.

Next.js 15'in Yeni Özellikleri

1. Geliştirilmiş App Router

Next.js 15 ile birlikte App Router daha da güçlendi. Artık daha karmaşık routing senaryolarını kolayca yönetebiliyoruz:

// app/blog/[slug]/page.js
export default function BlogPost({ params }) {
  const { slug } = params;
  
  return (
    <article>
      <h1>Blog Post: {slug}</h1>
      <p>Dynamic routing with App Router</p>
    </article>
  );
}

// Metadata generation
export async function generateMetadata({ params }) {
  return {
    title: `Blog Post - ${params.slug}`,
    description: 'Dynamic metadata generation'
  };
}

2. Server Components ve Client Components

Server Components ile performansı artırırken, Client Components ile interaktivite sağlayabiliyoruz:

// Server Component (default)
async function ServerComponent() {
  const data = await fetch('https://api.example.com/data');
  const result = await data.json();
  
  return (
    <div>
      <h2>Server-side rendered data</h2>
      <p>{result.message}</p>
    </div>
  );
}

// Client Component
'use client';
import { useState } from 'react';

function ClientComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Performance Optimizations

Image Optimization

Next.js'in built-in Image component'i ile görsellerinizi otomatik olarak optimize edebilirsiniz:

import Image from 'next/image';

function OptimizedImage() {
  return (
    <Image
      src="/hero-image.jpg"
      alt="Hero Image"
      width={800}
      height={600}
      priority
      className="rounded-lg shadow-md"
    />
  );
}

Font Optimization

Google Fonts'u optimize edilmiş şekilde kullanın:

import { Inter, Roboto_Mono } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

const robotoMono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Best Practices

1. TypeScript Kullanımı

TypeScript ile daha güvenli kod yazın:

interface BlogPost {
  id: string;
  title: string;
  content: string;
  publishedAt: Date;
  author: {
    name: string;
    email: string;
  };
}

async function getBlogPost(slug: string): Promise<BlogPost> {
  const response = await fetch(`/api/blog/${slug}`);
  return response.json();
}

2. Environment Variables

Çevre değişkenlerini güvenli şekilde yönetin:

// next.config.js
module.exports = {
  env: {
    API_URL: process.env.API_URL,
  },
  images: {
    domains: ['example.com'],
  },
};

3. API Routes

Backend functionality için API routes kullanın:

// app/api/blog/route.js
import { NextResponse } from 'next/server';

export async function GET() {
  try {
    const posts = await fetchBlogPosts();
    return NextResponse.json(posts);
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to fetch posts' },
      { status: 500 }
    );
  }
}

export async function POST(request) {
  const body = await request.json();
  const newPost = await createBlogPost(body);
  return NextResponse.json(newPost, { status: 201 });
}

Deployment ve Production

Vercel ile Deploy

# Package.json scripts
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

# Build for production
npm run build
npm run start

Performance Monitoring

// next.config.js
module.exports = {
  experimental: {
    instrumentationHook: true,
  },
  webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname),
      };
    }
    return config;
  },
};

Sonuç

Next.js 15, modern web geliştirme için gereken tüm araçları sunan güçlü bir framework. Server Components, geliştirilmiş routing, ve performance optimizations ile projelerinizi bir üst seviyeye taşıyabilirsiniz.

Önemli Noktalar:

✅ Server Components ile performance
✅ App Router ile modern routing
✅ TypeScript desteği
✅ Built-in optimizations (Image, Font, Bundle)
✅ API Routes ile full-stack development

Faydalı Kaynaklar:

Tags: #nextjs #react #javascript #webdev #typescript

Son Güncellenme: 16 Ağustos 2025