Frontend Academy · Lekcja

Pages Router a App Router

Porówna Pan/Pani paradygmaty routingu Next.js: oparty na plikach Pages Router oraz nowy App Router z zagnieżdżonymi układami, stanami wczytywania i granicami błędów.

Lekcja 1 z 413 kroki

Pages Router a App Router to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Dwa routery, jeden framework

Next.js ma dwa systemy routingu: oryginalny Pages Router (katalog pages/) oraz nowszy App Router (katalog app/, Next 13+). Oba nadal działają w Next 14/15.

Pages Router — routing oparty na plikach

Każdy plik w katalogu pages/ staje się trasą. Segmenty dynamiczne używają nawiasów kwadratowych: pages/users/[id].tsx odpowiada ścieżce /users/123.

pages/
  index.tsx        // route: /
  about.tsx        // route: /about
  blog/
    index.tsx      // route: /blog
    [slug].tsx     // route: /blog/:slug
  api/
    users.ts       // API route: /api/users

Pages Router — pobieranie danych

Specjalne eksporty deklarują sposób pobierania danych: getStaticProps (SSG), getServerSideProps (SSR), getStaticPaths (SSG z trasami dynamicznymi).

// pages/posts/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export default function Post({ post }) {
  return <article>{post.body}</article>;
}

App Router — routing oparty na katalogach

App Router używa katalogów jako segmentów tras. Plik page.tsx znajdujący się w katalogu definiuje stronę.

app/
  layout.tsx       // shared root layout
  page.tsx         // route: /
  about/
    page.tsx       // route: /about
  blog/
    page.tsx       // route: /blog
    [slug]/
      page.tsx     // route: /blog/:slug

App Router — pliki specjalne

Pliki dla poszczególnych segmentów udostępniają zaawansowane mechanizmy: layout.tsx (trwały interfejs wokół elementów potomnych), loading.tsx (widok zastępczy Suspense), error.tsx (granica błędów), not-found.tsx.

Zagnieżdżone układy

Układy App Router opakowują zagnieżdżone trasy i pozostają zachowane podczas nawigacji — nie są montowane ponownie.

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

// app/dashboard/settings/page.tsx renders inside the Sidebar layout

Pobieranie danych w App Router

Server Components mogą być asynchroniczne i pobierać dane bezpośrednio — bez getServerSideProps/getStaticProps. Komponent jest wykonywany na serwerze, a do klienta wysyłany jest wyłącznie kod HTML.

// app/posts/[slug]/page.tsx (Server Component by default)
export default async function Post({ params }) {
  const post = await fetch(`https://api/posts/${params.slug}`, {
    next: { revalidate: 60 } // ISR-like caching
  }).then(r => r.json());
  return <article>{post.body}</article>;
}

Client Components w App Router

Na początku pliku należy dodać 'use client', aby oznaczyć jego komponent jako Client Component (interaktywny, uruchamiany w przeglądarce).

// app/Counter.tsx
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Trasy API a obsługa tras

Pages Router: pages/api/users.ts eksportuje domyślną funkcję z req/res. App Router: app/api/users/route.ts eksportuje metody HTTP (GET, POST) jako eksporty nazwane, korzystając ze standardowych obiektów Request/Response.

// app/api/users/route.ts
export async function GET(request: Request) {
  const users = await db.users.findMany();
  return Response.json(users);
}

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

Strategia migracji

Oba routery mogą współistnieć w tym samym projekcie — należy stopniowo przenosić strony, po jednej naraz. W przypadku konfliktu pierwszeństwo ma App Router.

Kiedy używać którego rozwiązania

Nowe projekty: App Router (jest bardziej zaawansowany i stanowi obecnie główny kierunek rozwoju). Istniejące projekty korzystające z Pages Router: można pozostać przy tym rozwiązaniu lub stopniowo przeprowadzić migrację. W przypadku małych statycznych witryn, które nie potrzebują układów ani RSC, można użyć dowolnego z nich.

Szybki test

Jak oznaczyć komponent jako komponent kliencki w App Routerze Next.js?

Odpowiedz w interaktywnej lekcji

Podsumowanie: Pages Router a App Router

Pages Router: routing oparty na plikach, getStaticProps/getServerSideProps. App Router (Next 13+): routing oparty na folderach, asynchroniczne komponenty serwerowe, zagnieżdżone layouty oraz pliki loading/error. Interaktywność po stronie klienta oznacza się za pomocą 'use client'. Trasy API: pages/api/* w porównaniu z app/api/*/route.ts, z eksportami metod HTTP. Oba rozwiązania mogą współistnieć, ale App Router jest aktywnie rozwijany.

Bezpłatny start

Ucz się HTML 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: 41
Lekcje: 163

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Pages Router a App Router” jest bezpłatna?

Tak — pełny tekst „Pages Router a 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Pages Router a App Router”?

Porówna Pan/Pani paradygmaty routingu Next.js: oparty na plikach Pages Router oraz nowy App Router z zagnieżdżonymi układami, stanami wczytywania i granicami błędów. Ćwiczysz Frontend 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ąć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend 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 „Pages Router a 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 Frontend Academy?

Tak. Każda lekcja Frontend 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

← Powrót do Frontend Academy