Co je Next.js? Srozumitelný průvodce pro tvůrce aplikací

Next.js je framework pro tvorbu webových stránek a webových aplikací s Reactem. React dává stavební bloky rozhraní, jako jsou tlačítka, formuláře a seznamy. Next.js k nim přidává zbytek webu: stránky a URL, vykreslování stránek na serveru, aby dorazily připravené ke čtení, načítání dat a běh backendového kódu ve stejném projektu. Je open source, vytvořila ho firma Vercel a patří mezi nejrozšířenější způsoby, jak stavět weby v Reactu.

Proč je Next.js důležitý při tvorbě s AI

Když AI nástroji popíšete aplikaci, musí zvolit technický základ. Tato volba ovlivní věci, na kterých vám později záleží:

• Viditelnost ve vyhledávání. Veřejný web, který má být v Google vidět, těží z posílání skutečného HTML, a to Next.js zvládá dobře.
• Kde žije backend. Next.js umožňuje, aby frontendové stránky a serverový kód (například „ulož tento formulář“ nebo „zavolej platební API“) byly v jednom projektu.
• Hosting. Next.js aplikace se serverovými funkcemi potřebuje server, na kterém běží, zatímco běžná Vite aplikace se může podávat jako statické soubory.

Mythex zakládá nové projekty ve výchozím nastavení na Vite + React + TypeScript + Tailwind a při žádosti použije Next.js. Stačí, když v prvním promptu napíšete „Použij Next.js“ (jak se volí technologie). Proto je dobré vědět, kdy to stojí za to si vyžádat.

Každodenní příměr

Když je React krabice kvalitních stavebnic Lego, Next.js je stavebnice Lego s hotovými návody, podložkou a díly na dveře a vodovod.

Stejný dům byste mohli postavit z volných kostek. Museli byste ale sami rozhodnout, jak budou místnosti propojeny, kam půjdou vchodové dveře a jak se dostane voda dovnitř. Next.js tato rozhodnutí dělá za vás standardním způsobem, takže každý projekt v Next.js má podobné uspořádání a nový vývojář (nebo AI) se v něm rychle zorientuje.

Co Next.js přidává k Reactu

Next.js má dva způsoby organizace stránek. App Router (složka app/) je novější a podporuje Server Components. Pages Router (složka pages/) je původní a stále podporovaný. Nové projekty obvykle používají App Router. Pokud vám kód od AI nástroje nebo návod připadá neznámý, často je to tím.

Praktický příklad: veřejný adresář místních kaváren

Představte si web s výpisem kaváren ve vašem městě, se stránkou pro každou kavárnu, který chcete mít ve výsledcích vyhledávání.

Stránka Next.js pro jednu kavárnu by mohla vypadat zhruba takto:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

Co se stane, když někdo (nebo Google) navštíví /cafes/blue-door:

1. Next.js přiřadí URL k souboru. Složka [slug] znamená „libovolná kavárna“.
2. Komponenta běží na serveru, načte kavárnu z databáze a sestaví HTML.
3. Prohlížeč dostane kompletní stránku s názvem a adresou kavárny už uvnitř, bez čekání, až JavaScript data stáhne.

U běžné React aplikace na straně klienta by prohlížeč nejprve dostal téměř prázdnou stránku, pak stáhl JavaScript, pak načetl kavárnu a teprve potom ji zobrazil. Vyhledávače to často zvládnou, ale plně připravená stránka je spolehlivější. Viz SEO pro weby vytvořené s AI.

Porovnejte to s interním dashboardem za přihlášením: vyhledávače ho stejně nevidí, takže vykreslování na serveru přináší menší výhodu a jednodušší Vite aplikace bývá lepší volbou.

Klíčové pojmy

Časté omyly

• „Next.js nahrazuje React.“ Nenahrazuje. Používá React. Vaše komponenty jsou stále React komponenty.
• „Next.js je vždy lepší volba.“ Je schopnější, ale také složitější na pochopení. Vykreslování na serveru, cachování a rozdíl mezi serverovým a klientským kódem jsou časté zdroje matoucích chyb. U aplikace, která je většinou za přihlášením, bývá běžná React aplikace jednodušší.
• „Next.js běží jen na Vercelu.“ Je open source a může běžet na libovolném Node.js serveru nebo v kontejneru Docker. Úplný statický export je možný, pokud nepoužíváte serverové funkce.
• „Použití Next.js zaručuje dobré SEO.“ Usnadňuje to čitelné stránky. Pozice ve výsledcích stále závisí na titulcích, obsahu, rychlosti a odkazech.
• „Serverový kód v Next.js je automaticky soukromý.“ Kód určený pro klienta skončí v prohlížeči. Tajné údaje musí zůstat v kódu dostupném jen na serveru a v proměnných prostředí.

Co se zeptat svého AI nástroje

• „Použij Next.js s App Routerem“ — v prvním promptu, pokud to chcete.
• „Které stránky se vykreslují na serveru, které jsou statické a které běží v prohlížeči — a proč?“
• „Udělej veřejné marketingové a výpisové stránky vykreslované na serveru nebo statické, s pořádnými titulky a popisy.“
• „Drž API klíče v kódu dostupném jen na serveru a v proměnných prostředí. Ukaž mi, kde se každý z nich čte.“
• „Potřebuje tato aplikace Next.js, nebo by pro to, co stavíme, stačila jednodušší Vite + React aplikace?“

Next.js v Mythexu

Mythex používá ve výchozím nastavení Vite + React + TypeScript + Tailwind a přepne na Next.js, když to řeknete v promptu. Pojmenovat to hned na začátku šetří kredity oproti pozdější změně. Aplikaci vidíte v živém Náhledu a tlačítko Publikovat ji nasadí na živou URL, aniž byste museli nastavovat hosting sami. Dokumentace Mythexu upozorňuje, že jednostránkové aplikace vykreslované na klientovi mají slabší SEO než HTML vykreslované na serveru nebo statické, takže u marketingového webu, na kterém záleží na vyhledávání, je dobré to říct předem (SEO pro vaši aplikaci).

Otázky