Next.js App Router - praktyczny przewodnik dla początkujących

Next.js App Router to rewolucyjna zmiana w sposobie budowania aplikacji React. W tym artykule przejdziemy przez najważniejsze koncepcje i pokażemy, jak je zastosować w praktyce.

Czym jest App Router?

App Router został wprowadzony w Next.js 13 jako nowy sposób definiowania routingu w aplikacji. W przeciwieństwie do poprzedniego Pages Routera, wykorzystuje konwencję opartą na folderach i plikach specjalnych.

Struktura folderów

          app/
        
├── page.tsx          # Strona główna (/)
├── layout.tsx        # Główny layout
├── blog/
│   ├── page.tsx      # /blog
│   └── [slug]/
│       └── page.tsx  # /blog/:slug
└── globals.css

Server Components - domyślnie

Jedną z największych zalet App Routera jest to, że komponenty są domyślnie renderowane na serwerze. Oznacza to:
- Mniejszy bundle JavaScript - kod komponentów nie trafia do przeglądarki
- Bezpośredni dostęp do danych - możesz pobierać dane bezpośrednio w komponencie
- Lepsza wydajność - szybsze ładowanie strony

          // app/blog/page.tsx - Server Component (domyślnie)
        
async function BlogPage() {
  const posts = await fetchPosts() // Bezpośrednie pobieranie danych

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Kiedy używać Client Components?

Dodaj dyrektywę "use client" na początku pliku, gdy potrzebujesz:
- Interaktywności (onClick, onChange)
- Hooków React (useState, useEffect)
- API przeglądarki (localStorage, window)

          "use client"
        
import { useState } from "react"

function Counter() {
  const [count, setCount] = useState(0)
  
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Kliknięć: {count}
    </button>
  )
}

Layouty - współdzielony interfejs

Layouty pozwalają na tworzenie wspólnej struktury dla grup stron:

          // app/blog/layout.tsx
        
export default function BlogLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="max-w-3xl mx-auto">
      <nav>Blog Navigation</nav>
      {children}
    </div>
  )
}

Podsumowanie

App Router to przyszłość Next.js. Choć wymaga nieco innego podejścia niż Pages Router, oferuje znaczące korzyści w zakresie wydajności i DX (Developer Experience). Zachęcam do eksperymentowania z nowymi możliwościami w swoich projektach.

Przydatne linki

- Dokumentacja Next.js App Router
- React Server Components