Mitä on Next.js? Selkokielinen opas sovellusrakentajille

Next.js on kehys verkkosivujen ja verkkosovellusten rakentamiseen Reactilla. React antaa käyttöliittymän rakennuspalikat, kuten painikkeet, lomakkeet ja listat. Next.js lisää ympärille loput verkkosivusta: sivut ja URL-osoitteet, sivujen renderöinnin palvelimella niin, että ne saapuvat valmiina luettavaksi, datan lataamisen ja taustakoodin ajamisen samassa projektissa. Se on avointa lähdekoodia, sen on tehnyt yritys Vercel, ja se on yksi laajimmin käytetyistä tavoista rakentaa Reactilla verkkosivustoja.

Miksi Next.js on tärkeää tekoälyllä rakennettaessa

Kun kuvaat sovelluksen tekoälyrakentajalle, se valitsee tekniset perusteet. Valinta vaikuttaa asioihin, joista välität myöhemmin:

• Näkyvyys hakukoneissa. Julkinen sivusto, jonka pitää pärjätä Googlessa, hyötyy siitä, että se lähettää oikeaa HTML:ää, ja Next.js tekee sen hyvin.
• Missä taustapalvelu sijaitsee. Next.js antaa frontend-sivujen ja palvelinkoodin (kuten "tallenna tämä lomake" tai "kutsu maksurajapintaa") elää yhdessä projektissa.
• Hostaus. Palvelinominaisuuksilla varustettu Next.js-sovellus tarvitsee palvelimen, jossa se ajetaan, kun taas tavallinen Vite-sovellus voidaan tarjota staattisina tiedostoina.

Mythex aloittaa uudet projektit oletuksena Vite + React + TypeScript + Tailwind -pinolla ja käyttää Next.js:ää, kun pyydät sitä. Riittää, että mainitset "Use Next.js" ensimmäisessä kehotteessasi (miten teknologia valitaan). Siksi on hyödyllistä tietää, milloin sen pyytäminen kannattaa.

Arkinen vertaus

Jos React on laatikollinen laadukkaita Lego-palikoita, Next.js on Lego-setti, jossa ohjeet, pohjalevy ja ovien ja putkiston osat ovat jo mukana.

Voisit rakentaa saman talon irrallisista palikoista. Joutuisit vain itse päättämään, miten huoneet yhdistyvät, mihin etuovi tulee ja miten vesi johdetaan. Next.js tekee nämä päätökset puolestasi standardilla tavalla, joten jokainen Next.js-projekti on järjestetty samankaltaisesti, ja uusi kehittäjä (tai tekoäly) löytää tiensä nopeasti.

Mitä Next.js lisää Reactiin

Next.js:ssä on kaksi tapaa järjestää sivut. App Router (app/-kansio) on uudempi ja tukee palvelinkomponentteja. Pages Router (pages/-kansio) on alkuperäinen ja edelleen tuettu. Uudet projektit käyttävät yleensä App Routeria. Jos tekoälysi koodi tai opas näyttää vieraalta, tämä on usein syy.

Esimerkki: julkinen hakemisto paikallisista kahviloista

Kuvittele sivusto, joka listaa kahviloita kaupunkisi alueella, ja jokaisella kahvilalla on oma sivunsa, jonka haluat näkyvän hakutuloksissa.

Yksi kahvilasivu Next.js:ssä voisi näyttää suunnilleen tältä:

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

Kun joku (tai Google) vierailee osoitteessa /cafes/blue-door, tapahtuu seuraavaa:

1. Next.js yhdistää URL-osoitteen tiedostoon. [slug]-kansio tarkoittaa "mikä tahansa kahvila".
2. Komponentti ajetaan palvelimella, se lukee kahvilan tietokannasta ja rakentaa HTML:n.
3. Selain saa valmiin sivun, jossa kahvilan nimi ja osoite ovat jo mukana, eikä tarvitse odottaa JavaScriptin hakevan dataa.

Tavallisessa selaimessa toimivassa React-sovelluksessa selain saisi ensin lähes tyhjän sivun, lataisi sitten JavaScriptin, hakisi kahvilan ja vasta sitten näyttäisi sen. Hakukoneet pärjäävät usein sellaisenkin kanssa, mutta valmis sivu on luotettavampi. Katso SEO tekoälyllä rakennetuille verkkosivuille.

Vertaa tätä henkilökunnalle tarkoitettuun kojelautaan kirjautumisen takana: hakukoneet eivät näe sitä joka tapauksessa, joten palvelinpuolen renderöinnistä on vähemmän hyötyä, ja yksinkertaisempi Vite-sovellus on usein parempi valinta.

Keskeiset termit

Yleisiä väärinkäsityksiä

• "Next.js korvaa Reactin." Ei korvaa. Se käyttää Reactia. Komponenttisi ovat yhä React-komponentteja.
• "Next.js on aina parempi valinta." Se on kykenevämpi, mutta sitä on myös enemmän ymmärrettävää. Palvelinpuolen renderöinti, välimuisti ja palvelin- ja asiakaspuolen koodin ero aiheuttavat usein hämmentäviä virheitä. Sovellukseen, joka on pääosin kirjautumisen takana, tavallinen React-sovellus on usein yksinkertaisempi.
• "Next.js vain toimii Vercelissä." Se on avointa lähdekoodia ja toimii millä tahansa Node.js-palvelimella tai Docker-kontissa. Täysin staattinen vienti on mahdollinen, jos et käytä palvelinominaisuuksia.
• "Next.js takaa hyvän SEO:n." Se helpottaa luettavien sivujen tekemistä. Sijoitukset riippuvat yhä otsikoista, sisällöstä, nopeudesta ja linkeistä.
• "Palvelinkoodi Next.js:ssä on automaattisesti yksityistä." Asiakaspuolelle tarkoitettu koodi päätyy selaimeen. Salaisuudet täytyy pitää palvelinpuolen koodissa ja ympäristömuuttujissa.

Mitä pyytää tekoälysovellusrakentajalta

• "Käytä Next.js:ää App Routerilla" ensimmäisessä kehotteessasi, jos haluat sen.
• "Mitkä sivut renderöidään palvelimella, mitkä ovat staattisia ja mitkä ajetaan selaimessa, ja miksi?"
• "Tee julkiset markkinointi- ja listaussivut palvelinpuolella renderöidyiksi tai staattisiksi, oikeilla otsikoilla ja kuvauksilla."
• "Pidä API-avaimet vain palvelinpuolen koodissa ja ympäristömuuttujissa. Näytä, mistä jokainen niistä luetaan."
• "Tarvitseeko tämä sovellus Next.js:ää, vai olisiko Vite + React yksinkertaisempi siihen, mitä rakennamme?"

Next.js Mythexissä

Mythex käyttää oletuksena Vite + React + TypeScript + Tailwind -pinoa ja siirtyy Next.js:ään, kun pyydät sitä kehotteessasi. Sen mainitseminen alussa säästää krediittejä verrattuna myöhempään vaihtamiseen. Näet sovelluksen live-esikatselussa, ja Julkaise-toiminto vie sen live-osoitteeseen ilman, että sinun tarvitsee määrittää hostausta itse. Mythexin dokumentaatiossa todetaan, että asiakaspuolella renderöidyillä yksisivuisilla sovelluksilla on heikompi SEO kuin palvelinpuolella tai staattisina renderöidyillä HTML-sivuilla. Siksi markkinointisivustolla, jossa haku on tärkeää, kannattaa sanoa se heti alussa (SEO sovelluksellesi).

Kysymykset