Next.js App Router - Przewodnik dla Początkujących

Czym jest App Router?

App Router to od kilku lat standardowy sposób budowania aplikacji w Next.js. To, co w czasach Next.js 13 było nowinką, dziś jest dojrzałym, sprawdzonym w produkcji modelem - opartym na React Server Components, z błyskawicznym Turbopackiem jako domyślnym bundlerem. W tym artykule dowiesz się:

• Czym są Server Components i dlaczego są domyślne
• Jak działa routing oparty na strukturze folderów
• Kiedy sięgać po Client Components

Podstawy App Router

App Router wykorzystuje strukturę folderów app/ - każdy folder reprezentuje segment URL, a plik page.tsx definiuje stronę:

// app/blog/page.tsx
export default function BlogPage() {
  return <h1>Blog</h1>
}

Starszy katalog pages/ wciąż jest wspierany dla istniejących projektów, ale nowe aplikacje buduje się w app/ - i to na nim koncentruje się rozwój frameworka.

Server Components vs Client Components

Server Components (domyślne):

• Renderowane na serwerze
• Zero JavaScriptu wysyłanego do przeglądarki
• Bezpośredni dostęp do bazy danych i sekretów
• Lepsze SEO i szybsze ładowanie

Po latach w produkcji Server Components to dziś dojrzały, dobrze udokumentowany model - cały ekosystem (biblioteki UI, CMS-y, ORM-y) jest z nim zgodny.

Client Components ('use client'):

• Interaktywność (useState, useEffect)
• Event handlers
• Browser APIs

Zasada jest prosta: serwer domyślnie, klient tylko tam, gdzie potrzebna jest interaktywność.

Praktyczny przykład

Zobaczmy, jak pobrać dane bezpośrednio w komponencie serwerowym - bez useEffect, bez dodatkowych bibliotek:

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts')
  return res.json()
}

export default async function PostsPage() {
  const posts = await getPosts()

  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  )
}

Komponent jest asynchroniczny, dane pobierane są na serwerze, a do przeglądarki trafia gotowy HTML.

Routing i nawigacja

Nawigacja między stronami odbywa się przez komponent Link, z automatycznym prefetchingiem w tle:

import Link from 'next/link'

export default function Navigation() {
  return (
    <nav>
      <Link href="/blog">Blog</Link>
      <Link href="/about">O nas</Link>
    </nav>
  )
}

Loading states i obsługa błędów

App Router ma wbudowane konwencje dla stanów ładowania i błędów - wystarczy dodać odpowiedni plik:

// app/blog/loading.tsx
export default function Loading() {
  return <div>Ładowanie...</div>
}

// app/blog/error.tsx
'use client'

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Coś poszło nie tak!</h2>
      <button onClick={() => reset()}>Spróbuj ponownie</button>
    </div>
  )
}

Plik loading.tsx automatycznie opakowuje stronę w granicę Suspense, a error.tsx działa jak error boundary dla całego segmentu.

Turbopack - szybki development bez konfiguracji

Domyślnym bundlerem Next.js jest dziś stabilny Turbopack - napisany w Rust następca Webpacka. W praktyce oznacza to niemal natychmiastowy start serwera deweloperskiego i błyskawiczny hot reload nawet w dużych projektach. Nie trzeba nic konfigurować - po prostu działa.

Podsumowanie

App Router to dziś oczywisty wybór dla każdej nowej aplikacji Next.js. Dzięki Server Components tworzysz szybsze, bardziej SEO-friendly strony przy mniejszej ilości kodu po stronie klienta.

Kluczowe wnioski:

• Server Components są domyślne - i tak powinno zostać
• Client Components tylko tam, gdzie potrzebna interaktywność
• Struktura folderów app/ jest intuicyjna i skalowalna
• Loading i error states to wbudowane konwencje, nie boilerplate
• Turbopack zapewnia szybki development bez konfiguracji

Następne kroki

Chcesz dowiedzieć się więcej o Next.js? Sprawdź nasze inne artykuły lub skontaktuj się z nami - pomożemy Ci zbudować nowoczesną aplikację!

Umów konsultację →