Zpět na kurz

Lekce 2: Routing a komponenty

V minulé lekci jste si úspěšně rozjeli svůj první Next.js projekt. V této lekci se ponoříme hlouběji do **file-based routingu** a ukážeme si, jak tvořit a používat **komponenty**, které jsou základním stavebním kamenem každé React aplikace.

Shrnutí lekce:

V této lekci se naučíte, jak vytvořit složitější strukturu stránek a jak si zjednodušit práci s opakovaně použitelnými prvky. Níže najdete odkazy na jednotlivé části lekce:

File-based routing v Next.js

Next.js používá **file-based routing**, což znamená, že každá stránka je automaticky vytvořena na základě souboru v adresáři app/. Například vytvořením souboru app/products/page.tsx získáte stránku dostupnou na URL /products.


// app/products/page.tsx
export default function ProductsPage() {
  return <h1>Stránka s produkty</h1>;
}

Dynamické route

Pokud chcete mít stránky pro jednotlivé produkty (např. /products/1, /products/2), použijete **dynamické route** s názvem souboru v hranatých závorkách.


// app/products/[id]/page.tsx
export default function ProductPage({ params }) {
  return <h1>Produkt s ID: {params.id}</h1>;
}

Layouty a šablony

**Layouty** (layout.tsx) jsou komponenty, které obalují celou vaši aplikaci nebo její část a definují opakovaně použitelnou strukturu (např. navigace, zápatí). Vytvořením app/layout.tsx ovlivníte celou aplikaci.


// app/layout.tsx
import './globals.css';
import Link from 'next/link';

export default function RootLayout({ children }) {
  return (
    <html lang="cs">
      <body>
        <header>
          <nav>
            <Link href="/">Domů</Link>
            <Link href="/products">Produkty</Link>
          </nav>
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

Pro navigaci se stále používá <Link>. Pokud ale potřebujete navigovat programově (např. po odeslání formuláře), použijete **hook** useRouter.


// components/MyForm.tsx
'use client'; // Tento hook je na straně klienta

import { useRouter } from 'next/navigation';

export default function MyForm() {
  const router = useRouter();

  const handleSubmit = (e) => {
    e.preventDefault();
    // Po úspěšném odeslání přesměrovat na domovskou stránku
    router.push('/');
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Odeslat a přesměrovat</button>
    </form>
  );
}

Vytvoření základních komponent

Komponenty jsou nezávislé a opakovaně použitelné části UI. Vytvořte si adresář components/ a v něm soubory pro **Header** a **Footer**.


// components/Header.tsx
export default function Header() {
  return (
    <header>
      <h1>Můj eshop</h1>
    </header>
  );
}
    

// components/Footer.tsx
export default function Footer() {
  return (
    <footer>
      <p>© {new Date().getFullYear()} Můj eshop</p>
    </footer>
  );
}

Práce s komponentami – props, children

**Props (properties)** jsou způsob, jakým předáváte data z jedné komponenty do druhé. **Children** je speciální prop, která obsahuje obsah obsažený mezi otevíracím a uzavíracím tagem komponenty.


// components/Card.tsx
export default function Card({ title, content, children }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>{content}</p>
      <div>
        {children}
      </div>
    </div>
  );
}

// Použití na stránce
import Card from '../components/Card';
export default function HomePage() {
  return (
    <Card title="První karta" content="Toto je obsah karty.">
      <p>Toto je children prop.</p>
    </Card>
  );
}

Základní state pomocí React hooks (<code>useState</code>)

**State** je proměnná, která drží stav komponenty. Když se stav změní, React komponentu překreslí. Pro správu stavu použijeme **hook** useState.


// components/Counter.tsx
'use client'; // useState je hook na straně klienta

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Počet: {count}</p>
      <button onClick={() => setCount(count + 1)}>Přičíst</button>
    </div>
  );
}

Použití Tailwind CSS a stylování

Pro rychlé stylování doporučujeme nainstalovat **Tailwind CSS**.


npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Následně přidáte třídy přímo do JSX kódu pro stylování komponent.


// components/Button.tsx
export default function Button({ text }) {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      {text}
    </button>
  );
}

Vynikající! V této lekci jste se naučili, jak tvořit dynamické stránky a opakovaně použitelné komponenty. Znáte základy práce s props a useState, což je klíčové pro interaktivní aplikace.

David Kojecký

David Kojecký

Programátor ve společnosti Codefit a vývojář pro Mobilní lékárna CZ

´