04 — Page komponenty (page.js / page.tsx)

Výuka

Proč to existuje?

Každá webová aplikace potřebuje stránky — domovskou stránku, stránku "O nás", blog, produkty, atd. V tradičních frameworcích musíš ručně říct, která komponenta se zobrazí na které URL.

Next.js to zjednodušuje pomocí speciálního souboru page.js — každý soubor s názvem page.js se automaticky stane stránkou na příslušné URL.

Co je page komponenta?

Page je React komponenta, která obsahuje obsah stránky pro konkrétní URL. Je to "hlavní věc", kterou uživatel uvidí, když navštíví danou adresu.

Představ si to jako plakát na dveřích místnosti: když vejdeš do místnosti (navštívíš URL), uvidíš plakát (page obsah).

Jak to funguje?

Next.js hledá soubory s názvem page.js nebo page.tsx v adresáři app/ a automaticky je mapuje na URL:

Pravidlo:

• app/page.js → stránka na URL / (domovská stránka)
• app/about/page.js → stránka na URL /about
• app/blog/page.js → stránka na URL /blog
• app/blog/[slug]/page.js → dynamická stránka /blog/jakykoli-clanek

Důležité:

• Pouze soubory s názvem page.js se stanou stránkami
• Ostatní soubory (komponenty, utility) můžeš pojmenovat libovolně — nestanou se stránkami

K čemu to slouží?

• Jasná organizace — víš, které soubory jsou stránky (všechny se jmenují page.js)
• Automatický routing — nepotřebuješ konfiguraci
• Izolace obsahu — každá stránka má svůj soubor
• Server components by default — stránky se vykreslují na serveru (rychlejší načítání)

JavaScript

// app/page.js (domovská stránka - /)
export default function Home(){
  return (
    <div>
      <h1>Vítejte na našem webu</h1>
      <p>Toto je domovská stránka</p>
    </div>
  )
}

// app/about/page.js (stránka O nás - /about)
export default function About(){
  return (
    <div>
      <h1>O nás</h1>
      <p>Jsme tým vývojářů...</p>
    </div>
  )
}

// app/contact/page.js (kontakt - /contact)
export default function Contact(){
  return (
    <div>
      <h1>Kontakt</h1>
      <form>
        <input type="email" placeholder="Váš email" />
        <button>Odeslat</button>
      </form>
    </div>
  )
}

TypeScript

// app/page.tsx
export default function Home(): JSX.Element{
  return (
    <div>
      <h1>Vítejte na našem webu</h1>
      <p>Toto je domovská stránka</p>
    </div>
  )
}

// app/about/page.tsx
export default function About(): JSX.Element{
  return (
    <div>
      <h1>O nás</h1>
      <p>Jsme tým vývojářů...</p>
    </div>
  )
}

// Page s async data loading (server component)
interface Post {
  id: number
  title: string
}

export default async function BlogPage(): Promise<JSX.Element>{
  const posts: Post[] = await fetch('https://api.example.com/posts')
    .then(r => r.json())

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

Rozdíl JS vs TS

TypeScript přidává:

• Návratové typy (JSX.Element, Promise pro async)
• Typy pro props (když stránka přijímá params nebo searchParams)
• Typy pro data (když načítáš data z API)

To zajišťuje, že pracuješ se správnými daty a předcházíš runtime chybám.

Server vs Client Components

Server Component (výchozí)

// app/blog/page.js
// Toto je server component (výchozí, bez "use client")

export default async function BlogPage(){
  // Můžeš přímo fetchovat data
  const posts = await fetch('https://api.example.com/posts').then(r => r.json())

  return (
    <div>
      {posts.map(post => <Article key={post.id} {...post} />)}
    </div>
  )
}

Výhody:

• Může přímo přistupovat k databázi nebo API
• Menší JavaScript bundle (rychlejší načítání)
• Lepší SEO (HTML se generuje na serveru)

Client Component

// app/search/page.js
"use client" // Označení client komponenty

import { useState } from 'react'

export default function SearchPage(){
  const [query, setQuery] = useState('')

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Hledat..."
      />
      <p>Hledáš: {query}</p>
    </div>
  )
}

Kdy použít:

• Potřebuješ React hooks (useState, useEffect, atd.)
• Event handlers (onClick, onChange)
• Interaktivní komponenty (formuláře, modaly)

Tip

• Výchozí = server component — rychlejší a efektivnější
• Přidej "use client" jen když musíš — pro interaktivitu
• Pojmenování funkce — měj konzistentní pojmenování (např. název složky + "Page")
• Export default — page komponenta musí být default export

Mapování stránek — ASCII diagram

Jak page soubory mapují na URL:

app/
├─ page.js              # → /  (domovská stránka)
├─ about/
│  └─ page.js           # → /about
├─ contact/
│  └─ page.js           # → /contact
├─ products/
│  ├─ page.js           # → /products
│  └─ [id]/
│     └─ page.js        # → /products/123 (dynamický)
└─ blog/
   ├─ page.js           # → /blog
   └─ [slug]/
      └─ page.js        # → /blog/muj-clanek (dynamický)

Důležité poznámky:

• Složky bez page.js nejsou přístupné jako URL
• Můžeš mít komponenty v jiných souborech — nestanou se stránkami
• page.js = veřejně přístupná stránka