Čo je Next.js? Jednoduchý sprievodca pre tvorcov aplikácií

Next.js je framework na tvorbu webov a webových aplikácií s Reactom. React vám dáva stavebné bloky rozhrania — tlačidlá, formuláre, zoznamy. Next.js k nim pridáva zvyšok webu: stránky a URL, renderovanie stránok na serveri, aby prišli pripravené na čítanie, načítavanie dát a spúšťanie backendového kódu v tom istom projekte. Je open source, vytvorila ho spoločnosť Vercel a patrí medzi najpoužívanejšie spôsoby, ako budovať weby s Reactom.

Prečo je Next.js dôležitý pri tvorbe s AI

Keď AI nástroju opíšete aplikáciu, musí zvoliť technický základ. Táto voľba ovplyvní veci, na ktorých vám neskôr záleží:

• Viditeľnosť vo vyhľadávaní. Verejný web, ktorý sa má umiestniť v Googli, profituje z posielania skutočného HTML, a to Next.js zvláda dobre.
• Kde žije backend. Next.js umožňuje mať stránky frontendu aj serverový kód (napríklad „ulož tento formulár“ alebo „zavolaj platobné API“) v jednom projekte.
• Hosting. Aplikácia Next.js so serverovými funkciami potrebuje server, na ktorom beží, kým aplikácia Vite sa dá podávať ako statické súbory.

Mythex štandardne začína nové projekty na Vite + React + TypeScript + Tailwind a Next.js používa, keď o to požiadate — stačí „Use Next.js“ vo vašom prvom prompte (ako sa vyberá technológia). Preto je dobré vedieť, kedy sa to oplatí žiadať.

Každodenné prirovnanie

Ak je React krabica kvalitných stavebníc Lego, Next.js je súprava Lego s návodmi, podložkou a dielmi pre dvere a rozvody už zabalenými.

Ten istý dom by ste mohli postaviť aj zo sypkých kociek — len by ste sami museli rozhodnúť, ako sa izby spájajú, kde sú vchodové dvere a ako sa privedie voda. Next.js tieto rozhodnutia robí za vás štandardným spôsobom, takže každý projekt Next.js je usporiadaný podobne a nový vývojár (alebo AI) sa v ňom rýchlo zorientuje.

Čo Next.js pridáva k Reactu

Next.js má dva spôsoby organizácie stránok. App Router (priečinok app/) je novší a podporuje Server Components. Pages Router (priečinok pages/) je pôvodný a stále je podporovaný. Nové projekty zvyčajne používajú App Router. Ak vám kód od AI nástroja alebo návod pripadá neznámy, toto je často dôvod.

Ukážkový príklad: verejný adresár miestnych kaviarní

Predstavte si web s výpisom kaviarní vo vašom meste, so stránkou pre každú kaviareň, ktorú chcete zobraziť vo výsledkoch vyhľadávania.

Stránka Next.js pre jednu kaviareň môže vyzerať 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>
  );
}

Čo sa stane, keď niekto (alebo Google) navštívi /cafes/blue-door:

1. Next.js priradí URL k tomuto súboru. Priečinok [slug] znamená „ktorákoľvek kaviareň“.
2. Komponent beží na serveri, prečíta kaviareň z databázy a zostaví HTML.
3. Prehliadač dostane kompletnú stránku s názvom a adresou kaviarne už v nej — bez čakania, kým JavaScript dáta dotiahne.

Pri čistej klientskej React aplikácii by prehliadač najprv dostal takmer prázdnu stránku, potom by stiahol JavaScript, potom by dotiahol kaviareň a až potom by ju zobrazil. Vyhľadávače to často zvládnu, ale kompletná stránka je spoľahlivejšia. Pozri SEO pre weby vytvorené s AI.

Porovnajte to s interným dashboardom za prihlásením: vyhľadávače ho aj tak nevidia, takže renderovanie na serveri prináša menší prínos a jednoduchšia aplikácia Vite je často lepšou voľbou.

Kľúčové pojmy

Bežné chyby a omyly

• „Next.js nahrádza React.“ Nenahrádza. Používa React. Vaše komponenty sú stále komponenty Reactu.
• „Next.js je vždy lepšia voľba.“ Je výkonnejší, ale aj zložitejší na pochopenie. Renderovanie na serveri, cachovanie a rozdiel medzi serverovým a klientskym kódom sú bežným zdrojom mätúcich chýb. Pre aplikáciu, ktorá je väčšinou za prihlásením, je čistá React aplikácia často jednoduchšia.
• „Next.js beží iba na Verceli.“ Je open source a môže bežať na ľubovoľnom serveri s Node.js alebo v kontajneri Docker. Úplný statický export je možný, ak nepoužívate serverové funkcie.
• „Použitie Next.js zaručuje dobré SEO.“ Uľahčuje čítanie stránok. Umiestnenie stále závisí od nadpisov, obsahu, rýchlosti a odkazov.
• „Serverový kód v Next.js je automaticky súkromný.“ Kód určený pre klienta skončí v prehliadači. Tajomstvá musia zostať v kóde dostupnom iba na serveri a v premenných prostredia.

Čo požiadať od nástroja na tvorbu s AI

• „Použi Next.js s App Routerom“ — vo vašom prvom prompte, ak to chcete.
• „Ktoré stránky sa renderujú na serveri, ktoré sú statické a ktoré bežia v prehliadači — a prečo?“
• „Verejné marketingové stránky a stránky s výpismi urob renderované na serveri alebo statické, s riadnymi nadpismi a popismi.“
• „Ukladaj API kľúče v kóde dostupnom iba na serveri a v premenných prostredia. Ukáž mi, kde sa každý z nich číta.“
• „Potrebuje táto aplikácia Next.js, alebo by pre to, čo budujeme, bola jednoduchšia aplikácia Vite + React?“

Next.js v Mythexe

Mythex používa Vite + React + TypeScript + Tailwind štandardne a prepne sa na Next.js, keď to uvediete vo vašom prompte; pomenovanie na začiatku ušetrí kredity v porovnaní so zmenou neskôr. Aplikáciu vidíte v živom náhľade (Preview) a Publish ju nasadí na živú URL bez toho, aby ste si hosting nastavovali sami. Dokumentácia Mythexu upozorňuje, že aplikácie renderované len v klientovi (SPA) majú slabšie SEO než HTML renderované na serveri alebo statické, takže pri marketingovom webe, kde záleží na vyhľadávaní, sa oplatí to povedať hneď na začiatku (SEO pre vašu aplikáciu).

Otázky