Vad är Next.js?
Next.js är ett open source-ramverk byggt ovanpå React som lägger till det React saknar: routing, serverrendering, bildoptimering och ett strukturerat sätt att bygga hela webbapplikationer, inte bara gränssnitt.
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.
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:
Sidstrukturen följer hur du organiserar dina filer
App Router
Lägg till en mapp i projektet och du har en ny sida. Ingen separat konfigurationsfil behövs.
Mindre kod skickas till besökarens webbläsare
Server Components
Kod som inte behöver köras hos besökaren stannar på servern. Sidan laddar snabbare.
Sidor som är klara redan innan någon besöker dem
Statisk generering
Sidor byggs i förväg och serveras direkt. Billigt att drifta och snabbt att ladda.
Innehåll som alltid är aktuellt vid varje besök
Server-side rendering
Passar sidor med personaliserat innehåll eller data som uppdateras ofta.
Bilder som automatiskt anpassas till varje enhet
Bildoptimering
Rätt storlek och format levereras automatiskt, oavsett om besökaren är på mobil eller desktop.
Inbyggd möjlighet att ta emot och skicka data
Route Handlers
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.
Core Web Vitals är Googles mätpunkter för sidprestanda och 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.
Det finns situationer där Next.js är mer ramverk än du behöver:
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 värt att ha i åtanke, 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.