Zpět na kurz

Úvod do Next.js a jeho klíčové vlastnosti

Vítejte v první lekci! Next.js je výkonný React framework, který vám umožní snadno vytvářet moderní webové aplikace. Na rozdíl od klasického Reactu, který se vykresluje pouze na straně klienta (CSR - Client-Side Rendering), Next.js přináší řadu vylepšení. Jedním z hlavních benefitů je SSR (Server-Side Rendering), které umožňuje generovat HTML na serveru pro rychlejší načítání a lepší SEO. Další důležitou funkcí je SSG (Static Site Generation), ideální pro obsah, který se často nemění. Dále nabízí API routes, což usnadňuje tvorbu backendu přímo v rámci vašeho projektu.

Instalace Node.js a balíčkovacího manageru

Než začnete s Next.js, musíte mít na svém počítači nainstalovaný Node.js. Ten obsahuje balíčkovací manager npm, který budeme používat pro instalaci knihoven.

Aktuální verzi Node.js si můžete stáhnout z oficiálního webu.

# Zkontrolujte, zda máte nainstalovaný Node.js a npm
node -v
npm -v
    

Vytvoření nového Next.js projektu

Projekt vytvoříte pomocí příkazu npx create-next-app@latest, který vás provede interaktivním průvodcem.

npx create-next-app@latest
    

Příklad průvodce:

What is your project named? my-next-app
Would you like to use TypeScript? No
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? No
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? No
    

Složková struktura: app/ vs. pages/

Next.js ve verzi 13 a vyšší zavedl nový systém routování s adresářem app/.

Adresář	Popis
app/	Nový a doporučený adresář pro routování. Stránky jsou definovány souborem page.tsx.
pages/	Starší systém routování. Stále podporovaný, ale nedoporučený pro nové projekty.
components/	Pro ukládání opakovaně použitelných React komponent.
public/	Pro statické soubory, jako jsou obrázky, fonty, atd.
styles/	Pro globální CSS a modulové styly.

Spuštění vývojového serveru

Pro spuštění projektu a jeho prohlížení v prohlížeči použijte následující příkaz.

# Nejprve přejděte do složky projektu
cd my-next-app

# Následně spusťte server
npm run dev
    

Váš projekt bude dostupný na adrese http://localhost:3000.

Vytvoření první stránky: app/page.tsx

První stránka se ve výchozím nastavení nachází v souboru app/page.tsx. Otevřete tento soubor a nahraďte výchozí kód za jednoduché "Hello World".

// app/page.tsx
export default function HomePage() {
  return <h1>Hello World</h1>;
}
    

Základní navigace přes komponentu <Link>

Next.js má speciální komponentu <Link> pro navigaci mezi stránkami, která optimalizuje načítání a zabraňuje obnovení stránky.

Nejprve vytvořte novou stránku app/about/page.tsx.

// app/about/page.tsx
export default function AboutPage() {
  return <h1>O nás</h1>;
}
    

Nyní můžete použít <Link> na hlavní stránce app/page.tsx.

// app/page.tsx
import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Hello World</h1>
      <Link href="/about">Přejít na stránku O nás</Link>
    </div>
  );
}
    

Použití globálních stylů: globals.css

V Next.js můžete přidávat globální styly do souboru globals.css, který je umístěn ve složce app/.

Ukázka souboru globals.css:

/* app/globals.css */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding: 20px;
}

h1, h2 {
  color: #333;
}
    

Import globálních stylů je proveden v souboru app/layout.tsx, který obaluje celou vaši aplikaci.

Instalace VS Code + doporučené pluginy

Pro vývoj v Next.js doporučujeme použít editor Visual Studio Code.

Zde je seznam několika užitečných pluginů, které vám usnadní práci:

• Prettier: Pro automatické formátování kódu.
• ESLint: Pro kontrolu syntaxe a dodržování standardů.
• React Snippets: Rychlé generování React komponent.
• Tailwind CSS IntelliSense: Pro automatické doplňování Tailwind tříd.

´