Vad är Next.js? Skillnaden mot React

01Vad är Next.js?

Frågan vad är Next.js besvaras bäst tillsammans med React. React är ett bibliotek som låter dig bygga användargränssnitt med komponenter, men det innehåller inte allt som behövs för en hel webbplats. Next.js är ett ramverk, utvecklat av Vercel, som fyller i de delarna som saknas.

Beslut som var och när sidor ska genereras, hur adresser organiseras och hur bilder förminskas är redan lösta i Next.js. Utvecklaren behöver inte bygga den infrastrukturen från grunden utan kan fokusera direkt på produkten.

Om du ännu inte kan Reacts grundbegrepp, titta först på vår artikel vad är React; sidorna du skriver i Next.js är trots allt React-komponenter.

02Skillnaden mellan Next.js och React

Kort sagt: React är ett bibliotek, Next.js är ett ramverk byggt på React. De är inte konkurrenter; varje projekt som använder Next.js använder också React. Skillnaden ligger i vem som tar hand om resten av projektet.

Tabellen nedan sammanfattar de typiska skillnaderna mellan en ensidig applikation som byggts bara med React och ett Next.js-projekt:

03Vad är server side rendering?

Server side rendering (SSR) betyder att sidans HTML genereras på servern i stället för i användarens webbläsare och skickas färdig. Besökaren ser innehållet direkt; sidan blir interaktiv allteftersom JavaScript laddas.

Motsatsen är rendering på klientsidan: servern skickar en nästan tom sida och en stor JavaScript-fil, och innehållet byggs upp i webbläsaren. På en snabb dator märks det kanske inte, men på en svag telefon och en långsam mobilanslutning dröjer det märkbart innan det första innehållet syns.

Next.js erbjuder inte bara SSR; du kan välja olika genereringssätt per sida. Rätt metod beror på hur ofta innehållet ändras.

Statisk generering (SSG)

Sidan genereras en gång när projektet byggs och levereras som en fil. För innehåll som sällan ändras, som om oss, tjänster och bloggsidor, är det den snabbaste och billigaste metoden.

Inkrementell regenerering (ISR)

Den statiska sidan genereras om i bakgrunden med de intervall du bestämmer eller när den utlöses. Det är en balanserad lösning för ändringar som är frekventa men inte omedelbara, som en produktkatalog.

Rendering vid förfrågan och på klientsidan

Personliga data eller data som ändras hela tiden (kontosidor, lagersaldo i realtid) genereras på servern vid förfrågan. Små delar som bara kräver interaktion körs i webbläsaren.

04Varför är Next.js bra för SEO?

När sökmotorer läser en sida föredrar de färdig HTML. I en React-applikation där innehållet bara byggs i webbläsaren ser sökroboten först ett tomt skal; innehållet dyker upp först när JavaScript har körts. I Next.js kommer däremot rubriker, texter och länkar färdiga från servern.

Next.js erbjuder dessutom en metadata-struktur som gör det enkelt att hantera titel, beskrivning och taggar för delning i sociala medier för varje sida. Teknisk SEO som strukturerad data, sitemap och kanoniska adresser kan också hållas ordnade i koden.

Ändå ger ett ramverk inte ranking på egen hand. Informationsarkitektur, innehållskvalitet och intern länkning är avgörande; SEO-anpassad webbdesign planerar de faktorerna tillsammans med den tekniska infrastrukturen. Efter lansering behövs arbete med mätning och förbättring inom SEO och analys.

05Prestanda och Core Web Vitals

Next.js gör det enklare att skapa snabba sidor med verktyg som automatisk koduppdelning, bildkomponent, typsnittsoptimering och cachning. Varje sida laddar bara det JavaScript den behöver.

Gränsvärdena för Core Web Vitals som Google mäter är definierade som LCP ≤ 2,5 s, INP ≤ 200 ms och CLS ≤ 0,1. Next.js gör det lättare att nå de målen men garanterar dem inte; stora bilder, tredjepartsskript och onödig klientkod kan dra ner poängen.

Därför är mätning före och efter lansering ett måste. I arbetet med hastighet och prestanda följs fältdata och flaskhalsar åtgärdas en och en.

06Vilka projekt passar Next.js för?

Next.js glänser i projekt där innehåll och interaktion är lika viktiga. Det är ett starkt val om du vill få trafik från sökmotorer och samtidigt erbjuda en rik användarupplevelse.

• Kataloger med många produkt- eller annonssidor
• Bloggar och innehållssajter; särskilt tillsammans med ett headless innehållshanteringssystem
• Kampanj- och produktpresentationssidor
• Sajter med medlemsinloggning och personlig panel
• Produkter som är både marknadsföringssida och applikationsvy

När behövs det inte?

För en presentationssajt med några få sidor eller en enda kampanjsida kan Next.js bli för mycket. En snabb design av landningssidor med enkel HTML och CSS kräver oftast mindre underhåll. Vill du skilja innehållsteamet från utvecklingsteamet beskriver vår artikel vad är ett headless CMS den moderna arkitekturen som byggs med Next.js.

07Vanliga misstag i Next.js-projekt

Next.js förenklar många beslut, men vissa fällor är vanliga i nya team. Att känna till dem från början förhindrar dyra rättelser i efterhand.

• Att göra varje komponent till en klientkomponent: Delar som inte kräver interaktion ska stanna på servern; annars skickas onödigt JavaScript till webbläsaren.
• Att hämta data utan att förstå cachen: Om det inte bestäms hur länge datan ligger i cachen kan användaren se ett gammalt pris eller ett gammalt lagersaldo.
• Att ladda bilder utan optimering: Om den färdiga bildkomponenten inte används förlänger stora filer LCP-tiden.
• Att läcka hemliga nycklar till klienten: API-nycklar som bara ska användas på servern får inte hamna i kod som går till webbläsaren.
• Att skjuta upp versionsuppgraderingar: Ramverket utvecklas snabbt; i ett projekt som inte uppdaterats på länge blir uppgraderingen plötsligt ett stort jobb.

08Komma igång med Next.js

Innan du börjar behöver du kunna grunderna i JavaScript och Reacts komponentlogik; för språkdelen är artikeln vad är JavaScript en bra början. Den aktuella LTS-versionen av Node.js ska vara installerad på datorn.

Det officiella installationsverktyget förbereder ett nytt projekt med några frågor: det frågar efter alternativ som TypeScript, stilverktyg och mappstruktur. Följ dokumentationen på nextjs.org för aktuella instruktioner.

• Utvecklingsservern öppnas som standard på adressen http://localhost:3000.
• Varje undermapp i mappen app motsvarar en adress; filen page är den adressens innehåll.
• Innan du går live tar du ett produktionsbygge med npm run build och kontrollerar felen.

npx create-next-app@latest ilk-next-projem
cd ilk-next-projem
npm run dev