Installere Next.js og publisere

01Hva er Next.js, og hvem bør bruke det?

Next.js er et rammeverk for webapplikasjoner bygget på React. Mens React bare tegner grensesnittkomponenter, kommer Next.js ferdig med ruting, sidegenerering på serversiden, statisk sideutdata, bildeoptimalisering og API-endepunkter.

Den største forskjellen er at det kan generere sider som HTML på serveren. Søkemotorer og forhåndsvisninger i sosiale medier ser innholdet direkte, og første innlasting går raskere. Derfor passer det bedre enn enkeltsideapplikasjoner for innholdstunge bedriftsnettsider, kataloger og bloggsider.

Hvis du bare utvikler et administrasjonspanel som krever innlogging, kan en enklere struktur holde; for det scenarioet kan du se guiden vår om React-installasjon med Vite.

02Forutsetninger

Next.js er kresent når det gjelder hvilke Node.js-versjoner det støtter, og dropper støtten for eldre Node i nye hovedversjoner. Derfor er det enklest å installere gjeldende LTS-versjon fra nodejs.org.

• Gjeldende LTS-versjon av Node.js og npm (følger med Node); pnpm, yarn eller bun kan også brukes.
• Et kodeverktøy; for oppsett med anbefalte utvidelser kan du se artikkelen om VS Code-installasjon.
• Git og et eksternt repositorium (GitHub, GitLab): publiseringsprosesser hentes vanligvis fra repositoriet.
• Hvis du skal installere på din egen server, en Linux-server med SSH-tilgang.

03Installer og verifiser Node.js

Node.js-installasjonen varierer litt etter operativsystem; Next.js-kommandoene er derimot like overalt etter installasjonen.

Windows

Last ned LTS-installasjonsfilen fra nodejs.org eller bruk winget; åpne deretter terminalen på nytt.

winget install OpenJS.NodeJS.LTS
node -v

macOS

Du kan installere med den offisielle pakken eller Homebrew.

brew install node
node -v

Linux

Versjonen i distribusjonenes pakkearkiv kan være gammel; det er tryggere å installere med nvm.

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

04Sette opp prosjektet med create-next-app

Veiviseren create next app er det offisielle startverktøyet og installerer alle nødvendige pakker i én omgang. Når du kjører kommandoen, blir du spurt om prosjektnavn og noen valg; er du usikker, er det en god start å godta de anbefalte standardene.

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

05Forstå App Router-strukturen

Next.js App Router lager rutingen ut fra mappestrukturen. Hver mappe under app-mappen er en del av adressen; filen page.tsx i mappen definerer siden, og layout.tsx definerer felles skjelett for den delen.

I App Router er komponenter som standard serverkomponenter: de kjører på serveren, kan hente data direkte og sender ikke JavaScript til nettleseren. Komponenter som trenger interaksjon, som klikk og skjematilstand, gjør du til klientkomponenter ved å skrive direktivet use client øverst.

Metadata for SEO

Hver side eller layout-fil kan eksportere et metadata-objekt og definere tittel, beskrivelse og Open Graph-tagger. På dynamiske sider brukes funksjonen generateMetadata. Denne strukturen gjør det enklere å styre taggene som trengs for SEO-vennlig webdesign på sidenivå.

06Bygging og miljøvariabler

Før du publiserer, lager du en produksjonsbygging med npm run build. Byggeresultatet viser om hver side genereres statisk eller dynamisk; hvis en side du ikke forventet blir dynamisk, er det et tidlig tegn på unødvendig serverbelastning.

Miljøvariabler lagres i filen .env.local. Bare variabler med prefikset NEXT_PUBLIC_ sendes til nettleseren; databasepassord og hemmelige API-nøkler må være uten prefiks og brukes bare i serverkode.

npm run build
npm run start

07Hvordan bør hver side genereres?

Styrken til Next.js ligger i at du kan velge en ulik renderingsstrategi for hver side. Feil valg betyr enten unødvendige serverkostnader eller utdatert innhold; derfor bør du sortere sidene etter type rett etter oppsettet.

Sider som sjelden endres, som Om oss, tjenester og kontakt, passer ideelt for statisk generering: de genereres én gang under bygging og leveres på under ett sekund fra CDN-et. Nesten alle sidene på en bedriftsnettside hører til denne gruppen.

For sider som oppdateres av og til, som blogg og produktlister, er regenerering med jevne mellomrom (revalidate) en god balanse. Brukerspesifikke paneler, handlekurver og reservasjonsskjermer som viser tilgjengelighet i sanntid, må derimot genereres på serveren ved hver forespørsel. Denne siste gruppen er et vanlig scenario i bransjeprogramvare for hoteller og reisebyråer og krever at du tenker databasen, bufringen og autorisasjonsdesignet sammen.

08Alternativer for Next.js-deploy

Det finnes tre vanlige veier for Next.js-deploy. Hva du velger, avhenger av trafikk, budsjett, hvor dataene skal ligge og teamets erfaring med serverdrift.

• Vercel: plattformen til selskapet som utvikler Next.js. Du kobler til repositoriet, og for hver push får du automatisk bygging og en forhåndsvisningsadresse.
• Din egen Node.js-server: applikasjonen som kjører med npm run start, holdes i live av en prosessbehandler som PM2, og Nginx settes foran. Gir full kontroll, men vedlikeholdsansvaret er ditt.
• Statisk eksport: med innstillingen output: 'export' i next.config blir nettstedet til rene HTML-filer. Dynamiske funksjoner som krever serverkomponenter, fungerer ikke i denne modusen.

Publisering med PM2 og Nginx

Etter at du har installert Node.js på en Ubuntu-basert server, henter du prosjektet fra repositoriet, bygger det og starter det med PM2. PM2s startup-kommando ber deg kjøre linjen den skriver ut, med sudo; denne linjen får applikasjonen til å starte automatisk når serveren starter på nytt.

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

09Vanlige feil og løsninger

De fleste feilene i Next.js-prosjekter skyldes versjonskonflikter eller at server- og klientkode blandes. Ved problemer med pakkehåndtering hjelper også guiden for npm-kommandoer.