Šta je Next.js? Vodič za graditelje aplikacija, jednostavnim jezikom

Next.js je framework za pravljenje web sajtova i web aplikacija pomoću Reacta. React daje gradivne elemente interfejsa — dugmad, obrasce, liste. Next.js dodaje ostatak web stranice oko njih: stranice i URL-ove, renderovanje stranica na serveru da stignu spremne za čitanje, učitavanje podataka i pokretanje backend koda u istom projektu. Open source je, pravi ga kompanija Vercel i jedan je od najčešće korištenih načina za pravljenje React sajtova.

Zašto je Next.js važan kada gradite uz AI

Kada opišete aplikaciju AI graditelju, on mora odabrati tehnički temelj. Taj izbor utiče na stvari koje vam kasnije važe:

• Vidljivost na pretrazi. Javni sajt koji treba da se rangira na Googleu ima koristi od slanja pravog HTML-a, što Next.js dobro radi.
• Gdje živi backend. Next.js omogućava da stranice i serverski kod (poput „sačuvaj ovaj obrazac” ili „pozovi API za plaćanje”) žive u jednom projektu.
• Hosting. Next.js aplikacija sa serverskim funkcijama treba server na kojem radi, dok se obična Vite aplikacija može servirati kao statički fajlovi.

Mythex počinje nove projekte s Vite + React + TypeScript + Tailwind kao podrazumijevanim izborom, a koristi Next.js kada to zatražite — dovoljno je da u prvom upitu napišete „Koristi Next.js” (kako se bira tehnologija). Zato je korisno znati kada se to isplati tražiti.

Svakodnevna analogija

Ako je React kutija kvalitetnih Lego kockica, Next.js je Lego set s uputstvom, osnovnom pločom i gotovim dijelovima za vrata i vodovod.

Mogli biste sagraditi istu kuću od pojedinačnih kockica — samo biste sami morali odlučiti kako se sobe povezuju, gdje su ulazna vrata i kako voda dolazi. Next.js te odluke donosi na standardan način, pa je svaki Next.js projekat organizovan slično i novi programer (ili AI) brzo nađe put.

Šta Next.js dodaje Reactu

Next.js organizuje stranice na dva načina. App Router (folder app/) je noviji i podržava Server Components. Pages Router (folder pages/) je originalni i i dalje je podržan. Novi projekti uglavnom koriste App Router. Ako vam kod vašeg AI graditelja ili neki tutorijal djeluje nepoznato, to je često razlog.

Primjer: javni direktorij lokalnih kafića

Zamislite sajt koji navodi kafiće u vašem gradu, sa stranicom za svaki kafić, koji želite da se pojavi u rezultatima pretrage.

Next.js stranica za jedan kafić može izgledati otprilike ovako:

// 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>
  );
}

Šta se dešava kada neko (ili Google) posjeti /cafes/blue-door:

1. Next.js URL poklapa s tim fajlom. Folder [slug] znači „bilo koji kafić”.
2. Komponenta se izvršava na serveru, čita kafić iz baze podataka i gradi HTML.
3. Pretraživač dobija kompletnu stranicu s već upisanim imenom i adresom kafića — bez čekanja da JavaScript dohvati podatke.

S običnom React aplikacijom na klijentu, pretraživač bi prvo dobio gotovo praznu stranicu, zatim preuzeo JavaScript, zatim dohvatio kafić, pa ga tek prikazao. Tražilice to često mogu da obrade, ali potpuno formirana stranica je pouzdanija. Pogledajte SEO za web sajtove izrađene uz AI.

Uporedite to s kontrolnom tablom za zaposlene iza prijave: tražilice je ionako ne mogu vidjeti, pa renderovanje na serveru donosi manje koristi, a jednostavnija Vite aplikacija je često bolji izbor.

Ključni pojmovi

Česte zablude

• „Next.js zamjenjuje React.” Ne zamjenjuje. Koristi React. Vaše komponente su i dalje React komponente.
• „Next.js je uvijek bolji izbor.” Mogućniji je, ali ga je i više razumjeti. Renderovanje na serveru, keširanje i razlika između serverskog i klijentskog koda česti su izvori zbunjujućih grešaka. Za aplikaciju koja je uglavnom iza prijave, obična React aplikacija je često jednostavnija.
• „Next.js radi samo na Verceleu.” Open source je i može raditi na bilo kom Node.js serveru ili u Docker kontejneru. Potpuni statički eksport je moguć ako ne koristite serverske funkcije.
• „Korištenje Next.js-a garantuje dobar SEO.” Olakšava čitljive stranice. Rangiranje i dalje zavisi od naslova, sadržaja, brzine i linkova.
• „Serverski kod u Next.js-u je automatski privatan.” Kod označen za klijenta završi u pretraživaču. Tajne moraju ostati u kodu koji radi samo na serveru i u varijablama okruženja.

Šta pitati AI graditelja

• „Koristi Next.js s App Routerom” — u prvom upitu, ako to želite.
• „Koje stranice se renderuju na serveru, koje su statične, a koje rade u pretraživaču — i zašto?”
• „Javne marketinške stranice i stranice s listama neka budu renderovane na serveru ili statične, s pravilnim naslovima i opisima.”
• „Čuvaj API ključeve u kodu koji radi samo na serveru i u varijablama okruženja. Pokaži mi gdje se svaki čita.”
• „Treba li ovoj aplikaciji Next.js, ili bi za ono što gradimo bila jednostavnija Vite + React aplikacija?”

Next.js u Mythexu

Mythex koristi Vite + React + TypeScript + Tailwind kao podrazumijevano i prelazi na Next.js kada to zatražite u upitu; navođenje toga na početku štedi kredite u odnosu na naknadnu promjenu. Aplikaciju vidite u živom Preview-u, a Publish je objavljuje na živi URL bez postavljanja hostinga sami. Dokumentacija Mythexa napominje da klijentski renderovane aplikacije na jednoj stranici imaju slabiji SEO od HTML-a renderovanog na serveru ili statičnog HTML-a, pa je za marketinški sajt na kojem je pretraga važna korisno to reći unaprijed (SEO za vašu aplikaciju).

Pitanja