Next.js 15 Fullstack Web Apps · Ders

Yükleme ve Hata Arayüzü Kuralları

Sağlam, akışa aktarılan rotalar ve zarif geri dönüşler oluşturmak için App Router dosya kuralları olan loading.js, error.js ve not-found.js dosyalarını kullanın.

4. ders / 413 adım

Yükleme ve Hata Arayüzü Kuralları, CoddyKit'te ücretsiz bir Next.js 15 Fullstack Web Apps dersidir. Bu, 4 dersinin 4. 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, Next.js 15 Fullstack Web Apps öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Why Loading and Error UI Matter

Advanced routing is not only about where a route lives but about what users see while it resolves or fails. The App Router gives you special files that wrap segments automatically.

loading.js renders an instant fallback while the segment streams.
error.js catches runtime errors in that segment.
not-found.js renders when notFound() is called.

The loading.js Convention

A loading.js file in a segment folder is automatically wrapped around page.js in a React Suspense boundary. While the server component awaits data, the loading UI shows instantly.

export default function Loading() {
  return <div className="spinner">Loading dashboard...</div>;
}

Skeletons Beat Spinners

For perceived performance, render a skeleton that mirrors the final layout instead of a generic spinner. It reduces layout shift and feels faster.

export default function Loading() {
  return (
    <ul>
      {Array.from({ length: 5 }).map((_, i) => (
        <li key={i} className="skeleton-row" />
      ))}
    </ul>
  );
}

Streaming with Suspense

Because loading.js is just Suspense under the hood, the rest of the layout renders immediately while only the slow segment streams in. You can also nest your own Suspense boundaries inside a page for finer control.

import { Suspense } from 'react';

export default function Page() {
  return (
    <section>
      <h1>Reports</h1>
      <Suspense fallback={<p>Loading chart...</p>}>
        <SlowChart />
      </Suspense>
    </section>
  );
}

The error.js Convention

error.js must be a Client Component. It receives the thrown error and a reset function to retry rendering the segment.

'use client';

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

Error Boundaries Are Scoped

An error.js catches errors in its segment and its children, but not in the layout at the same level. To catch layout errors, place the error file one level up.

Errors bubble up to the nearest parent boundary.
The root layout cannot be caught by a sibling error file.

global-error.js for the Root

To catch errors in the root layout itself, add global-error.js. It replaces the entire document, so it must render its own <html> and <body> tags.

'use client';

export default function GlobalError({ error, reset }) {
  return (
    <html>
      <body>
        <h2>App crashed</h2>
        <button onClick={() => reset()}>Reload</button>
      </body>
    </html>
  );
}

Triggering not-found.js

Call notFound() from next/navigation inside a server component to render the nearest not-found.js and send a 404 status.

import { notFound } from 'next/navigation';

export default async function Page({ params }) {
  const post = await getPost(params.id);
  if (!post) notFound();
  return <article>{post.title}</article>;
}

Custom not-found.js UI

Place not-found.js in any segment to override the default 404 for that part of the route tree. A root-level one acts as the global 404 page.

import Link from 'next/link';

export default function NotFound() {
  return (
    <div>
      <h2>Post not found</h2>
      <Link href="/blog">Back to blog</Link>
    </div>
  );
}

Combining the Conventions

A robust segment folder often contains all four files working together:

page.js — the content
loading.js — streamed fallback
error.js — runtime failure recovery
not-found.js — missing resource

Each is wired up automatically by the App Router with no manual provider setup.

Logging Errors in Production

Use a useEffect inside error.js to report errors to your monitoring service while still showing recovery UI to the user.

'use client';
import { useEffect } from 'react';

export default function Error({ error, reset }) {
  useEffect(() => {
    reportToSentry(error);
  }, [error]);
  return <button onClick={reset}>Retry</button>;
}

Quick Check

Which statement about error.js in the App Router is correct?

İnteraktif derste cevapla

Recap

You learned the App Router's resilience conventions:

loading.js wraps segments in Suspense for instant streamed fallbacks.
error.js (Client Component) recovers from runtime errors with reset.
global-error.js catches root-layout failures.
not-found.js renders when notFound() is called.

Together they make advanced routes graceful under load and failure.

Başlamak ücretsiz

Yapay zeka eğitmeniyle TypeScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 12
Dersler: 48

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Yükleme ve Hata Arayüzü Kuralları” dersi ücretsiz mi?

Evet — “Yükleme ve Hata Arayüzü 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 Next.js 15 Fullstack Web Apps kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

“Yükleme ve Hata Arayüzü Kuralları” dersinde ne öğreneceğim?

Sağlam, akışa aktarılan rotalar ve zarif geri dönüşler oluşturmak için App Router dosya kuralları olan loading.js, error.js ve not-found.js dosyalarını kullanın. Next.js 15 Fullstack Web Apps 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.

Next.js 15 Fullstack Web Apps öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack Web Apps, 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 4. dersidir.

“Yükleme ve Hata Arayüzü 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 Next.js 15 Fullstack Web Apps dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Next.js 15 Fullstack Web Apps 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

Dinamik Yollar ve Tümünü Yakalayan Bölümler
İç İçe Düzenler ve Yol Grupları
Paralel ve Araya Giren Yollar
Yükleme ve Hata Arayüzü Kuralları

← Next.js 15 Fullstack Web Apps Sayfasına Dön