React 2025 full kursunda bir Netflix klonu geliştirerek modern web uygulamalarının inceliklerini öğrenin. Tailwind CSS, TanStack Router, TanStack Query ve Zustand gibi son teknoloji araçlarla performanslı ve ölçeklenebilir projeler nasıl oluşturulur, bu kapsamlı makalede keşfedin. Günümüz web geliştirme dünyasında rekabetçi kalmak için gerekli tüm bilgilere buradan ulaşabilirsiniz.
Günümüz web uygulamaları neden bu kadar hızlı, etkileşimli ve kullanıcı dostu? Bu sorunun cevabı, sürekli gelişen web teknolojileri ve doğru araçların bir araya gelmesiyle mümkün oluyor. Kullanıcı beklentileri her geçen gün artarken, geliştiricilerin de bu beklentileri karşılayacak, performansı yüksek ve bakımı kolay uygulamalar inşa etmesi gerekiyor. İşte tam da bu noktada React gibi modern bir JavaScript kütüphanesi ve onu tamamlayan güçlü ekosistem araçları devreye giriyor.
React, Facebook tarafından geliştirilen ve kullanıcı arayüzleri oluşturmak için kullanılan deklaratif, bileşen tabanlı bir kütüphanedir. Sanal DOM yapısı sayesinde DOM manipülasyonlarını optimize ederek hızlı güncellemeler sağlar. Ancak tek başına React, güncel ve büyük ölçekli bir web uygulamasının tüm ihtiyaçlarını karşılamakta yeterli değildir. Routing (yönlendirme), global durum yönetimi, asenkron veri çekme ve stilize etme gibi konularda özel çözümlere ihtiyaç duyarız. “React 2025 Full Course – Build a Netflix Clone” bu ihtiyaca yanıt veren, en güncel ve sektörde kabul görmüş araçları bir araya getiren kapsamlı bir yaklaşımdır. Bu kursta, sadece React’ı değil, aynı zamanda modern bir web uygulamasının temel yapı taşları olan Tailwind CSS, TanStack Router, TanStack Query ve Zustand gibi teknolojileri de derinlemesine öğreneceksiniz. Bir Netflix klonu inşa etmek, bu teknolojileri gerçek dünya senaryolarında nasıl uygulayacağınızı gösteren mükemmel bir vaka çalışmasıdır. Kullanıcıların sürekli içerik keşfettiği, favorilerine eklediği ve kesintisiz bir deneyim beklediği bir platformda performans ve ölçeklenebilirlik olmazsa olmazdır. Bu makalede, adı geçen her bir teknolojinin rolünü, birbirleriyle nasıl entegre olduklarını ve bu entegrasyonun size ne gibi avantajlar sağlayacağını adım adım inceleyeceğiz. Geleceğin web uygulamalarını inşa etmeye hazır olun!
Netflix Klonu İçin Temel Taşlar: Teknoloji Yığınına Derin Bir Bakış
Bir Netflix klonu geliştirmek, modern web mimarisinin karmaşıklığını ve gücünü anlamak için harika bir fırsattır. Bu bölümde, projemizin temelini oluşturan her bir teknolojiyi ayrı ayrı ele alacak ve neden bu özel kombinasyonun günümüz web geliştirme için ideal olduğunu açıklayacağız.
React 2025’in Getirdikleri Nelerdir?
React, web arayüzleri geliştirmede de facto standart haline gelmiş bir kütüphanedir. React 2025, kütüphanenin sürekli evrimini temsil ederken, temel felsefesi olan deklaratif ve bileşen tabanlı yaklaşımları korur ve geliştirir. Deklaratif programlama, geliştiricilerin arayüzün “nasıl” görüneceğini değil, “ne” görüneceğini tanımlamalarına olanak tanır. Bu sayede kod daha okunabilir ve bakımı daha kolay hale gelir. Bileşen tabanlı mimari ise, kullanıcı arayüzünü yeniden kullanılabilir, izole edilmiş parçalara ayırmamızı sağlar. Örneğin, bir Netflix klonunda “Film Kartı”, “Navbar”, “Kullanıcı Profili” gibi her bir öge ayrı bir bileşen olarak düşünülebilir. Bu yaklaşım, projenin modülerliğini artırır ve büyük ekiplerin eş zamanlı olarak farklı kısımlar üzerinde çalışmasına imkan tanır. React’ın Sanal DOM’u, gerçek DOM’a doğrudan müdahale etmek yerine, önce bir “sanal” kopyasını güncelleyerek performansı maksimize eder. Bu, özellikle veri yoğun uygulamalarda, DOM manipülasyonlarının neden olduğu darboğazları ortadan kaldırarak daha akıcı bir kullanıcı deneyimi sunar. React 2025 ile gelen potansiyel yenilikler (örneğin daha iyi sunucu bileşenleri veya geliştirilmiş durum yönetimi mekanizmaları), bu temel prensipleri daha da güçlendirerek, gelecekteki web uygulamaları için daha sağlam bir zemin hazırlar.
Tailwind CSS ile Hızlı ve Esnek Stil Oluşturma
Geleneksel CSS yazma yöntemleri, özellikle büyük projelerde, bakım zorlukları ve sınıf adlandırma çatışmaları gibi sorunlara yol açabilir. Tailwind CSS, bu sorunlara “utility-first” adını verdiği bir yaklaşımla çözüm sunar. Utility-first, doğrudan HTML elemanlarının class niteliklerine uygulanabilen, tek bir amaç için optimize edilmiş küçük CSS sınıfları (utility class’lar) kullanmak anlamına gelir. Örneğin, bir elemanı esnek kutu yapmak için flex, ortalamak için justify-center, kenar boşluğu vermek için m-4 gibi sınıflar kullanılır. Bu yaklaşım, özel CSS yazma ihtiyacını büyük ölçüde azaltır ve geliştiricilerin doğrudan markalama ve tasarım sistemlerini hızlıca uygulamasına olanak tanır. Bir Netflix klonunda, film kartlarının boyutları, yazı tipleri, renk şeması gibi tüm görsel detaylar Tailwind sınıfları ile kolayca yönetilebilir. Örneğin, küçük ekranlarda film kartlarının alt alta, büyük ekranlarda yan yana dizilmesi gibi responsive tasarım kuralları, Tailwind’in sm:, md:, lg: gibi ön ekleriyle sezgisel bir şekilde tanımlanır. Bu, mobil uyumluluğu sağlamayı son derece basit hale getirir ve geliştirme sürecini hızlandırır. Tailwind, aynı zamanda PurgeCSS gibi araçlarla entegre olarak, sadece kullanılan CSS sınıflarını nihai çıktıya dahil ederek dosya boyutunu küçültür ve böylece uygulamanın yükleme süresini iyileştirir.
TanStack Router: Gelişmiş Navigasyon Çözümleri
Tek sayfa uygulamalarında (SPA), kullanıcıların farklı sayfalar arasında gezinmesini sağlamak için güçlü bir yönlendirme (routing) kütüphanesine ihtiyaç duyarız. TanStack Router, modern React uygulamaları için özel olarak tasarlanmış, güçlü özelliklere sahip yeni nesil bir yönlendirme çözümüdür. Geleneksel router’lardan farklı olarak, TanStack Router type-safety’ye büyük önem verir, bu da hataları derleme zamanında yakalamanıza yardımcı olur ve geliştirme sürecinde güvenliği artırır. İç içe (nested) rotalar için mükemmel destek sunar; bu, Netflix gibi bir platformda “filmler/kategori/aksiyon” veya “filmler/filmId/detaylar” gibi karmaşık URL yapılarını kolayca yönetmenizi sağlar. Ayrıca, veri yüklemesi (data loading) ve önbellekleme (caching) gibi router’ın kendisiyle entegre özellikleri sayesinde, sayfa geçişleri daha hızlı ve akıcı hale gelir. Örneğin, bir film detay sayfasına gitmeden önce o filmin verilerini router seviyesinde yükleyebilir ve sayfa bileşeni render edildiğinde verinin hazır olmasını sağlayabilirsiniz. Bu, özellikle yavaş ağ bağlantılarında kullanıcı deneyimini önemli ölçüde iyileştiren kritik bir optimizasyondur. Modüler yapısı ve güçlü API’si sayesinde, uygulamanız büyüdükçe rotalarınızı düzenlemek ve bakımını yapmak çok daha kolay hale gelir.
TanStack Query: Veri Yönetiminde Devrim
Web uygulamalarının çoğunun kalbinde asenkron veri yönetimi yatar. API’lerden veri çekmek, göndermek, güncellemek ve silmek, uygulamalarımızın sürekli yaptığı işlemlerdir. TanStack Query (eski adıyla React Query), bu asenkron veri yönetimini devrim niteliğinde bir yaklaşımla basitleştirir. Manuel olarak yazılan loading state’leri, error handling’leri ve önbellekleme mantıklarını ortadan kaldırarak geliştiricilere büyük zaman kazandırır. TanStack Query, veriyi otomatik olarak önbelleğe alır, arka planda günceller (background refetching), eskimiş veriyi yönetir (stale-while-revalidate), tekrar denemeler yapar (retries) ve hatta optimistic update’ler (iyimser güncellemeler) ile kullanıcı deneyimini iyileştirir. Bir Netflix klonunda, film listeleri, kategoriye göre filmler, kullanıcı favorileri gibi tüm veriler TanStack Query ile yönetilebilir. Örneğin, bir kullanıcı bir filmi favorilere eklediğinde, TanStack Query sayesinde UI’ı hemen güncelleyebilir ve ardından arka planda API çağrısını yapabilirsiniz. Eğer API çağrısı başarısız olursa, UI’ı eski haline geri döndürebilirsiniz. Bu, kullanıcının uygulamanın hızlı ve duyarlı hissetmesini sağlarken, aynı zamanda uygulamanın veri bütünlüğünü korur. Gelişmiş hook’ları sayesinde (useQuery, useMutation), API ile etkileşim kurmak sadece birkaç satır kodla mümkün hale gelirken, performans optimizasyonları ve hata yönetimi otomatik olarak sağlanır. Bu kütüphane, özellikle karmaşık ve veri yoğun uygulamalarda geliştirici verimliliğini ve uygulama performansını çarpıcı bir şekilde artırır.
Zustand: Hafif ve Güçlü Durum Yönetimi
React uygulamaları büyüdükçe, farklı bileşenler arasında veri paylaşımı ve global durum yönetimi önemli bir ihtiyaç haline gelir. Redux gibi köklü çözümler olsa da, Zustand, daha basit, hafif ve performans odaklı bir alternatif sunar. “Zero-boilerplate” felsefesiyle tasarlanmış olan Zustand, Redux’un karmaşıklığı olmadan global durum yönetimi sağlamak için React’ın Hook API’sini kullanır. Bir store oluşturmak ve bu store’daki verilere erişmek oldukça sezgiseldir. Store’u bir JavaScript objesi gibi tanımlayabilir ve bu objenin metotlarını kullanarak durumu güncelleyebilirsiniz. Örneğin, bir Netflix klonunda kullanıcı oturum bilgileri, uygulamanın tema ayarı, oynatılan filmin durumu gibi global olarak erişilmesi gereken durumlar Zustand ile kolayca yönetilebilir. Zustand’ın önemli avantajlarından biri, sadece değişen durum parçacıklarını dinleyen bileşenleri yeniden render etmesidir. Bu “seçici” (selector) yaklaşım, gereksiz yeniden render’ları önleyerek uygulamanın performansını artırır. Middleware desteği, devtools entegrasyonu ve TypeScript ile mükemmel uyumu sayesinde, Zustand hem küçük hem de büyük ölçekli projeler için güçlü ve esnek bir durum yönetimi çözümü sunar. React Context API’sine göre daha optimize edilmiş ve Redux’a göre daha az kod gerektiren yapısıyla, geliştiriciler arasında hızla popülerlik kazanmaktadır.
Adım Adım Netflix Klonu Geliştirme: Uygulamalı Yaklaşımlar
Bu bölümde, önceki kısımlarda tanıttığımız teknolojileri bir araya getirerek gerçek bir Netflix klonu projesini nasıl adım adım inşa edeceğimizi detaylandıracağız. Konu sadece teorik bilgi aktarmakla kalmayacak, aynı zamanda pratik kod örnekleri ve gerçek dünya senaryolarıyla pekiştirilecektir. Proje kurulumundan başlayarak, her bir teknolojinin entegrasyonunu ve Netflix benzeri bir kullanıcı deneyimi oluşturmak için nasıl kullanılacağını göreceğiz.
Proje Kurulumu ve İlk Bileşenler
Her büyük projede olduğu gibi, ilk adım projenin temelini atmaktır. Modern React projeleri için Vite, hızlı geliştirme sunucusu ve daha iyi performansıyla Create React App’e (CRA) popüler bir alternatif haline gelmiştir. Yeni bir React projesi başlatmak için terminalinizde aşağıdaki komutu kullanabilirsiniz:
npm create vite@latest netflix-clone -- --template react-ts
cd netflix-clone
npm install
Proje dizinine girdikten sonra, Tailwind CSS'i kurmamız gerekiyor. Bu, UI tasarımımızı hızlandıracak ve responsive design'ı kolaylaştıracaktır.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Ardından, tailwind.config.js dosyanızı aşağıdaki gibi düzenleyerek Tailwind'in React bileşenlerinizdeki sınıfları taramasını sağlamalısınız:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Son olarak, src/index.css dosyanızın başına Tailwind'in yönergelerini ekleyin:
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Artık temel bir React ve Tailwind projemiz var. Şimdi ilk bileşenlerimizi oluşturabiliriz. Örneğin, bir Navbar bileşeni, Netflix'in üst kısmındaki navigasyon çubuğunu temsil eder. Basit bir Navbar bileşeni şöyle görünebilir:
// src/components/Navbar.tsx
import React from 'react';
const Navbar: React.FC = () => {
return (
);
};
export default Navbar;
Bu bileşeni App.tsx içine ekleyerek uygulamanızda görünmesini sağlayabilirsiniz.
TanStack Router ile Sayfa Navigasyonu Nasıl Yapılır?
Uygulamamızın farklı bölümleri arasında sorunsuz geçişler sağlamak için TanStack Router'ı entegre etmeliyiz. İlk olarak, kütüphaneyi kuralım:
npm install @tanstack/react-router
TanStack Router, genellikle src/router.ts veya src/routes/index.ts gibi merkezi bir dosyada tanımlanır. Bu dosyada root router'ımızı ve uygulama içindeki tüm rotaları tanımlayacağız. İşte basit bir örnek:
// src/router.tsx
import { createRouter, createRootRoute, Route } from '@tanstack/react-router';
import App from './App'; // Ana uygulamanızın bulunduğu yer
import Home from './pages/Home';
import Movies from './pages/Movies';
import MovieDetail from './pages/MovieDetail';
const rootRoute = createRootRoute({
component: () => (
<>
{/* Burada Navbar, Footer gibi genel bileşenleri render edebiliriz */}
{/* İç içe rotaların içeriği burada render edilecek */}
>
),
});
const homeRoute = new Route({
getParentRoute: () => rootRoute,
path: '/',
component: Home,
});
const moviesRoute = new Route({
getParentRoute: () => rootRoute,
path: '/movies',
component: Movies,
});
const movieDetailRoute = new Route({
getParentRoute: () => moviesRoute, // Movies altında bir detay sayfası
path: '$movieId', // Dinamik segment
component: MovieDetail,
loader: ({ params: { movieId } }) => {
// Burada TanStack Query ile film detay verilerini çekebiliriz
console.log(Loading details for movie ID: ${movieId});
return { movieId };
},
});
const routeTree = rootRoute.addChildren([homeRoute, moviesRoute.addChildren([movieDetailRoute])]);
export const router = createRouter({ routeTree });
declare module '@tanstack/react-router' {
interface Register {
router: typeof router;
}
}
Ardından, main.tsx dosyanızda router'ı uygulamaya entegre etmelisiniz:
// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { RouterProvider } from '@tanstack/react-router';
import { router } from './router';
ReactDOM.createRoot(document.getElementById('root')!).render(
,
);
Navbar bileşeninizdeki etiketlerini TanStack Router'ın bileşeniyle değiştirebilirsiniz:
import { Link } from '@tanstack/react-router';
// ...
Anasayfa
Filmler
Bu şekilde, SPA doğası korunarak sayfalar arasında hızlı ve modern bir navigasyon sağlanır.
TanStack Query ile Film Verilerini Çekme ve Yönetme
Netflix klonumuzda API'den film verilerini çekmek ve yönetmek için TanStack Query'yi kullanacağız. Öncelikle kütüphaneyi kurun:
npm install @tanstack/react-query
Ardından, QueryClient'ı ve QueryClientProvider'ı main.tsx dosyanızda ayarlayın:
// src/main.tsx (güncellenmiş)
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { RouterProvider } from '@tanstack/react-router';
import { router } from './router';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById('root')!).render(
,
);
Şimdi, film verilerini çekmek için bir bileşen içinde useQuery hook'unu kullanabiliriz. TMDB (The Movie Database) API'si gibi bir hizmeti kullanabiliriz. (API anahtarınızı almanız ve bir fetch yardımcı fonksiyonu oluşturmanız gerekecektir.)
// src/pages/Home.tsx
import React from 'react';
import { useQuery } from '@tanstack/react-query';
interface Movie {
id: number;
title: string;
poster_path: string;
overview: string;
}
const fetchPopularMovies = async (): Promise => {
const response = await fetch(
https://api.themoviedb.org/3/movie/popular?api_key=SİZİN_API_ANAHTARINIZ&language=tr-TR&page=1
);
if (!response.ok) {
throw new Error('Popüler filmler çekilemedi.');
}
const data = await response.json();
return data.results;
};
const Home: React.FC = () => {
const { data: movies, isLoading, isError, error } = useQuery({
queryKey: ['popularMovies'],
queryFn: fetchPopularMovies,
});
if (isLoading) return Filmler yükleniyor...;
if (isError) return Hata oluştu: {error?.message};
return (
Popüler Filmler
{movies?.map((movie) => (
{movie.title}
{movie.overview.substring(0, 100)}...
/movies/${movie.id}} className="mt-4 inline-block text-red-500 hover:underline">
Daha Fazla
))}
);
};
export default Home;
Bu kod bloğu, popüler filmleri TMDB API'sinden çeker, yükleme ve hata durumlarını yönetir ve filmleri responsive bir grid düzende görüntüler. TanStack Query sayesinde bu işlemleri oldukça az kodla gerçekleştirebiliyoruz.
Zustand ile Kullanıcı Tercihleri ve Durum Yönetimi
Uygulamamızın global durumlarını (örneğin kullanıcı giriş durumu, karanlık/aydınlık tema seçimi) yönetmek için Zustand'ı kullanacağız. Önce Zustand'ı kuralım:
npm install zustand
Şimdi bir Zustand store'u oluşturalım. Örneğin, kullanıcı oturumu ve tema tercihini yöneten bir store:
// src/store/authStore.ts
import { create } from 'zustand';
interface AuthState {
isLoggedIn: boolean;
user: { username: string } | null;
theme: 'light' | 'dark';
login: (username: string) => void;
logout: () => void;
toggleTheme: () => void;
}
export const useAuthStore = create((set) => ({
isLoggedIn: false,
user: null,
theme: 'dark', // Varsayılan tema
login: (username) => set({ isLoggedIn: true, user: { username } }),
logout: () => set({ isLoggedIn: false, user: null }),
toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
}));
Bu store'u herhangi bir bileşen içinde kullanabiliriz. Örneğin, Navbar'da giriş/çıkış butonu ve tema değiştirme özelliği ekleyelim:
// src/components/Navbar.tsx (güncellenmiş) import React from 'react'; import { Link } from '@tanstack/react-router'; import { useAuthStore } from '../store/authStore'; const Navbar: React.FC = () => { const { isLoggedIn, user, login, logout, theme, toggleTheme } = useAuthStore(); return (}>NETFLIX
- Anasayfa
- Filmler
{isLoggedIn ? ( Merhaba, {user?.username} ) : ( )}); }; export default Navbar;
Bu örnek, Zustand'ın ne kadar kolay entegre edilebileceğini ve global durumu nasıl yönettiğini gösteriyor. toggleTheme fonksiyonu sayesinde, uygulama genelindeki bileşenler tema değişikliğine anında tepki verebilir.
Responsive Tasarım ve Mobil Uyumluluk İpuçları
Günümüzde mobil cihazlardan erişim, masaüstü erişiminden daha fazla olabilir. Bu nedenle, geliştirdiğimiz Netflix klonunun mobil uyumlu (responsive) olması kritik öneme sahiptir. Tailwind CSS, bu konuda eşsiz bir kolaylık sunar. Tailwind'in responsive ön ekleri sayesinde, aynı CSS sınıfı içinde farklı ekran boyutları için farklı stiller tanımlayabiliriz.
Örneğin, film kartlarını gösterdiğimiz grid yapısında, küçük ekranlarda tek sütun, orta ekranlarda iki sütun, büyük ekranlarda ise dört sütun göstermek isteyebiliriz. Tailwind ile bu, aşağıdaki gibi basit bir sınıf tanımıyla başarılabilir:
{/* Film kartları */}
grid-cols-1: Varsayılan olarak (mobil cihazlar için) tek sütun.sm:grid-cols-2: Small (640px ve üzeri) ekranlar için iki sütun.md:grid-cols-3: Medium (768px ve üzeri) ekranlar için üç sütun.lg:grid-cols-4: Large (1024px ve üzeri) ekranlar için dört sütun.xl:grid-cols-5: Extra Large (1280px ve üzeri) ekranlar için beş sütun.
Bu yaklaşım, geleneksel media query yazma zahmetini ortadan kaldırır ve HTML içinde tasarım kararlarını doğrudan görmemizi sağlar. Ayrıca, Tailwind'in arkasındaki PostCSS yapısı, çıktıyı optimize ederek sadece kullanılan CSS'i barındırır, bu da mobil cihazlar için daha küçük dosya boyutları anlamına gelir. Geliştiricilerin responsive tasarıma başlamadan önce "mobile-first" yaklaşımını benimsemesi önerilir; yani önce en küçük ekranlar için tasarım yapılır, ardından daha büyük ekranlar için eklemeler yapılır. Bu, daha esnek ve performanslı bir responsive tasarım sürecini beraberinde getirir.
Performans ve Ölçeklenebilirlik İçin İpuçları
Bir Netflix klonu gibi içerik yoğun bir uygulamanın sadece işlevsel olması yetmez, aynı zamanda hızlı ve ölçeklenebilir olması da gerekir. Bu bölümde, kullanıcı deneyimini iyileştirmek ve uygulamanızın gelecekteki büyümesine hazırlanmak için ileri düzey teknikleri inceleyeceğiz.
Lazy Loading ve Code Splitting ile Yükleme Süreçlerini Hızlandırma
Tek sayfa uygulamaları (SPA'lar) tüm JavaScript kodunu başlangıçta yükleme eğilimindedir. Bu durum, özellikle büyük uygulamalar için, ilk yükleme süresini uzatabilir. Lazy Loading (tembel yükleme) ve Code Splitting (kod bölme), bu sorunu çözmek için kullanılan kritik optimizasyon teknikleridir.
Code Splitting, uygulamanızın JavaScript paketini daha küçük parçalara ayırma işlemidir. Kullanıcı bir sayfayı ziyaret ettiğinde veya belirli bir etkileşimde bulunduğunda sadece o sayfa için gerekli kodu yükleyerek, başlangıç yükleme süresini önemli ölçüde azaltır.
Lazy Loading ise, bu küçük kod parçacıklarını yalnızca ihtiyaç duyulduğunda yükleme prensibidir. React, React.lazy() ve Suspense bileşenleri aracılığıyla lazy loading'i destekler:
// src/App.tsx
import React, { Suspense } from 'react';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
// Lazy loading ile Home bileşenini sadece ihtiyaç duyulduğunda yükle
const Home = React.lazy(() => import('./pages/Home'));
const Movies = React.lazy(() => import('./pages/Movies'));
// ... diğer sayfalar
function App() {
return (
Yükleniyor...}>
{/* Router içeriği buraya gelecek, örneğin: veya belirli route componentleri */}