Next.js 14 ile Modern React Uygulamaları

Next.js Nedir?

Next.js, Vercel tarafından geliştirilen React framework'üdür. Server-side rendering, static generation ve API routes sunar.

Öne Çıkan Özellikler

• App Router: File-based routing
• Server Components: Server-side rendering
• API Routes: Backend endpoints
• Image Optimization: Automatic optimization
• Edge Runtime: Global deployment

Kurulum

npx create-next-app@latest my-app --typescript --tailwind --app

cd my-app
npm run dev

App Router Yapısı

app/
├── layout.tsx        # Root layout
├── page.tsx          # Home page (/)
├── about/
│   └── page.tsx      # /about
├── blog/
│   ├── page.tsx      # /blog
│   └── [slug]/
│       └── page.tsx  # /blog/:slug
└── api/
    └── users/
        └── route.ts  # API endpoint

Server Components

// app/users/page.tsx - Server Component (default)
async function UsersPage() {
    const users = await fetch('https://api.example.com/users');
    const data = await users.json();

    return (
        <ul>
            {data.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    );
}
export default UsersPage;

Client Components

'use client'; // Directive

import { useState } from 'react';

export default function Counter() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Count: {count}
        </button>
    );
}

API Routes

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
    const users = await db.user.findMany();
    return NextResponse.json(users);
}

export async function POST(request: Request) {
    const body = await request.json();
    const user = await db.user.create({ data: body });
    return NextResponse.json(user, { status: 201 });
}

Data Fetching

// Static Generation
async function Page() {
    const data = await fetch(url, { cache: 'force-cache' });
}

// Server-side Rendering
async function Page() {
    const data = await fetch(url, { cache: 'no-store' });
}

// Incremental Static Regeneration
async function Page() {
    const data = await fetch(url, { next: { revalidate: 60 } });
}

Metadata

// app/layout.tsx
export const metadata = {
    title: 'My App',
    description: 'My awesome app',
    openGraph: {
        title: 'My App',
        description: '...',
    },
};

Deployment

# Vercel (recommended)
vercel

# Self-hosted
npm run build
npm start

# Docker
FROM node:20-alpine
WORKDIR /app
COPY . .
RUN npm ci && npm run build
CMD ["npm", "start"]

Sonuç

Next.js, React uygulamaları için production-ready, full-stack framework'tür. Laravel API + Next.js frontend popüler bir kombinasyondur.