PricingLoginStart free
React Academy · Lekcja

Konwencje plików App Router

Poznanie katalogu app/ oraz plików page.tsx, layout.tsx, loading.tsx i error.tsx.

Lekcja 1 z 413 kroki

Konwencje plików App Router to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Katalog app/

Next.js App Router korzysta z katalogu app/. Foldery definiują segmenty adresu URL, a specjalne pliki w folderach określają zachowanie każdego segmentu.

page.tsx — interfejs trasy

page.tsx eksportuje komponent React renderowany dla segmentu adresu URL. Bez pliku page.tsx trasa nie jest publicznie dostępna.

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

layout.tsx — Trwałe powłoki

layout.tsx opakowuje trasy podrzędne. Zachowuje stan podczas nawigacji — stan nie jest resetowany po zmianie trasy podrzędnej.

// 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 — Natychmiastowy interfejs ładowania

loading.tsx renderuje się natychmiast podczas asynchronicznego ładowania danych strony. Automatycznie opakowuje stronę w granicę Suspense.

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

error.tsx — Granice błędów

error.tsx jest granicą błędów Reacta dla segmentu. Otrzymuje błąd oraz funkcję reset umożliwiającą ponowienie próby.

'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 — Interfejs 404

not-found.tsx renderuje się, gdy komponent serwerowy wywoła notFound() lub gdy żadna trasa nie pasuje.

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

template.tsx — Layouty montowane ponownie

template.tsx działa podobnie jak layout.tsx, ale podczas każdej nawigacji tworzy nową instancję — stan jest resetowany, a efekty uruchamiane ponownie. Należy go używać do animacji lub analityki.

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

route.ts — Trasy API

route.ts (nie route.tsx) eksportuje handlery metod HTTP (GET, POST itd.), aby tworzyć endpointy API w katalogu app/.

// 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 — Middleware Edge

middleware.ts w katalogu głównym projektu uruchamia się przed każdym dopasowanym żądaniem na brzegu sieci — służy do sprawdzania uwierzytelnienia, przekierowań i przepisywania nagłówków.

// 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*'] };

Współlokowanie

W katalogach app/ można umieszczać obok tras pliki niezwiązane bezpośrednio z trasowaniem (komponenty, narzędzia i testy). Tylko pliki o nazwach zgodnych ze specjalnymi konwencjami (page, layout itd.) są traktowane jako segmenty tras.

Zagnieżdżone layouty

Każdy folder może mieć własny plik layout.tsx. Zagnieżdżony layout opakowuje tylko elementy podrzędne swojego segmentu i łączy się z nadrzędnym layoutem znajdującym się wyżej.

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

Szybkie sprawdzenie

Plik którego typu w App Router zapewnia automatyczny fallback Suspense podczas asynchronicznego ładowania danych strony?

Odpowiedz w interaktywnej lekcji

Podsumowanie

App Router korzysta ze specjalnych plików: page.tsx (interfejs trasy), layout.tsx (trwała powłoka), loading.tsx (fallback Suspense), error.tsx (granica błędów), not-found.tsx (404), route.ts (API) oraz middleware.ts (logika Edge).

Bezpłatny start

Ucz się React dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
88
Lekcje
324
Zacznij naukę bezpłatnieWyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Konwencje plików App Router” jest bezpłatna?

Tak — pełny tekst „Konwencje plików App Router” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Konwencje plików App Router”?

Poznanie katalogu app/ oraz plików page.tsx, layout.tsx, loading.tsx i error.tsx. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Konwencje plików App Router”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Konwencje plików App Router
  2. Komponenty serwerowe a klienckie w Next.js
  3. Dynamiczne trasy i grupy tras
  4. Metadata API i SEO w App Router
← Powrót do React Academy