Kaj je Next.js? Preprost vodnik za graditelje aplikacij

Next.js je ogrodje za gradnjo spletnih mest in spletnih aplikacij z Reactom. React vam da gradnike vmesnika — gumbe, obrazce, sezname. Next.js okoli njih doda ostalo spletno mesto: strani in URL-je, prikazovanje strani na strežniku, da prispejo pripravljene za branje, nalaganje podatkov ter izvajanje kode zaledja v istem projektu. Je odprtokoden, izdelal ga je podjetje Vercel in je eden najbolj uporabljanih načinov za gradnjo spletnih mest z Reactom.

Zakaj je Next.js pomemben pri gradnji z AI

Ko AI graditelju opišete aplikacijo, mora izbrati tehnično osnovo. Ta izbira vpliva na stvari, ki vam bodo kasneje pomembne:

• Vidnost v iskalnikih. Javno spletno mesto, ki se mora uvrstiti na Googlu, ima korist od pošiljanja pravega HTML-ja, kar Next.js dobro počne.
• Kje živi zaledje. Next.js omogoča, da strani za sprednji del in kodo strežnika (na primer »shrani ta obrazec« ali »pokliči API za plačila«) hranite v enem projektu.
• Gostovanje. Aplikacija Next.js s funkcijami na strežniku potrebuje strežnik, na katerem teče, medtem ko se navadna aplikacija Vite lahko postreže kot statične datoteke.

Mythex nove projekte privzeto začne na Vite + React + TypeScript + Tailwind, Next.js pa uporabi, kadar to zahtevate — zadostuje, da v prvi poziv napišete »Use Next.js« (kako se izbere tehnologija). Zato je koristno vedeti, kdaj se to splača zahtevati.

Vsakdanja primerjava

Če je React škatla visokokakovostnih kock Lego, je Next.js set Lego z navodili, osnovno podlago in deli za vrata in vodovod, ki so že vključeni.

Isto hišo bi lahko zgradili iz posameznih kock — samo sami bi morali odločiti, kako se sobe povezujejo, kje so vhodna vrata in kako pride voda noter. Next.js te odločitve sprejme za vas na standarden način, zato je vsak projekt Next.js razporejen podobno in se novi razvijalec (ali AI) hitro znajde.

Kaj Next.js doda Reactu

Next.js ima dva načina za organizacijo strani. App Router (mapa app/) je novejši in podpira komponente strežnika. Pages Router (mapa pages/) je izvirni in še vedno podprt. Novi projekti običajno uporabljajo App Router. Če vam je koda vašega graditelja z AI ali navodilo videti nenavadno, je to pogosto razlog.

Praktičen primer: javni imenik lokalnih kavarn

Predstavljajte si spletno mesto, ki navaja kavarne v vašem mestu, z eno stranjo za vsako kavarno, ki se želi pojaviti v iskalnih rezultatih.

Stran Next.js za eno kavarno bi bila približno taka:

// app/kavarne/[slug]/page.tsx  →  /kavarne/modra-vrata, /kavarne/hribcek ...
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>
  );
}

Kaj se zgodi, ko nekdo (ali Google) obišče /kavarne/modra-vrata:

1. Next.js URL ujame z ustrezno datoteko. Mapa [slug] pomeni »katerakoli kavarna«.
2. Komponenta teče na strežniku, prebere kavarno iz baze podatkov in zgradi HTML.
3. Brskalnik prejme popolno stran z že vpisanim imenom in naslovom kavarne — ni treba čakati, da JavaScript pridobi podatke.

Pri navadni odjemalski aplikaciji React bi brskalnik najprej dobil skoraj prazno stran, nato naložil JavaScript, nato pridobil kavarno in jo nato prikazal. Iskalniki to pogosto zmorejo, vendar je popolnoma oblikovana stran zanesljivejša. Glejte SEO za spletna mesta, zgrajena z AI.

Primerjajte to z notranjo nadzorno ploščo za zaposlene za prijavo: iskalniki je tako ali tako ne vidijo, zato prikazovanje na strežniku prinese manj koristi, enostavnejša aplikacija Vite pa je pogosto boljša izbira.

Ključni pojmi

Pogoste zmote

• »Next.js nadomešča React.« Ne. Uporablja React. Vaše komponente so še vedno komponente React.
• »Next.js je vedno boljša izbira.« Zmogljivejši je, vendar ga je tudi več za razumeti. Prikazovanje na strežniku, predpomnjenje in razlika med kodo strežnika in odjemalca so pogosti viri zmedenih napak. Za aplikacijo, ki je večinoma za prijavo, je navadna aplikacija React pogosto enostavnejša.
• »Strežniška koda v Next.js-u je samodejno zasebna.« Koda, označena za odjemalca, konča v brskalniku. Skrivnosti morajo ostati v kodi, ki teče samo na strežniku, in v okoljskih spremenljivkah.
• »Uporaba Next.js-a zagotavlja dober SEO.« Olajša branje strani. Uvrstitve so še vedno odvisne od naslovov, vsebine, hitrosti in povezav.
• »Next.js se izvaja samo na Vercelu.« Je odprtokoden in lahko teče na katerem koli strežniku Node.js ali v vsebniku Docker. Popolnoma statični izvoz je možen, če ne uporabljate funkcij strežnika.

Kaj vprašati svojega graditelja z AI

• »Uporabi Next.js z App Routerjem« — v prvem pozivu, če tako želite.
• »Katere strani se prikazujejo na strežniku, katere so statične in katere tečejo v brskalniku — in zakaj?«
• »Naredi javne tržne in seznamske strani prikazane na strežniku ali statične, z ustreznimi naslovi in opisi.«
• »Ključe API hrani v kodi, ki teče samo na strežniku, in v okoljskih spremenljivkah. Pokaži mi, kje se vsak od njih bere.«
• »Ali ta aplikacija potrebuje Next.js ali bi bila za to, kar gradimo, enostavnejša aplikacija Vite + React?«

Next.js v Mythexu

Mythex privzeto uporablja Vite + React + TypeScript + Tailwind in preklopi na Next.js, ko to zahtevate v pozivu; če ga omenite zgodaj, prihranite kredite v primerjavi s kasnejšo spremembo. Aplikacijo vidite v živem predogledu, gumb Publish pa jo objavi na živem URL-ju, ne da bi morali sami nastavljati gostovanje. Dokumentacija Mythexa opozarja, da imajo aplikacije z odjemalskim prikazom (SPA) šibkejši SEO kot strani, prikazane na strežniku ali statične strani, zato je za tržno spletno mesto, kjer je iskanje pomembno, dobro to povedati takoj na začetku (SEO za vašo aplikacijo).

Vprašanja