Šta je Next.js? Jednostavan vodič za graditelje aplikacija

Next.js je okvir za pravljenje sajtova i veb aplikacija pomoću Reacta. React vam daje gradivne blokove interfejsa, poput dugmadi, obrazaca i lista. Next.js dodaje ostatak sajta oko njih: stranice i adrese, prikazivanje stranica na serveru da stignu spremne za čitanje, učitavanje podataka i pokretanje backend koda u istom projektu. Otvorenog je koda, pravi ga kompanija Vercel, i jedan je od najšire korišćenih načina za pravljenje React sajtova.

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

Kada AI alatu opišete aplikaciju, on mora da izabere tehnički temelj. Taj izbor utiče na stvari koje će vam kasnije biti važne:

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

Mythex nove projekte podrazumevano pokreće na Vite + React + TypeScript + Tailwind, a koristi Next.js kada to zatražite. Dovoljno je da u prvom zahtevu napišete „Koristi Next.js“ (kako se bira tehnologija). Zato vredi znati kada se to isplati tražiti.

Svakodnevna analogija

Ako je React kutija kvalitetnih Lego kockica, Next.js je Lego set sa uputstvom, podlogom i delovima za vrata i vodovod već uključenim.

Mogli biste da sagradite istu kuću od pojedinačnih kockica, samo biste sami morali da odlučite kako se sobe povezuju, gde su ulazna vrata i kako ulazi voda. Next.js te odluke donosi na standardan način, pa je svaki Next.js projekat organizovan slično i novi programer (ili AI) brzo može da se snađe.

Šta Next.js dodaje Reactu

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

Radni primer: javni direktorijum lokalnih kafića

Zamislite sajt sa spiskom kafića u vašem gradu, sa stranicom za svaki kafić, koji želite da se pojavljuje u rezultatima pretrage.

Next.js stranica za jedan kafić može otprilike da izgleda 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) otvori /cafes/blue-door:

1. Next.js URL povezuje sa tim fajlom. Fascikla [slug] znači „bilo koji kafić“.
2. Komponenta se izvršava na serveru, čita kafić iz baze podataka i pravi HTML.
3. Pregledač dobija kompletnu stranicu sa nazivom i adresom kafića već u njoj, bez čekanja da JavaScript dohvati podatke.

Uporedite to sa običnom React aplikacijom na klijentu: pregledač bi prvo dobio skoro praznu stranicu, zatim bi preuzeo JavaScript, pa dohvatio kafić, pa ga prikazao. Pretraživači to često mogu da obrade, ali potpuno formirana stranica je pouzdanija. Pogledajte SEO za sajtove napravljene uz AI.

Uporedite sa internom kontrolnom tablom iza prijave: pretraživači je ionako ne vide, pa prikaz na serveru donosi manje koristi, a jednostavnija Vite aplikacija je često bolji izbor.

Ključni pojmovi

Česte zablude

• „Next.js zamenjuje React.“ Ne. Koristi React. Vaše komponente su i dalje React komponente.
• „Next.js je uvek bolji izbor.“ Moćniji je, ali ga je i više za razumeti. Prikaz 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 Vercel-u.“ Otvoren je i može da radi na bilo kom Node.js serveru ili u Docker kontejneru. Potpuno statički izvoz je moguć ako ne koristite serverske funkcije.
• „Korišćenje Next.js-a garantuje dobar SEO.“ Čini čitljive stranice lakšim za pretragu. Rangiranje i dalje zavisi od naslova, sadržaja, brzine i linkova.
• „Serverski kod u Next.js-u je automatski privatan.“ Kod namenjen klijentu završava u pregledaču. Tajne moraju da ostanu u kodu koji radi samo na serveru i u promenljivim okruženja.

Šta tražiti od AI alata za aplikacije

• „Koristi Next.js sa App Router-om“ — u prvom zahtevu, ako to želite.
• „Koje stranice se prikazuju na serveru, koje su statične, a koje se izvršavaju u pregledaču, i zašto?“
• „Javne marketinške i direktorijumske stranice neka budu prikazane na serveru ili statične, sa pravim naslovima i opisima.“
• „Drži API ključeve u kodu koji radi samo na serveru i u promenljivim okruženja. Pokaži mi gde se svaki od njih čita.“
• „Da li je ovoj aplikaciji potreban Next.js, ili bi za ono što pravimo bila jednostavnija Vite + React aplikacija?“

Next.js u Mythex-u

Mythex koristi Vite + React + TypeScript + Tailwind podrazumevano i prebacuje se na Next.js kada to zatražite u prompt-u; ako to navedete rano, uštedećete kredite u poređenju sa promenom kasnije. Aplikaciju vidite u živom Preview-u, a Publish je objavljuje na živom URL-u bez vašeg podešavanja hostinga. Dokumentacija Mythex-a napominje da klijentski renderovane jednostranične aplikacije imaju slabiji SEO od HTML-a koji se prikazuje na serveru ili je statičan, pa ako su vam pretrage važne za marketinški sajt, vredi to reći unapred (SEO za vašu aplikaciju).

Pitanja