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

Next.js je framework za izradu web stranica i web aplikacija s Reactom. React daje gradivne blokove sučelja, poput gumba, obrazaca i popisa. Next.js dodaje ostatak web stranice oko njih: stranice i URL-ove, renderiranje stranica na serveru da stignu spremne za čitanje, dohvat podataka i pokretanje backend koda u istom projektu. Otvorenog je koda, izradila ga je tvrtka Vercel i jedan je od najčešće korištenih načina izrade React stranica.

Zašto je Next.js važan kad gradite s AI-jem

Kad AI alatu opišete aplikaciju, on mora odabrati tehničku osnovu. Taj izbor utječe na stvari koje vas kasnije zanimaju:

• Vidljivost u pretraživanju. Javna stranica koja mora biti rangirana na Googleu ima koristi od slanja pravog HTML-a, što Next.js dobro radi.
• Gdje živi backend. Next.js omogućuje da stranice i serverski kod (poput „spremi ovaj obrazac” ili „pozovi API za plaćanje”) žive u jednom projektu.
• Hosting. Next.js aplikacija sa serverskim značajkama treba server na kojem radi, dok se običnoj Vite aplikaciji može poslužiti kao statične datoteke.

Mythex za nove projekte u pravilu koristi Vite + React + TypeScript + Tailwind, a Next.js koristi kad to tražite. Dovoljno je napisati „Koristi Next.js” u prvom upitu (kako se bira tehnologija). Zato je korisno znati kad se to isplati tražiti.

Svakodnevna analogija

Ako je React kutija kvalitetnih Lego kockica, Next.js je Lego set s uputama, podlogom i dijelovima za vrata i vodovod već uključenima.

Mogli biste izgraditi 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 unutra. Next.js te odluke donosi umjesto vas na standardan način, pa je svaki Next.js projekt uređen slično i novi programer (ili AI) brzo se snalazi.

Što Next.js dodaje Reactu

Next.js ima dva načina organiziranja stranica. App Router (mapa app/) je noviji i podržava Server Components. Pages Router (mapa pages/) je izvorni i još je podržan. Novi projekti uglavnom koriste App Router. Ako vam kod AI alata ili vodič izgleda nepoznato, to je često razlog.

Radni primjer: javni imenik lokalnih kafića

Zamislite stranicu s popisom kafića u vašem gradu, s posebnom stranicom za svaki kafić, koju želite da se pojavi u rezultatima pretraživanja.

Next.js stranica za jedan kafić mogla bi 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>
  );
}

Što se događa kad netko (ili Google) posjeti /cafes/blue-door:

1. Next.js URL povezuje s tom datotekom. Mapa [slug] znači „bilo koji kafić”.
2. Komponenta se izvršava na serveru, čita kafić iz baze podataka i gradi HTML.
3. Preglednik dobiva potpuno oblikovanu stranicu s već upisanim imenom i adresom kafića, bez čekanja da JavaScript dohvati podatke.

S običnom React aplikacijom na klijentu preglednik bi prvo dobio gotovo praznu stranicu, zatim skinuo JavaScript, zatim dohvatio kafić i tek onda ga prikazao. Tražilice to često mogu obraditi, ali potpuno oblikovana stranica je pouzdanija. Pogledajte SEO za web stranice izrađene s AI-jem.

Usporedite to sa stranicom za osoblje iza prijave: tražilice je ionako ne vide, pa renderiranje na serveru donosi manje koristi, a jednostavnija Vite aplikacija često je bolji izbor.

Ključni pojmovi

Česte zablude

• „Next.js zamjenjuje React.” Ne. Koristi React. Vaše komponente su i dalje React komponente.
• „Next.js je uvijek bolji izbor.” Mogućnosti su veće, ali ima i više za razumjeti. Renderiranje na serveru, predmemoriranje i razlika između serverskog i klijentskog koda česti su izvori zbunjujućih grešaka. Za aplikaciju koja je uglavnom iza prijave, običan React projekt je često jednostavniji.
• „Next.js radi samo na Verceleu.” Otvorenog je koda i može raditi na bilo kojem Node.js serveru ili u Docker kontejneru. Potpuno statični izvoz moguć je ako ne koristite serverske značajke.
• „Korištenje Next.js-a jamči dobar SEO.” Čini čitljive stranice lakšima za čitanje. Pozicije u rezultatima i dalje ovise o naslovima, sadržaju, brzini i poveznicama.
• „Serverski kod u Next.js-u je automatski privatan.” Kod označen za klijenta završava u pregledniku. Tajne moraju ostati u kodu koji se izvršava samo na serveru i u varijablama okruženja.

Što tražiti od AI alata za izradu

• „Koristi Next.js s App Routerom”, u prvom upitu, ako to želite.
• „Koje se stranice renderiraju na serveru, koje su statične, a koje se izvršavaju u pregledniku, i zašto?”
• „Neka javne marketing i stranice s popisima budu renderirane na serveru ili statične, s pravilnim naslovima i opisima.”
• „Drži API ključeve u kodu koji se izvršava samo na serveru i u varijablama okruženja. Pokaži mi gdje se svaki čita.”
• „Treba li ova aplikacija Next.js, ili bi za ono što gradimo bila jednostavnija Vite + React aplikacija?”

Next.js u Mythexu

Mythex koristi Vite + React + TypeScript + Tailwind kao zadano, a prelazi na Next.js kad to zatražite u upitu. Ako to navedete odmah, štedite kredite u odnosu na kasnije mijenjanje. Aplikaciju vidite u živom Pregledu, a Publish je objavljuje na živom URL-u bez vas koji biste sami postavljali hosting. Dokumentacija Mythexa navodi da client-rendered jednostranične aplikacije imaju slabiji SEO od stranica renderiranih na serveru ili statičnih stranica, pa ako je pretraživost važna za marketing stranicu, vrijedi to reći unaprijed (SEO za vašu aplikaciju).

Pitanja