Pelkkään Reactiin verrattuna aloittelija saa Next.js:stä valmiina reitityksen, palvelinpuolen suorituksen ja julkaisuvalmiin rakenteen. Kansiot määrittävät osoitteet, tiedostoilla on kiinteät nimet ja projektin saa pystyyn yhdellä komennolla. Se tarkoittaa, että ensimmäisen sivun ja sen osoitteen välillä ei ole konfiguraatiota, jota pitäisi ensin opetella.
Kehys on myös se, jota tekoälytyökalut tuntevat parhaiten. Kun pyydät mallilta uutta sivua, se osaa nimetä tiedoston oikein ilman että sääntöä tarvitsee kertoa.
Asennus ja ensimmäinen käynnistys
Lokakuussa 2026 päivitetyn asennusohjeen mukaan Next.js vaatii vähintään Node.js-version 20.9 ja tukee macOS-, Windows- ja Linux-ympäristöjä. Tarkista versio komennolla node -v ennen kuin aloitat, koska vanha Node tuottaa virheilmoituksia, jotka eivät kerro mistään muusta kuin versiosta.
Projekti syntyy komennolla npx create-next-app@latest my-app --yes. Saman ohjeen mukaan oletusasetuksissa ovat TypeScript, Tailwind CSS, ESLint, App Router ja Turbopack sekä tuontialias muodossa @/kansio. Aloittelijan kannattaa ottaa oletukset sellaisenaan. Jokainen niistä on valinta, jonka joutuisit muuten tekemään itse, ja oletusyhdistelmä on se, josta on eniten esimerkkejä ja ohjeita saatavilla.
Käynnistä kehityspalvelin komennolla npm run dev ja avaa selaimessa osoite localhost:3000. Kun muokkaat tiedostoa ja tallennat, selain päivittyy itsestään. Tämä on koko työskentelyn perusrytmi: muokkaa, tallenna, katso.
Kansiorakenne reitityksenä
App Routerissa kansiot määrittävät osoitepolun segmentit ja tiedostot page ja layout tuottavat näkymän, ja hakasulkeisiin kirjoitettu kansionimi luo dynaamisen segmentin. Kansio app/blogi ja sen sisällä page.tsx tuottavat osoitteen /blogi. Kansio app/blogi/[slug] ja sen page.tsx tuottavat jokaisen yksittäisen artikkelin osoitteen.
Layout on se osa, joka pysyy paikallaan sivulta toiselle: navigaatio, alatunniste, sivun kehys. Juuritason layout-tiedosto on saman ohjeen mukaan pakollinen ja sen on sisällettävä html- ja body-elementit, ja layoutit säilyttävät tilansa siirryttäessä sivulta toiselle. Käytännössä tämä tarkoittaa, että avattu valikko pysyy auki ja videon toisto jatkuu, kun käyttäjä siirtyy seuraavalle sivulle.
Sääntö kannattaa opetella kunnolla, koska se on Next.jsin ainoa reititysmekanismi. Tiedostoa ei rekisteröidä mihinkään, eikä osoitteita luetella missään listassa. Kansio on osoite.
Palvelin- ja selainkomponenttien ero
Tässä kohdassa aloittelija kompastuu helpoimmin. Next.jsissä komponentit ajetaan oletuksena palvelimella. Palvelinkomponentti voi hakea dataa suoraan tietokannasta, ja se lähettää selaimeen vain valmiin tuloksen.
Selainkomponentti tarvitaan silloin, kun sivulla on jotain, joka reagoi käyttäjään: painike, lomake, valikko, tilan muutos. Se merkitään lisäämällä tiedoston ensimmäiselle riville merkintä use client.
Virheilmoitus, joka kertoo hookin käytöstä palvelinkomponentissa, tarkoittaa juuri tätä puuttuvaa merkintää. Ratkaisu on eristää se pieni osa, joka tarvitsee vuorovaikutusta, omaksi komponentikseen ja jättää muu sivu palvelimelle. Silloin sivun raskas osuus pysyy palvelimella ja selaimeen lähtee vähemmän koodia.
Komennot ja niiden muuttuneet oletukset
Projektissa on neljä komentoa, jotka riittävät alkuun. Komento next dev käynnistää kehityspalvelimen, next build kääntää sovelluksen, next start ajaa käännetyn version ja eslint tarkistaa koodin.
Turbopack on saman asennusohjeen mukaan Next.jsin oletuspaketoija, ja Webpackin saa käyttöön komennoilla next dev --webpack ja next build --webpack. Vaihtoa tarvitset vain, jos jokin vanha lisäosa ei toimi.
Yksi muutos kannattaa tietää etukäteen, koska vanhat ohjeet netissä olettavat toisin. Next.js 16:sta alkaen next build ei enää aja linttausta automaattisesti, ja linteri ajetaan omana npm-skriptinään. Jos siis luulet, että käännös tarkistaa koodisi, se ei tarkista.
Aja lint erikseen ennen julkaisua. Se löytää käyttämättömät muuttujat ja puuttuvat riippuvuudet, jotka ovat tekoälyn kirjoittamassa koodissa tavallisia.
Selaintuki ilman erillistä säätöä
Saman asennusohjeen mukaan Next.js tukee ilman konfigurointia selaimia Chrome 111, Edge 111, Firefox 111 ja Safari 16.4 alkaen. Tämä on aloittelijalle helpotus, koska yksi kokonainen ongelmaluokka jää pois: et joudu opettelemaan käännösasetuksia vain siksi, että sivu näkyisi oikein.
Vanhempien selainten tuki on erikseen tehtävä työ. Jos kohderyhmässäsi on koneita, joita ei ole päivitetty vuosiin, tarkista se ennen kuin valitset kehyksen, koska jälkikäteen lisätty tuki maksaa aina enemmän kuin etukäteen tehty valinta.
Työskentely tekoälytyökalun kanssa
Kun pyydät mallilta uutta sivua, kerro reitti tiedostopolkuna. Pyyntö "tee tiedosto app/hinnasto/page.tsx, joka näyttää kolme hintapakettia" tuottaa oikean tuloksen. Pyyntö uudesta hinnastosivusta ilman polkua tuottaa tiedoston johonkin, ja joudut etsimään sen itse.
Kerro myös, onko komponentti palvelin- vai selainpuolen komponentti. Malli arvaa sen väärin usein, ja väärä arvaus näkyy vasta käännöksessä. Yksi lisälause pyynnössä säästää yhden virhekierroksen.
Julkaisu ja maksuttoman tason rajat
Käännetty Next.js-sovellus tarvitsee alustan, joka ajaa sen. Vercelin maksuton Hobby-taso sisältää 100 GB nopeaa tiedonsiirtoa ja miljoona funktiokutsua kuukaudessa, ja funktion enimmäiskesto on 300 sekuntia (tarkistettu 16.10.2026).
Viiden minuutin raja riittää sivunlataukseen ja yksittäiseen tekoälykutsuun, mutta pitkä agenttiajo tai iso eräkäsittely ei mahdu siihen. Jos rakennat jotain, joka odottaa mallin vastausta, suunnittele se alusta asti niin, että pyyntö palauttaa vastauksen vaiheittain tai siirtää työn taustalle. Julkaisun vaiheet on käyty tarkemmin läpi julkaisuoppaassa.
Aloittelijan tyypilliset kompastuskivet
Hydraatiovirhe on yleisin. Se syntyy, kun palvelimella tuotettu sivu ja selaimessa tuotettu sivu eroavat toisistaan, esimerkiksi siksi että komponentti näyttää kellonajan tai satunnaisluvun. Korjaus on siirtää tuo muuttuva osuus selainkomponenttiin, joka tuottaa sen vasta latauksen jälkeen.
Toinen on datan hakeminen väärästä paikasta. Kun palvelinkomponentti voi hakea datan suoraan, erillinen rajapintareitti sen välissä on turha kerros. Aloittelijan koodissa se on silti tavallinen, koska tekoäly kirjoittaa usein sen mallin mukaan, jonka se on nähnyt vanhemmissa esimerkeissä.
Kolmas on salaisuuksien vuotaminen selaimeen. Ympäristömuuttuja, jonka nimi alkaa merkinnällä NEXT_PUBLIC, päätyy selaimeen kaikkien luettavaksi. Tietokannan salasana tai rajapinta-avain ei kuulu sellaiseen muuttujaan koskaan. Käsitteiden taustaa löytyy sanaston Next.js-kohdasta.
Harjoitusprojekti, joka opettaa rakenteen
Rakenna kolmen sivun blogi. Etusivu listaa artikkelit, osoite /blogi näyttää saman listan pidempänä ja /blogi/[slug] näyttää yhden artikkelin. Kirjoita artikkelit ensin tavallisiksi tiedostoiksi ja lue ne palvelinkomponentissa.
Tämä projekti pakottaa käyttämään kaikkia perusrakenteita: layoutin, sisäkkäisen reitin, dynaamisen segmentin ja datan haun palvelimella. Kun se toimii paikallisesti, julkaise se ja avaa osoite puhelimella.