Kas ir Next.js? Vienkāršs ceļvedis lietotņu veidotājiem

Next.js ir ietvars tīmekļa vietņu un tīmekļa lietotņu veidošanai ar React. React dod saskarnes būvklučus — pogas, formas, sarakstus. Next.js pievieno pārējo tīmekļa vietni ap tiem: lapas un URL, lapu renderēšanu serverī, lai tās nonāktu gatavas lasīšanai, datu ielādi un backend koda izpildi tajā pašā projektā. Tas ir atvērtā pirmkoda, to veido uzņēmums Vercel, un tas ir viens no visplašāk izmantotajiem veidiem, kā veidot React vietnes.

Kāpēc Next.js ir svarīgs, veidojot ar MI

Kad apraksti lietotni MI veidotājam, tam jāizvēlas tehnisks pamats. Šī izvēle veido lietas, kas tev rūp vēlāk:

• Redzamība meklētājprogrammās. Publiska vietne, kurai jāieņem vieta Google rezultātos, gūst labumu no reāla HTML sūtīšanas, ko Next.js dara labi.
• Kur dzīvo backend. Next.js ļauj lapām un servera kodam (piemēram, „saglabā šo formu” vai „izsauc maksājumu API”) dzīvot vienā projektā.
• Hostings. Next.js lietotnei ar servera funkcijām vajag serveri, uz kura darboties, bet vienkāršu Vite lietotni var pasniegt kā statiskus failus.

Mythex jaunus projektus sāk ar Vite + React + TypeScript + Tailwind pēc noklusējuma un izmanto Next.js, kad to pieprasi — pietiek ar „Use Next.js” pirmajā uzvednē (kā tiek izvēlēta tehnoloģija). Tāpēc noder zināt, kad to vērts pieprasīt.

Ikdienas analoģija

Ja React ir kaste ar augstas kvalitātes Lego klucīšiem, Next.js ir Lego komplekts ar instrukcijām, pamatplāksni un durvju un santehnikas detaļām jau iekļautām.

Tu varētu uzbūvēt to pašu māju no atsevišķiem klucīšiem — tikai pats būtu jāizlemj, kā istabas savienojas, kur ir ieejas durvis un kā iekļūst ūdens. Next.js šos lēmumus pieņem standarta veidā, tāpēc katrs Next.js projekts izskatās līdzīgi, un jauns izstrādātājs (vai MI) ātri atrod ceļu.

Ko Next.js pievieno React

Next.js ir divi veidi, kā organizēt lapas. App Router (app/ mape) ir jaunākais un atbalsta servera komponentes. Pages Router (pages/ mape) ir oriģinālais un joprojām tiek atbalstīts. Jauni projekti parasti izmanto App Router. Ja tavs MI veidotāja kods vai apmācība izskatās svešs, bieži tieši tāpēc.

Darba piemērs: publiska kafejnīcu saraksta vietne

Iedomājies vietni ar kafejnīcām tavā pilsētā, ar lapu katrai kafejnīcai, kuras vēlies redzēt meklēšanas rezultātos.

Next.js lapa vienai kafejnīcai varētu izskatīties apmēram šādi:

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

Kas notiek, kad kāds (vai Google) apmeklē /cafes/blue-door:

1. Next.js saskaņo URL ar šo failu. Mape [slug] nozīmē „jebkura kafejnīca”.
2. Komponente izpildās serverī, nolasa kafejnīcu no datubāzes un izveido HTML.
3. Pārlūkprogramma saņem pilnu lapu ar kafejnīcas nosaukumu un adresi jau iekšā — nav jāgaida, kamēr JavaScript ielādē datus.

Ar vienkāršu klienta puses React lietotni pārlūkprogramma vispirms saņemtu gandrīz tukšu lapu, pēc tam lejupielādētu JavaScript, pēc tam ielādētu kafejnīcu un tikai tad to parādītu. Meklētājprogrammas bieži var ar to tikt galā, bet pilnībā izveidota lapa ir uzticamāka. Skat. SEO MI veidotām tīmekļa vietnēm.

Salīdzini to ar personālam paredzētu paneli aiz pierakstīšanās: meklētājprogrammas to tāpat neredz, tāpēc renderēšana serverī dod mazāk labuma, un vienkāršāka Vite lietotne bieži ir labākā izvēle.

Galvenie termini

Biežākie maldīgi priekšstati

• „Next.js aizstāj React.” Nē. Tas izmanto React. Tavas komponentes joprojām ir React komponentes.
• „Next.js vienmēr ir labāka izvēle.” Tas ir spējīgāks, bet arī vairāk jāsaprot. Renderēšana serverī, kešatmiņa un atšķirība starp servera un klienta kodu ir biežāki neskaidru kļūdu avoti. Lietotnei, kas galvenokārt aiz pierakstīšanās, vienkārša React lietotne bieži ir vienkāršāka.
• „Next.js darbojas tikai Vercel.” Tas ir atvērts pirmkods un var darboties jebkurā Node.js serverī vai Docker konteinerā. Pilns statisks eksports ir iespējams, ja neizmanto servera funkcijas.
• „Next.js garantē labu SEO.” Tas padara lasāmas lapas vieglākas. Reitingi joprojām atkarīgi no nosaukumiem, satura, ātruma un saitēm.
• „Servera kods Next.js ir automātiski privāts.” Kods, kas atzīmēts klientam, nonāk pārlūkprogrammā. Noslēpumiem jāpaliek servera-only kodā un vides mainīgajos.

Ko lūgt savam MI veidotājam

• „Izmanto Next.js ar App Router” — savā pirmajā uzvednē, ja to vēlies.
• „Kuras lapas tiek renderētas serverī, kuras ir statiskas un kuras darbojas pārlūkprogrammā — un kāpēc?”
• „Publiskās mārketinga un sarakstu lapas padari renderētas serverī vai statiskas, ar pareiziem nosaukumiem un aprakstiem.”
• „Glabā API atslēgas tikai servera kodā un vides mainīgajos. Parādi man, kur katra tiek nolasīta.”
• „Vai šai lietotnei vajag Next.js, vai Vite + React lietotne būtu vienkāršāka tam, ko veidojam?”

Next.js Mythex

Mythex pēc noklusējuma izmanto Vite + React + TypeScript + Tailwind un pārslēdzas uz Next.js, kad to pieprasi uzvednē; to nosaukt agri ietaupa kredītus, salīdzinot ar vēlāku maiņu. Lietotni redzi tiešajā priekšskatījumā, un Publish izvieto to tiešsaistes adresē, bez hostinga uzstādīšanas pašam. Mythex dokumentācijā ir atzīmēts, ka klienta puses vienas lapas lietotnēm ir vājāks SEO nekā renderētām serverī vai statiskām HTML lapām, tāpēc mārketinga vietnei, kur svarīga meklēšana, to vērts pateikt uzreiz (SEO tavai lietotnei).

Jautājumi