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

Wprowadzenie do App Router

Next.js 14 wprowadza App Router - rewolucyjne podejście do routingu i renderowania w aplikacjach React. W tym artykule dowiesz się:

Czym są Server Components
Jak działa nowy system routingu
Kiedy używać Client Components

Podstawy App Router

App Router wykorzystuje strukturę folderów app/ zamiast starego pages/. Każdy folder reprezentuje segment URL:

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

Server Components vs Client Components

Server Components (domyślne):

Renderowane na serwerze
Zero JavaScript wysyłane do przeglądarki
Bezpośredni dostęp do bazy danych
Lepsze SEO

Client Components ('use client'):

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

Praktyczny Przykład

Zobaczmy jak stworzyć prostą stronę z danymi z API:

// 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>
  )
}

Routing i Nawigacja

Next.js App Router oferuje nowe podejście do nawigacji:

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 Error Handling

App Router umożliwia łatwe zarządzanie stanami ładowania:

// 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>
  )
}

Podsumowanie

App Router to przyszłość Next.js. Dzięki Server Components możesz tworzyć szybsze, bardziej SEO-friendly aplikacje.

Kluczowe wnioski:

Używaj Server Components jako domyślnych
Client Components tylko gdy potrzebujesz interaktywności
Nowa struktura folderów jest intuicyjna
Loading i error states są łatwe do implementacji

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ę!

#nextjs #react #app-router #tutorial

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