Vad är Next.js?
Next.js är ett verktyg för att bygga webbplatser och webbappar som laddar snabbt och syns på Google. Det bygger vidare på React, ett populärt sätt att bygga själva gränssnittet, och lägger till allt runt omkring som en riktig webbplats behöver: hur sidorna kopplas ihop, hur data hämtas, hur bilder optimeras och hur allt levereras snabbt till besökaren.
Vad är det, kort förklarat?
En webbplats består av mer än det du ser. Bakom kulisserna krävs en mängd beslut: hur sidorna länkas ihop, hur snabbt de laddar, hur Google läser dem och hur de fungerar på både mobil och dator. Next.js är ett färdigt fundament som löser den delen åt utvecklaren. I stället för att bygga grunden från början i varje nytt projekt får teamet en beprövad bas och kan lägga tiden på det som gör just er sajt bra.
För dig som inte kodar betyder det i praktiken en snabbare sajt, en bättre placering i sökresultaten och en kodbas som håller över tid och är lätt för nya utvecklare att ta över.
React, fast redo för produktion
React löser en sak bra: att bygga interaktiva gränssnitt i JavaScript. Men React berättar inte hur du hanterar routing, hur du hämtar data, hur du optimerar bilder eller hur du strukturerar ett projekt med flera sidor. Det är upp till dig att sätta ihop ett ekosystem av bibliotek och ta hundratals beslut som alla team löser lite olika.
Next.js tar de besluten åt dig. Du får en sammanhängande lösning där routing, rendering, datahämtning och driftsättning fungerar tillsammans från start. Samma React du redan känner, men med opinionerade standarder som faktiskt håller i stora projekt.
Med bara React
Med Next.js
Vad ingår?
Next.js är ett fullstack-ramverk i den meningen att det hanterar både det som visas i webbläsaren och det som körs på servern. De viktigaste delarna:
App Router
Sidstrukturen följer hur du organiserar dina filer
Lägg till en mapp i projektet och du har en ny sida. Ingen separat konfigurationsfil behövs.
Server Components
Mindre kod skickas till besökarens webbläsare
Kod som inte behöver köras hos besökaren stannar på servern. Sidan laddar snabbare.
Statisk generering
Sidor som är klara redan innan någon besöker dem
Sidor byggs i förväg och serveras direkt. Billigt att drifta och snabbt att ladda.
Server-side rendering
Innehåll som alltid är aktuellt vid varje besök
Passar sidor med personaliserat innehåll eller data som uppdateras ofta.
Bildoptimering
Bilder som automatiskt anpassas till varje enhet
Rätt storlek och format levereras automatiskt, oavsett om besökaren är på mobil eller desktop.
Route Handlers
Inbyggd möjlighet att ta emot och skicka data
Formulär, betalningar och integrationer kan hanteras direkt i projektet utan ett separat system.
Hur ser Google din webbplats?
Många moderna webbplatser byggs på ett sätt där webbläsaren gör allt arbete: servern skickar en i princip tom sida, och sedan konstrueras innehållet i besökarens webbläsare. Det fungerar fint för den mänskliga besökaren, men Googles robot väntar inte. Den ser ofta den tomma sidan och indexerar ingenting.
Next.js löser det genom att skicka den färdiga sidan direkt från servern. Google ser samma innehåll som din besökare, vilket är en grundförutsättning för att kunna ranka högt i sökresultaten. Samtidigt kan sidan ändå ha interaktiva delar, som menyer, formulär och filter, precis som vanligt.
Googles mätpunkter för sidprestanda påverkar direkt hur högt din sida rankas i sökresultaten. Next.js är byggt med dessa mätvärden i åtanke och automatiserar många av de optimeringar som annars kräver manuellt arbete.
Vem använder Next.js?
Next.js används av företag i nästan alla branscher, från nystartade startups till globala mediebolag. Det är ett av de mest använda webbramverken i världen och har ett aktivt ekosystem med frekventa uppdateringar.
När passar Next.js?
Next.js är ett bra val i de flesta webbprojekt där React är ett rimligt val, men det är inte rätt verktyg i alla lägen.
Passar bra
Mindre lämpligt
Next.js och Vercel
Next.js skapades av Vercel, ett amerikanskt företag som också driver en molnplattform optimerad för Next.js-applikationer. Ramverket är open source under MIT-licensen och kan driftsättas var som helst: Vercel, Netlify, en VPS, eller som statiska filer på valfri CDN.
Vercel bidrar med det mesta av den aktiva utvecklingen och sätter den övergripande riktningen för ramverket. Det är bra att känna till, men i praktiken är Next.js ett moget och stabilt verktyg med ett brett ekosystem som inte är beroende av Vercels hostingplattform.
Vad vill du göra härnäst?
Next.js och relaterade varumärken, designer och logotyper är varumärken eller registrerade varumärken tillhörande Vercel, Inc. nextjs.nu är inte affilierad med eller godkänd av Vercel.