Installera Next.js och publicera

01Vad är Next.js och vem bör använda det?

Next.js är ett ramverk för webbapplikationer byggt på React. Medan React bara ritar gränssnittskomponenter levererar Next.js färdigt det som behövs, som routing, sidgenerering på serversidan, statiska sidor, bildoptimering och API-endpoints.

Den största skillnaden är att det kan generera sidor som HTML på servern. Sökmotorer och förhandsvisningar i sociala medier ser innehållet direkt och den första laddningen går snabbare. Därför passar det bättre än ensidiga applikationer för innehållstunga företagssajter, kataloger och bloggsidor.

Bygger du bara en adminpanel som kräver inloggning kan en enklare struktur räcka; för det scenariot, se vår guide installera React med Vite.

02Förutsättningar

Next.js är kräsen med vilka Node.js-versioner det stöder och släpper stödet för äldre Node i nya huvudversioner. Därför är det smidigast att installera den aktuella LTS-versionen från nodejs.org.

• Aktuell LTS-version av Node.js och npm (följer med Node); pnpm, yarn eller bun kan också användas.
• En kodeditor; för installation med rekommenderade tillägg, se artikeln installera VS Code.
• Git och ett fjärrarkiv (GitHub, GitLab): publiceringsprocesser matas oftast från arkivet.
• En Linux-server med SSH-åtkomst om du ska installera på din egen server.

03Installera och verifiera Node.js

Installationen av Node.js skiljer sig något mellan operativsystem; Next.js-kommandona är däremot desamma överallt efter installationen.

Windows

Ladda ner LTS-installationsfilen från nodejs.org eller använd winget; öppna sedan terminalen på nytt.

winget install OpenJS.NodeJS.LTS
node -v

macOS

Du kan installera med det officiella paketet eller Homebrew.

brew install node
node -v

Linux

Versionen i distributionens arkiv kan vara gammal; det är säkrare att installera med nvm.

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

04Skapa projektet med create-next-app

Guiden create next app är det officiella startverktyget och installerar alla nödvändiga paket på en gång. När du kör kommandot får du frågor om projektnamn och några alternativ; är du osäker är det en bra början att godta de rekommenderade standardvalen.

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

05Förstå App Router-strukturen

Next.js App Router skapar routingen utifrån mappstrukturen. Varje mapp under mappen app är ett adressled; filen page.tsx i mappen definierar sidan och layout.tsx definierar den delade ramen för den delen.

I App Router är komponenter som standard serverkomponenter: de körs på servern, kan hämta data direkt och skickar inget JavaScript till webbläsaren. Komponenter som behöver interaktion, som klick eller formulärtillstånd, gör du till klientkomponenter genom att skriva direktivet use client överst.

Metadata för SEO

Varje sida eller layoutfil kan definiera titel, beskrivning och Open Graph-taggar genom att exportera ett metadata-objekt. På dynamiska sidor används funktionen generateMetadata. Strukturen gör det enklare att hantera taggarna som behövs för SEO-anpassad webbdesign på sidnivå.

06Bygge och miljövariabler

Ta ett produktionsbygge med npm run build innan du publicerar. Byggresultatet listar om varje sida genereras statiskt eller dynamiskt; om en sida du inte väntade dig blir dynamisk är det ett tidigt tecken på onödig serverbelastning.

Miljövariabler sparas i filen .env.local. Bara variabler med prefixet NEXT_PUBLIC_ skickas till webbläsaren; databaslösenord och API-hemligheter ska sakna prefix och bara användas i serverkod.

npm run build
npm run start

07Hur ska varje sida genereras?

Next.js styrka är att du kan välja olika renderingsstrategi för varje sida. Fel val betyder antingen onödig serverkostnad eller inaktuellt innehåll; klassificera därför dina sidor efter typ direkt efter installationen.

Sidor som sällan ändras, som om oss, tjänster och kontakt, passar perfekt för statisk generering: de genereras en gång vid bygget och levereras från CDN på under en sekund. Nästan alla sidor på en företagswebbplats hör till den gruppen.

För sidor som uppdateras ibland, som blogg och produktlistor, är regenerering med jämna mellanrum (revalidate) en bra kompromiss. Användarspecifika paneler, varukorgar eller bokningsskärmar som visar tillgänglighet i realtid ska däremot genereras på servern vid varje förfrågan. Den sista gruppen är ett vanligt scenario i branschlösningar som hotell- och byråsystem och kräver att databas, cache och behörighetsdesign tänks ihop.

08Alternativ för Next.js-deploy

Det finns tre vanliga vägar för Next.js-deploy. Vilken du väljer beror på trafik, budget, var datan ligger och teamets erfarenhet av serverdrift.

• Vercel: Plattformen från företaget som utvecklar Next.js. Du kopplar arkivet, och för varje push skapas automatiskt ett bygge och en förhandsgranskningsadress.
• Din egen Node.js-server: Applikationen som körs med npm run start hålls igång av en processhanterare som PM2, med Nginx framför. Det ger full kontroll men underhållsansvaret ligger på dig.
• Statisk export: Med inställningen output: 'export' i filen next.config omvandlas sajten till rena HTML-filer. Dynamiska funktioner som kräver serverkomponenter fungerar inte i det läget.

Publicering med PM2 och Nginx

När du installerat Node.js på en Ubuntu-baserad server hämtar du projektet från arkivet, bygger det och startar det med PM2. PM2:s startup-kommando ber dig köra raden som skrivs ut på skärmen med sudo; den raden gör att applikationen startar automatiskt när servern startar om.

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

09Vanliga fel och lösningar

De flesta fel i Next.js-projekt beror på versionskonflikter eller på att server- och klientkod blandas ihop. Vid problem med pakethantering hjälper också guiden om npm-kommandon.