Next.js:n asennus ja julkaisu

01Mikä on Next.js ja kenen kannattaa käyttää sitä?

Next.js on Reactin päälle rakennettu verkkosovelluskehys. Siinä missä React piirtää vain käyttöliittymäkomponentit, Next.js tuo valmiina reitityksen, palvelinpuolen sivutuotannon, staattisen sivutulosteen, kuvien optimoinnin ja API-päätepisteet.

Sen suurin ero on, että se voi tuottaa sivut palvelimella HTML:nä. Hakukoneet ja sosiaalisen median esikatselut näkevät sisällön suoraan, ja ensimmäinen avautuminen nopeutuu. Siksi se sopii yksisivuisia sovelluksia paremmin sisältövetoisille yrityssivustoille, luetteloille ja blogisivuille.

Jos kehität vain kirjautumista vaativaa hallintapaneelia, yksinkertaisempi rakenne voi riittää; tätä tilannetta varten katso oppaamme React-asennus Vitellä.

02Edellytykset

Next.js on tarkka tuetuista Node.js-versioista ja luopuu uusissa pääversioissa vanhojen Node-versioiden tuesta. Siksi ongelmattomin tapa on asentaa osoitteesta nodejs.org ajantasainen LTS-versio.

• Node.js:n ajantasainen LTS-versio ja npm (tulee Noden mukana); myös pnpm, yarn tai bun käyvät.
• Koodieditori; suositelluilla laajennuksilla asennusta varten katso artikkeli VS Coden asennus.
• Git ja etävarasto (GitHub, GitLab): julkaisuprosessit ammentavat yleensä varastosta.
• Jos asennat omalle palvelimellesi, Linux-palvelin, johon on SSH-yhteys.

03Asenna ja varmista Node.js

Node.js:n asennus eroaa hieman käyttöjärjestelmän mukaan; Next.js-komennot ovat asennuksen jälkeen kaikkialla samat.

Windows

Lataa LTS-asennustiedosto osoitteesta nodejs.org tai käytä wingetiä; avaa sen jälkeen pääte uudelleen.

winget install OpenJS.NodeJS.LTS
node -v

macOS

Voit asentaa virallisella paketilla tai Homebrewlla.

brew install node
node -v

Linux

Jakelun varastojen versio voi olla vanhentunut; asentaminen nvm:llä on turvallisempaa.

nvm install --lts
nvm use --lts
node -v

04Projektin luominen create-next-app-työkalulla

Create next app -ohjattu toiminto on virallinen aloitustyökalu, ja se asentaa kaikki tarvittavat paketit kerralla. Kun ajat komennon, sinulta kysytään projektin nimi ja muutama valinta; jos olet epävarma, suositeltujen oletusten hyväksyminen on hyvä alku.

npx create-next-app@latest benim-sitem
cd benim-sitem
npm run dev

05App Router -rakenteen ymmärtäminen

Next.js App Router tuottaa reitityksen kansiorakenteesta. Jokainen app-kansion alla oleva kansio on osoitteen osa; kansion page.tsx-tiedosto määrittelee sivun ja layout.tsx kyseisen osion yhteisen rungon.

App Routerissa komponentit ovat oletuksena palvelinkomponentteja: ne toimivat palvelimella, voivat hakea dataa suoraan eivätkä lähetä selaimelle JavaScriptiä. Komponenteista, jotka tarvitsevat vuorovaikutusta, kuten napsautuksia tai lomakkeen tilaa, teet asiakaskomponentteja kirjoittamalla niiden ylimmäksi use client -direktiivin.

Metadata hakukoneoptimointia varten

Jokainen sivu tai layout-tiedosto voi määritellä otsikon, kuvauksen ja Open Graph -tunnisteet viemällä metadata-olion. Dynaamisilla sivuilla käytetään generateMetadata-funktiota. Tämä rakenne helpottaa hakukoneystävällisten verkkosivujen vaatimien tunnisteiden hallintaa sivutasolla.

