Kas yra Next.js? Paprastas vadovas programėlių kūrėjams

Next.js yra karkasas svetainėms ir žiniatinklio programėlėms kurti su React. React suteikia interfeiso statybinius blokus – mygtukus, formas, sąrašus. Next.js aplink juos prideda likusią svetainės dalį: puslapius ir URL, puslapių atvaizdavimą serveryje, kad jie pasiektų paruošti skaitymui, duomenų įkėlimą ir serverinio kodo vykdymą tame pačiame projekte. Tai atvirojo kodo projektas, jį kuria įmonė Vercel, ir tai vienas plačiausiai naudojamų būdų kurti React svetaines.

Kodėl Next.js svarbus kuriant su DI

Kai aprašote programėlę DI kūrėjui, jam reikia pasirinkti techninį pagrindą. Šis pasirinkimas lemia dalykus, kurie jums vėliau rūpės:

• Matomumas paieškoje. Viešai svetainei, kuri turi pasirodyti Google, naudinga siųsti tikrą HTML, o su tuo Next.js gerai susitvarko.
• Kur gyvena serverinė dalis. Next.js leidžia puslapius ir serverinį kodą (pavyzdžiui, „išsaugoti šią formą“ ar „iškviesti mokėjimo API“) laikyti viename projekte.
• Talpinimas. Next.js programai su serverinėmis funkcijomis reikia serverio, kuriame ji veiktų, o paprastą Vite programą galima pateikti kaip statinius failus.

Mythex naujus projektus pagal numatytuosius nustatymus pradeda su Vite + React + TypeScript + Tailwind, o Next.js naudoja, kai to paprašote – pakanka pirmoje užklausoje parašyti „Naudok Next.js“ (kaip parenkama technologija). Todėl verta žinoti, kada tai verta paprašyti.

Kasdienė analogija

Jei React yra aukštos kokybės Lego kaladėlių dėžė, Next.js – tai Lego rinkinys su instrukcija, pagrindine plokšte ir durų bei vamzdžių detalėmis.

Tą patį namą galima pastatyti ir iš atskirų kaladėlių, tik tada patiems reikia nuspręsti, kaip jungiasi kambariai, kur yra įėjimas ir kaip įvedamas vanduo. Next.js tuos sprendimus priima standartiniu būdu, todėl kiekvieno Next.js projekto struktūra panaši, o naujam kūrėjui (ar DI) lengviau susiorientuoti.

Ką Next.js prideda prie React

Next.js puslapius organizuoja dviem būdais. App Router (app/ aplankas) yra naujesnis ir palaiko Serverio komponentus. Pages Router (pages/ aplankas) yra originalus ir vis dar palaikomas. Naujuose projektuose paprastai naudojamas App Router. Jei DI kūrėjo kodas ar pamoka atrodo nepažįstami, dažniausiai būtent dėl to.

Darbinis pavyzdys: viešas vietinių kavinių katalogas

Įsivaizduokite svetainę su jūsų mieste esančių kavinių sąrašu, kur kiekviena kavinė turi savo puslapį ir norite, kad jos pasirodytų paieškos rezultatuose.

Next.js puslapis vienai kavinei galėtų atrodyti maždaug taip:

// 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 nutinka, kai kas nors (ar Google) atidaro /cafes/blue-door:

1. Next.js URL sulygina su tuo failu. Aplankas [slug] reiškia „bet kurią kavinę“.
2. Komponentas veikia serveryje, perskaito kavinę iš duomenų bazės ir sukuria HTML.
3. Naršyklė gauna pilną puslapį, kuriame jau yra kavinės pavadinimas ir adresas – nereikia laukti, kol JavaScript atsisiųs duomenis.

Su paprasta kliento pusėje veikiančia React programa naršyklė pirmiausia gautų beveik tuščią puslapį, tada atsisiųstų JavaScript, tada gautų kavinę ir ją parodytų. Paieškos sistemos dažnai su tuo susidoroja, bet pilnai suformuotas puslapis yra patikimesnis. Žr. SEO DI kuriamoms svetainėms.

Palyginkite su darbuotojams skirtu skydeliu už prisijungimo: paieškos sistemos jo vis tiek nemato, todėl atvaizdavimas serveryje duoda mažiau naudos, ir dažnai geresnis pasirinkimas yra paprastesnė Vite programa.

Pagrindinės sąvokos

Dažnos klaidingos nuomonės

• „Next.js pakeičia React.“ Ne. Jis naudoja React. Jūsų komponentai vis tiek yra React komponentai.
• „Next.js visada geresnis pasirinkimas.“ Jis galingesnis, bet ir sudėtingesnis suprasti. Atvaizdavimas serveryje, talpykla ir serverio bei kliento kodo skirtumas dažnai sukelia painias klaidas. Programėlei, kuri daugiausia veikia už prisijungimo, paprasta React programa dažnai yra paprastesnė.
• „Next.js veikia tik Vercel.“ Jis atvirojo kodo ir gali veikti bet kuriame Node.js serveryje arba Docker konteineryje. Jei nenaudojate serverio funkcijų, įmanomas ir visiškai statinis eksportas.
• „Next.js garantuoja gerą SEO.“ Jis padaro skaitomus puslapius lengviau pasiekiamus. Pozicijos vis tiek priklauso nuo pavadinimų, turinio, greičio ir nuorodų.
• „Serverinis Next.js kodas automatiškai privatus.“ Kodas, skirtas klientui, patenka į naršyklę. Paslaptys turi likti tik serverio kode ir aplinkos kintamuosiuose.

Ko klausti DI kūrėjo

• „Naudok Next.js su App Router“ – pirmoje užklausoje, jei to norite.
• „Kurie puslapiai atvaizduojami serveryje, kurie yra statiniai, o kurie veikia naršyklėje – ir kodėl?“
• „Viešus rinkodaros ir sąrašų puslapius padaryk atvaizduojamus serveryje arba statinius, su tinkamais pavadinimais ir aprašymais.“
• „API raktus laikyk tik serverio kode ir aplinkos kintamuosiuose. Parodyk, kur kiekvienas nuskaitomas.“
• „Ar šiai programėlei reikia Next.js, ar paprasta Vite + React programa būtų paprastesnė tam, ką kuriame?“

Next.js Mythex platformoje

Mythex pagal numatytuosius nustatymus naudoja Vite + React + TypeScript + Tailwind ir persijungia į Next.js, kai tai nurodote užklausoje; jei tai pasakote iš pat pradžių, sutaupote kreditų, nei vėliau keisdami. Programėlę matote tiesioginiame Peržiūros lange, o Publikuoti ją paskelbia tiesioginiu URL be jokio atskiro talpinimo nustatymo. Mythex dokumentacijoje nurodoma, kad kliento pusėje atvaizduojamos vieno puslapio programos turi silpnesnį SEO nei serveryje atvaizduojami ar statiniai HTML puslapiai, todėl rinkodaros svetainei, kur svarbi paieška, verta tai pasakyti iš karto (SEO jūsų programėlei).

Klausimai