03 — Struktura projektu (app/)
Výuka
Proč to existuje?
V Next.js je hlavní adresář app/ místem, kde vytváříš strukturu své aplikace. Místo ručního psaní konfigurace routů (jako v mnoha jiných frameworcích) Next.js automaticky vytváří cesty podle toho, jak jsou složky uspořádané. To zjednodušuje vývoj a udržuje kód přehledný.
Co je "mapování složek na URL"?
Mapování znamená přímou vazbu mezi strukturou složek a adresami v prohlížeči:
- Složka
app/blog/→ vytvoří URL cestu/blog - Složka
app/blog/novinky/→ vytvoří URL cestu/blog/novinky
Představ si to jako organizaci souborů na disku: když máš složku "Dokumenty/Škola/Matematika", cesta k ní odpovídá struktuře. V Next.js je to stejné, jen místo souborů organizuješ stránky webu.
Jak to funguje?
Next.js sleduje adresář app/ a používá speciální soubory, které mají konkrétní význam:
Základní soubory:
page.js/page.tsx— komponenta, která se zobrazí na dané URL (obsah stránky)layout.js/layout.tsx— obal pro všechny stránky v dané složce a podsložkách (např. společný header/footer)
Další užitečné soubory:
loading.js— co se zobrazí, když se stránka načítánot-found.js— vlastní 404 stránka pro tuto sekciroute.js— server API endpoint (pro backend logiku)error.js— vlastní chybová stránka
Speciální konvence:
- Root layout (
app/layout.js) je povinný a musí obsahovatatagy - Složky v kulatých závorkách
(název)slouží k organizaci kódu bez vlivu na URL
K čemu to slouží?
- Přehledná organizace — víš přesně, kde najít kód pro každou stránku
- Rychlejší vývoj — nepotřebuješ psát konfiguraci
- Sdílené layouty — header a footer napíšeš jednou a platí pro celou sekci
- Lepší spolupráce — celý tým chápe strukturu projektu na první pohled
Příklad struktury projektu
Zde je typická struktura Next.js projektu s App Routerem:
app/
├─ layout.js # root layout (obsahuje <html> a <body>)
├─ page.js # / (domovská stránka)
├─ about/
│ └─ page.js # /about (stránka O nás)
├─ blog/
│ ├─ layout.js # layout pro blog sekci (např. se sidebar)
│ ├─ page.js # /blog (seznam článků)
│ └─ [slug]/
│ └─ page.js # /blog/nazev-clanku (dynamická stránka)
└─ (admin)/ # skupina pro organizaci (nemá vliv na URL)
├─ layout.js # speciální layout pro admin sekci
└─ dashboard/
└─ page.js # /dashboard (ne /admin/dashboard!)
Jak se to mapuje na URL:
app/page.js→/(domovská stránka)app/about/page.js→/aboutapp/blog/page.js→/blogapp/blog/[slug]/page.js→/blog/prvni-clanek,/blog/druhy-clanekatd.app/(admin)/dashboard/page.js→/dashboard(závorky se ignorují)
JavaScript
// app/page.js
export default function Home(){ return <h1>Domov</h1> }
TypeScript
// app/page.tsx
export default function Home(): JSX.Element{ return <h1>Domov</h1> }
Rozdíl JS vs TS
Typy v TS pomáhají při refaktoringu, ale struktura složek je stejná.
Tip
- Skupiny
(name)slouží k organizaci bez vlivu na URL. - Začni s jednoduchou strukturou (root layout + několik pages) a přidávej vnořené layouty postupně, jak aplikace roste.
Kvíz
Co znamená "mapování složek na URL" v Next.js?
V Next.js je struktura složek v adresáři app/ přímo propojená s URL strukturou. Například složka app/blog/ automaticky vytvoří cestu /blog, bez nutnosti psát konfiguraci. Toto se nazývá "file-based routing" a je to jeden z hlavních benefitů Next.js.
🎯 Závěrečný projekt
Po dokončení všech 8 dílů vytvoříte jednoduchou Todо aplikaci v čistém JavaScriptu. Naučíte se, jak aplikovat vše, co jste se naučili, na reálný projekt.
Zobrazit podrobnosti projektu →Informace o seriálu
Obtížnost
Délka
Cca 480 minut
Počet videí
8 videí + projekty
Certifikát
Po dokončení obdržíte certifikát
Lekce v této sekci
- 01 — Co je Next.js
- 02 — Vytvoření projektu
- 03 — Struktura projektu (app/)
- 04 — Page komponenty (page.js / page.tsx)
- 05 — Layout komponenty (layout.js / layout.tsx)
- 06 — File-based routing
- 07 — Dynamické routy ([id]/page.js)
- 08 — Link komponenta (navigace)
- 09 — Image komponenta (next/image)
- 10 — Metadata (title, description, Open Graph)
- 11 — Loading UI (loading.js / loading.tsx)
- 12 — Error handling (error.js / error.tsx)
- 13 — Not Found (not-found.js / not-found.tsx)
Struktura lekcí (souborový strom)
- 1.1 Úvod do JavaScriptu a TypeScriptu
- 1.2 Nastavení prostředí
- 1.3 První program
- 1.4 Proměnné: var, let, const
- 1.5 Datové typy - přehled
- 1.6 String (řetězce)
- 1.7 Number (čísla)
- 1.8 Boolean (pravda/nepravda)
- 1.9 Null a Undefined
- 1.10 Type Inference vs Annotations
- 1.11 Aritmetické operátory
- 1.12 Porovnávací operátory
- 1.13 Logické operátory
- 1.14 Komentáře
- 1.15 Console metody
- 03.01 Deklarace funkce
- 03.02 Function Expression
- 03.03 Arrow Functions
- 03.04 Parametry a argumenty
- 03.05 Return hodnoty
- 03.06 Výchozí parametry
- 03.07 Rest parametry
- 03.08 Co je Scope
- 03.09 Lexikální Scope
- 03.10 Řetězec Scope
- 03.11 Globální Scope
- 03.12 Životní Cyklus Proměnných
- 03.13 Omezení Scope
- 03.14 Použití Closures
- 03.15 Callback funkce
- 03.16 Higher-order Functions
- 03.17 IIFE
- 03.18 Void funkce
- 03.19 Rekurze
- v přípravě
- v přípravě
- v přípravě
- v přípravě
- 01 — Co je Next.js
- 02 — Vytvoření projektu
- 03 — Struktura projektu (app/)
- 04 — Page komponenty (page.js / page.tsx)
- 05 — Layout komponenty (layout.js / layout.tsx)
- 06 — File-based routing
- 07 — Dynamické routy ([id]/page.js)
- 08 — Link komponenta (navigace)
- 09 — Image komponenta (next/image)
- 10 — Metadata (title, description, Open Graph)
- 11 — Loading UI (loading.js / loading.tsx)
- 12 — Error handling (error.js / error.tsx)
- 13 — Not Found (not-found.js / not-found.tsx)
- v přípravě
- v přípravě
- v přípravě