Next.js Learning Guide

1. Základní přehled: Co je Next.js?

Next.js je framework pro React, který přidává funkce, které React sám nemá:

• Renderovací metody (SSG, SSR, ISR, CSR).
• Routing založený na souborech (už nemusíš používat react-router).
• API routes (psaní backend kódu přímo v Next.js).
• Optimalizace – obrázky, kód, a další věci.

Začít je dobré pochopením jednotlivých renderovacích metod a jejich praktického využití.

2. Renderovací metody: Jak si v tom udělat pořádek

Static Site Generation (SSG)

Používáš, když data nejsou často měněná (např. blog, produktová stránka).

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return {
    props: { posts },
  };
}

Server-Side Rendering (SSR)

Používáš, když data musí být aktuální (např. personalizace, dashboard).

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/user/${context.params.id}`);
  const user = await res.json();
  return {
    props: { user },
  };
}

Client-Side Rendering (CSR)

Používáš, když data nemusí být dostupná ihned a můžou se načítat asynchronně.

import { useEffect, useState } from 'react';

function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return <div>{data ? data.message : 'Načítám...'}</div>;
}

Incremental Static Regeneration (ISR)

Používáš, když chceš aktualizovat statickou stránku po nějakém čase.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();
  return {
    props: { products },
    revalidate: 600, // aktualizace každých 10 minut
  };
}

3. Jak si vybrat renderovací metodu

Podívej se na tento přehled:

• SSG: Když nepotřebuješ čerstvá data při každém načtení. Použij pro blogy, statické stránky, landing pages.
• SSR: Když chceš čerstvá data (např. uživatelské dashboardy, personalizace).
• CSR: Když se většina věcí odehrává v klientovi (např. chatovací aplikace, dashboardy).
• ISR: Když chceš mít statickou stránku, ale občas ji aktualizovat (např. e-shopové produkty).

4. Použití "use client"

Direktiva "use client" je důležitá pro komponenty, které potřebují klientský render. Například při použití:

• useState, useEffect, nebo jiných React hooků.
• Animačních knihoven jako GSAP nebo Framer Motion.

// Příklad struktury souboru
// pages/index.js
import Hero from '../components/Hero';

export default function HomePage() {
  return <Hero />;
}

// components/Hero.js
'use client';
import { useState } from 'react';
import { motion } from 'framer-motion';

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

  return (
    <div>
      <motion.h1 animate={{ scale: 1.2 }}>Welcome!</motion.h1>
      <button onClick={() => setCount(count + 1)}>Click me {count}</button>
    </div>
  );
}