Mis on Next.js? Lihtne juhend rakenduste ehitajatele

Next.js on raamistik veebisaitide ja veebirakenduste ehitamiseks Reactiga. React annab kasutajaliidese ehitusplokid — nupud, vormid, loendid. Next.js lisab nende ümber ülejäänud veebisaidi: lehed ja URL-id, lehtede renderdamise serveris, et need saabuksid valmis lugemiseks, andmete laadimise ning tagaosa koodi käitamise samas projektis. See on avatud lähtekoodiga, selle on loonud ettevõte Vercel ning see on üks enim kasutatud viise React-saitide ehitamiseks.

Miks Next.js AI-ga ehitamisel oluline on

Kui kirjeldad rakendust AI ehitajale, peab see valima tehnilise aluse. See valik mõjutab hilisemaid asju, millest hoolid:

• Nähtavus otsingus. Avalik sait, mis peab Google’is edetabelis olema, saab kasu päris HTML-i saatmisest, mida Next.js teeb hästi.
• Kus tagaosa elab. Next.js laseb esilehtedel ja serveri koodil (näiteks „salvesta see vorm“ või „kutsu makse-API“) elada ühes projektis.
• Hosting. Serveri funktsioonidega Next.js rakendus vajab serverit, kus töötada, samas kui lihtne Vite rakendus saab serveerida staatilisi faile.

Mythex alustab uusi projekte vaikimisi Vite + React + TypeScript + Tailwind’iga ning kasutab Next.js’i, kui seda palud — esimeses päringus piisab sõnast „Use Next.js“ (kuidas tehnoloogia valitakse). Seega aitab teada, millal seda tasub küsida.

Igapäevane analoogia

Kui React on kõrgekvaliteetsete Lego klotside karp, siis Next.js on Lego komplekt, kus juhend, alusplaat ning uste ja torustiku osad on juba kaasas.

Sama maja saaks ehitada lahtistest klotsidest — peaksid lihtsalt ise otsustama, kuidas ruumid ühenduvad, kuhu läheb esiuks ja kuidas vesi sisse tuleb. Next.js teeb need otsused sinu eest standardsel viisil, nii et iga Next.js projekt on sarnaselt üles ehitatud ning uus arendaja (või AI) leiab kiiresti tee.

Mida Next.js Reactile lisab

Next.js’il on kaks viisi lehtede korraldamiseks. App Router (kaust app/) on uuem ja toetab serverikomponente. Pages Router (kaust pages/) on algne ja on endiselt toetatud. Uued projektid kasutavad üldiselt App Routerit. Kui su AI ehitaja kood või õpetus tundub võõras, on see sageli põhjus.

Töötav näide: avalik kohvikute kataloog

Kujuta ette saiti, mis loetleb sinu linna kohvikuid, kus igal kohvikul on oma leht, ja mida tahad näha otsingutulemustes.

Next.js leht ühe kohviku jaoks võib välja näha umbes selline:

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

Mis juhtub, kui keegi (või Google) külastab /cafes/blue-door:

1. Next.js sobitab URL-i selle failiga. Kaust [slug] tähendab „mis tahes kohvik“.
2. Komponent käivitub serveris, loeb kohviku andmebaasist ja ehitab HTML-i.
3. Brauser saab täieliku lehe, kus on kohviku nimi ja aadress juba sees — ei mingit ootamist, et JavaScript andmeid tooks.

Tavalise kliendipoolse React-rakendusega saaks brauser kõigepealt peaaegu tühja lehe, siis laeks alla JavaScripti, siis toob kohviku ja alles siis kuvab selle. Otsingumootorid saavad sellega sageli hakkama, aga täielikult vormitud leht on usaldusväärsem. Vt SEO AI-ga ehitatud veebisaitidele.

Võrdle seda personalile mõeldud armatuurlauaga sisselogimise taga: otsingumootorid seda igal juhul ei näe, nii et serveripoolse renderdamise kasu on väiksem ning lihtsam Vite rakendus sobib sageli paremini.

Põhimõisted

Levinud väärarusaamad

• „Next.js asendab Reacti.“ Ei asenda. See kasutab Reacti. Su komponendid on ikka React-komponendid.
• „Next.js on alati parem valik.“ See on võimekam, aga ka rohkem mõistmist nõudev. Serveripoolne renderdamine, vahemällu salvestamine ning serveri- ja kliendikoodi erinevus on levinud segaste vigade allikad. Rakenduse puhul, mis on enamasti sisselogimise taga, on tavaline React-rakendus sageli lihtsam.
• „Next.js töötab ainult Verceli peal.“ See on avatud lähtekoodiga ja võib töötada igas Node.js serveris või Dockeri konteineris. Täielik staatiline eksport on võimalik, kui serveri funktsioone ei kasuta.
• „Next.js kasutamine tagab hea SEO.“ See muudab loetavad lehed lihtsamaks. Edetabelid sõltuvad ikka pealkirjadest, sisust, kiirusest ja linkidest.
• „Next.js-i serveri kood on automaatselt privaatne.“ Kliendile märgitud kood jõuab brauserisse. Saladused peavad jääma ainult serveris olevasse koodi ja keskkonnamuutujatesse.

Mida AI ehitajalt paluda

• „Kasuta Next.js’i App Routeriga“ — esimeses päringus, kui seda tahad.
• „Millised lehed renderdatakse serveris, millised on staatilised ja millised töötavad brauseris — ja miks?“
• „Tee avalikud turundus- ja loendilehed serveris renderdatud või staatilisteks, õigete pealkirjade ja kirjeldustega.“
• „Hoia API võtmed ainult serveris olevas koodis ja keskkonnamuutujates. Näita mulle, kust iga üks loetakse.“
• „Kas see rakendus vajab Next.js’i või oleks Vite + React meie ehitatava jaoks lihtsam?“

Next.js Mythexis

Mythex kasutab vaikimisi Vite + React + TypeScript + Tailwind’i ja lülitub Next.js’ile, kui seda küsid oma päringus; selle nimetamine varakult säästab krediite, võrreldes hilisema vahetamisega. Rakendust näed elavas eelvaates ning Avalda juurutab selle elavale URL-ile, ilma et peaksid hostingut ise seadistama. Mythexi dokumentatsioon märgib, et kliendipoolselt renderdatud üheleheküljelised rakendused on SEO mõttes nõrgemad kui serveris renderdatud või staatiline HTML, seega kui otsing on turunduslehe jaoks oluline, tasub seda kohe öelda (SEO sinu rakenduse jaoks).

Küsimused