Next.js App Router ile TypeScript Kullanımı: Dinamik ve Statik Rotalar

Next.js 13, modern React projeleri için esnek ve güçlü bir router çözümü sunan App Router yapısını tanıttı. Bu rehberde, App Router ile TypeScript kullanarak dosya tabanlı routing, dinamik rotalar ve veri çekme işlemlerini nasıl yöneteceğinizi öğrenebilirsiniz.

App Router Kullanımının Temelleri

App Router yapısında `pages/` dizini yerine yeni `app/` dizini kullanılır. Bu dizin, React Server Components gibi modern özellikleri destekler.

Temel Router Örneği

`app/page.tsx` dosyası:

export default function Home() {
return <h1>Welcome to the Home Page!</h1>;
}

Bu yapı, `/` rotasını temsil eder.

`app/about/page.tsx` dosyası:

export default function About() {
return <h1>About Page</h1>;
}

Bu dosya ise `/about` rotasını oluşturur.

Dinamik Rotalar

Dinamik rotalar, App Router’da köşeli parantezler kullanılarak tanımlanır. TypeScript ile parametreler tiplenebilir.

Örnek: Dinamik Rota

`app/blog/[id]/page.tsx`:

type BlogProps = {
params: { id: string };
};

export default function BlogPost({ params }: BlogProps) {
const { id } = params;

return <h1>Blog Post ID: {id}</h1>;
}

Bu dosya `/blog/[id]` rotasını temsil eder. Örneğin `/blog/1` veya `/blog/my-post` gibi.

Rota Parametrelerine Erişim

Parametrelere erişmek için Next.js App Router, `params` prop'unu kullanır.

Rota Yönlendirme (Navigation)

Kullanıcıları programlı bir şekilde yönlendirmek veya linklerle navigasyonu yönetmek için App Router araçlarını kullanabilirsiniz.

Link ile Yönlendirme

`app/components/Navigation.tsx`:

import Link from 'next/link';

export default function Navigation() {
return (
<nav>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/blog/1">Blog Post 1</Link>
</nav>
);
}

Programlı Yönlendirme

import { useRouter } from 'next/navigation';

export default function NavigateButton() {
const router = useRouter();

const handleNavigation = () => {
router.push('/about');
};

return <button onClick={handleNavigation}>Go to About</button>;
}

Statik ve Sunucu Taraflı Veri Getirme

Next.js App Router, veri çekme işlemlerini daha basitleştirir. Veri önceden statik olarak hazırlanabilir veya sayfa talebi sırasında alınabilir.

Yeni Veri Çekme Yöntemi

async function getData() {
const res = await fetch('https://api.example.com/products');
return res.json();
}

export default async function Products() {
const products = await getData();

return (
<div>
<h1>Products</h1>
<ul>
{products.map((product) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
}

Dinamik ve Statik Segmentler

Dinamik Segmentler

Dinamik rotalar parametrelere bağlıdır:

type UserProps = {
params: { userId: string };
};

export default function UserPage({ params }: UserProps) {
return <h1>User ID: {params.userId}</h1>;
}

Statik Segmentler

Belirli bir URL yapısına bağlı olarak çalışır:

export default function UserProfile() {
return <h1>User Profile</h1>;
}

Middleware ile Dinamik Kontroller

Middleware ile gelen talepleri kontrol edebilir veya yönlendirebilirsiniz.

import { NextResponse } from 'next/server';

export function middleware(req: Request) {
const url = req.url;

if (!url.includes('authorized')) {
return NextResponse.redirect('/login');
}

return NextResponse.next();
}

Next.js App Router ve TypeScript kombinasyonu, hem güvenli hem de modern bir geliştirme deneyimi sağlar. Dinamik rotalar, programlı yönlendirme ve veri çekme gibi özelliklerle projelerinizi daha hızlı ve verimli bir şekilde geliştirebilirsiniz.

Herhangi bir sorunuz veya eklemek istediğiniz detay varsa, paylaşmaktan çekinmeyin! 😊