02 — Vytvoření projektu

Výuka

Proč to existuje?

Vytvoření nového projektu "od nuly" je časově náročné — musíš nastavit build nástroje (webpack, babel), konfiguraci TypeScriptu, ESLint, strukturu složek, atd. To může zabrat hodiny nebo dny.

create-next-app je oficiální nástroj, který vyřeší vše za tebe — během 30 sekund máš funkční Next.js aplikaci s optimální konfigurací, připravenou k vývoji.

Jak to funguje?

create-next-app je CLI nástroj (příkazový řádek), který:

1. Vytvoří novou složku s projektem
2. Nainstaluje všechny potřebné závislosti (React, Next.js, atd.)
3. Nastaví konfiguraci (TypeScript, ESLint podle volby)
4. Vytvoří základní strukturu složek (app/, public/, atd.)
5. Přidá příklady stránek, aby projekt fungoval hned po vytvoření

Co potřebuješ:

• Node.js (verze 18.17 nebo vyšší) — běhové prostředí pro JavaScript
• npm nebo pnpm nebo yarn — správce balíčků (instaluje se s Node.js)

K čemu to slouží?

• Rychlý start — projekt je hotový za minutu
• Osvědčená konfigurace — Next.js tým vyladil optimální nastavení
• Bez chyb — nemusíš řešit kompatibilitu verzí nebo chybějící závislosti
• TypeScript ready — přidáš --typescript a máš TypeScript projekt

JavaScript

# Vytvoření projektu (interaktivní - doporučeno)
npx create-next-app@latest

# Nebo s názvem projektu přímo
npx create-next-app@latest my-app

# Přejdi do složky projektu
cd my-app

# Spusť development server
npm run dev
# nebo
pnpm dev
# nebo
yarn dev

Co se stane:

1. Nástroj se zeptá na několik otázek (název, TypeScript?, ESLint?, Tailwind CSS?)
2. Vytvoří složku s projektem
3. Nainstaluje závislosti (může trvat 1-2 minuty)
4. Zobrazí instrukce, jak spustit projekt

Výstup:

✔ What is your project named? … my-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? … No
✔ Would you like to use App Router? … Yes (recommended)
✔ Would you like to customize the default import alias (@/*)? … No

Creating a new Next.js app in /path/to/my-app...

TypeScript

# Vytvoření TypeScript projektu (interaktivní)
npx create-next-app@latest

# Vyber "Yes" na otázku "Would you like to use TypeScript?"

# Nebo přímo s flagy
npx create-next-app@latest my-app --typescript --eslint

# Přejdi do složky a spusť
cd my-app
pnpm dev

Co se přidá v TypeScript projektu:

• tsconfig.json — konfigurace TypeScriptu
• Všechny soubory mají příponu .ts nebo .tsx
• Typy pro Next.js komponenty a API
• Type checking během vývoje

Rozdíl JS vs TS

Hlavní rozdíl je v type safety (typová bezpečnost):

JavaScript:

• Rychlejší start pro začátečníky
• Méně boilerplate kódu
• Chyby se objeví až při běhu aplikace

TypeScript:

• Lepší IntelliSense (nápověda v editoru)
• Chyby se zachytí už při psaní kódu
• Refaktoring je bezpečnější
• Vyžaduje učení syntaxe typů

Doporučení: Pokud jsi začátečník, začni s JavaScriptem. Až budeš mít základy, přejdi na TypeScript.

Po vytvoření projektu

Struktura projektu

my-app/
├── app/                  # Hlavní aplikační složka (App Router)
│   ├── layout.js         # Root layout
│   ├── page.js           # Domovská stránka (/)
│   └── globals.css       # Globální CSS
├── public/               # Statické soubory (obrázky, favicon)
├── node_modules/         # Nainstalované závislosti
├── package.json          # Seznam závislostí a skripty
├── next.config.js        # Konfigurace Next.js
└── README.md             # Dokumentace projektu

Dostupné příkazy

npm run dev       # Spustí development server (http://localhost:3000)
npm run build     # Vytvoří produkční build
npm run start     # Spustí produkční server
npm run lint      # Zkontroluje kód pomocí ESLint

Tip

• Interaktivní režim je nejlepší — npx create-next-app@latest bez dalších parametrů tě provede všemi volbami
• pnpm je rychlejší — pokud chceš ušetřit místo na disku a zrychlit instalaci, používej pnpm místo npm
• ESLint doporučujeme — pomůže ti najít chyby v kódu
• App Router vs Pages Router — vždy vyber App Router (je novější a doporučený)
• První spuštění — po npm run dev otevři prohlížeč na http://localhost:3000

Řešení problémů

# Port 3000 je obsazený?
npm run dev -- -p 3001

# Chyba při instalaci?
rm -rf node_modules package-lock.json
npm install

# Node.js verze je stará?
node --version  # Musí být 18.17 nebo vyšší