0Pricing
React Academy · Ders

App Router Dosya Kuralları

app/ dizinini, page.tsx, layout.tsx, loading.tsx ve error.tsx dosyalarını öğrenin.

App Router Dosya Kuralları, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

app/ Dizini

Next.js uygulama yönlendiricisi app/ dizinini kullanır. Klasörler URL bölümlerini tanımlar; klasörlerdeki özel dosyalar her bölümün davranışını belirler.

page.tsx — Rota Arayüzü

page.tsx, bir URL bölümü için oluşturulan React bileşenini dışa aktarır. page.tsx olmadan rota herkese açık şekilde erişilebilir değildir.

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// → accessible at /dashboard

layout.tsx — Kalıcı Kabuklar

layout.tsx alt rotaları sarar. Gezinmeler arasında kalıcıdır; alt rota değiştiğinde durumu sıfırlanmaz.

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

loading.tsx — Anında Yükleme Arayüzü

loading.tsx, sayfanın eşzamansız verileri yüklenirken hemen oluşturulur. Sayfayı otomatik bir Suspense sınırıyla sarar.

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetching

error.tsx — Hata Sınırları

error.tsx, segment için bir React hata sınırıdır. Yeniden denemek üzere hatayı ve bir reset işlevini alır.

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

not-found.tsx — 404 Kullanıcı Arayüzü

not-found.tsx, bir sunucu bileşeninden notFound() çağrıldığında veya hiçbir rota eşleşmediğinde oluşturulur.

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page not found</h2>
      <Link href="/">Go home</Link>
    </div>
  );
}

template.tsx — Yeniden Bağlanan Düzenler

template.tsx, layout.tsx gibidir ancak her gezinmede yeni bir örnek oluşturur; durum sıfırlanır ve efektler yeniden çalıştırılır. Animasyonlar veya analiz için kullanın.

// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
  return <div className="shop-fade-in">{children}</div>;
}

route.ts — API Rotaları

route.ts (route.tsx değil), app/ dizini içinde API uç noktaları oluşturmak için HTTP yöntem işleyicilerini (GET, POST vb.) dışa aktarır.

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await createUser(body);
  return Response.json(user, { status: 201 });
}

middleware.ts — Edge Ara Katmanı

Proje kökündeki middleware.ts, eşleşen her isteğin öncesinde Edge üzerinde çalışır; kimlik doğrulama kontrolleri, yönlendirmeler ve üst bilgi yeniden yazımları için kullanılır.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

Birlikte Konumlandırma

Rota olmayan dosyaları (bileşenler, yardımcı araçlar, testler) app/ klasörlerinin içine birlikte yerleştirebilirsiniz. Yalnızca özel kurallara sahip adlarla (page, layout vb.) adlandırılan dosyalar rota segmenti olarak değerlendirilir.

İç İçe Düzenler

Her klasörün kendi layout.tsx dosyası olabilir. İç içe düzen, yalnızca kendi segmentinin alt öğelerini sarar ve üstündeki üst düzenle birleşir.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

Hızlı Kontrol

Bir sayfanın eşzamansız verileri yüklenirken otomatik bir Suspense yedeği sağlayan App Router dosyası hangisidir?

Özet

App Router özel dosyalar kullanır: page.tsx (rota arayüzü), layout.tsx (kalıcı kabuk), loading.tsx (Suspense yedeği), error.tsx (hata sınırı), not-found.tsx (404), route.ts (API) ve middleware.ts (Edge mantığı).

Sıkça Sorulan Sorular

“App Router Dosya Kuralları” dersi ücretsiz mi?

Evet — “App Router Dosya Kuralları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“App Router Dosya Kuralları” dersinde ne öğreneceğim?

app/ dizinini, page.tsx, layout.tsx, loading.tsx ve error.tsx dosyalarını öğrenin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“App Router Dosya Kuralları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. App Router Dosya Kuralları
  2. Next.js'te Sunucu ve İstemci Bileşenleri
  3. Dinamik Rotalar ve Rota Grupları
  4. App Router'da Metadata API'si ve SEO
← React Academy Sayfasına Dön