06Build ja ympäristömuuttujat

Ennen julkaisua tee tuotantokäännös komennolla npm run build. Build-tuloste listaa, tuotetaanko kukin sivu staattisena vai dynaamisena; jos odottamaton sivu tulee dynaamiseksi, se on varhainen merkki turhasta palvelinkuormasta.

Ympäristömuuttujat säilytetään .env.local-tiedostossa. Vain NEXT_PUBLIC_-etuliitteiset muuttujat lähetetään selaimelle; tietokannan salasanan ja API:n salaiset avaimet tulee jättää ilman etuliitettä ja käyttää vain palvelinkoodissa.

npm run build
npm run start

07Miten kukin sivu kannattaa tuottaa?

Next.js:n voima tulee siitä, että voit valita jokaiselle sivulle eri renderöintistrategian. Väärä valinta tarkoittaa joko turhia palvelinkustannuksia tai vanhentunutta sisältöä; siksi luokittele sivusi tyypin mukaan heti perustamisen jälkeen.

Harvoin muuttuvat sivut, kuten meistä-, palvelu- ja yhteystietosivut, sopivat ihanteellisesti staattiseen tuotantoon: ne tuotetaan kerran käännösvaiheessa ja tarjoillaan CDN:stä alle sekunnissa. Lähes kaikki yrityksen kotisivun sivut kuuluvat tähän ryhmään.

Satunnaisesti päivittyvillä sivuilla, kuten blogeissa ja tuoteluetteloissa, uudelleentuotanto (revalidate) tietyin väliajoin on hyvä kompromissi. Käyttäjäkohtaiset paneelit, ostoskorit ja reaaliaikaista saatavuutta näyttävät varausnäkymät tulee sen sijaan tuottaa palvelimella jokaisella pyynnöllä. Tämä viimeinen ryhmä on yleinen skenaario hotellien ja toimistojen kaltaisissa alakohtaisissa ohjelmistoissa, ja se vaatii tietokannan, välimuistin ja valtuutuksen suunnittelua yhdessä.

08Next.js-julkaisuvaihtoehdot

Next.js-julkaisuun on kolme yleistä tapaa. Valinta riippuu liikenteestä, budjetista, datan sijainnista ja tiimisi kokemuksesta palvelimien hallinnasta.

• Vercel: Next.js:n kehittäneen yrityksen alusta. Yhdistät varaston, ja jokaisella lähetyksellä syntyy automaattinen käännös ja esikatseluosoite.
• Oma Node.js-palvelin: komennolla npm run start toimivaa sovellusta pitää käynnissä prosessinhallinta, kuten PM2, ja sen eteen asetetaan Nginx. Antaa täyden hallinnan, mutta ylläpitovastuu on sinulla.
• Staattinen vienti: next.config-tiedoston output: 'export' -asetuksella sivusto muuttuu pelkiksi HTML-tiedostoiksi. Palvelinkomponentteja vaativat dynaamiset ominaisuudet eivät toimi tässä tilassa.

Julkaisu PM2:lla ja Nginxillä

Kun olet asentanut Node.js:n Ubuntu-pohjaiselle palvelimelle, hae projekti varastosta, käännä se ja käynnistä PM2:lla. PM2:n startup-komento pyytää ajamaan sudolla näytölle tulostamansa rivin; tämä rivi saa sovelluksen käynnistymään automaattisesti palvelimen käynnistyessä uudelleen.

git clone https://github.com/kullanici/benim-sitem.git
cd benim-sitem
npm ci
npm run build
sudo npm install -g pm2
pm2 start npm --name benim-sitem -- start
pm2 save
pm2 startup

server {
    listen 80;
    server_name ornek.com www.ornek.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

09Yleiset virheet ja ratkaisut

Suurin osa Next.js-projekteissa kohdatuista virheistä johtuu versioiden yhteensopimattomuudesta tai palvelin- ja asiakaskoodin sekoittamisesta. Pakettienhallinnan ongelmissa auttaa myös npm-komennot-opas.