Next.js – når det er riktig valg, og når du bør velge noe annet

Definisjon

Next.js er et open source-rammeverk for React-baserte nettsider og applikasjoner, utviklet av Vercel siden 2016. Det er de facto-standarden for seriøse React-baserte produktnettsider.

Next.js er et open source-rammeverk for å bygge moderne nettsider og applikasjoner oppå React. Det utvikles av Vercel (som også er den viktigste kommersielle hostingplattformen), og siden lanseringen i 2016 har det utviklet seg fra et enkelt SSR-rammeverk til en omfattende fullstack-plattform med støtte for alt fra statiske sider til serverrendrede applikasjoner, edge-funksjoner og KI-funksjoner.

Next.js er i dag de facto-standarden for seriøse React-baserte produktnettsider. Det er også et rammeverk der kompleksiteten har økt betydelig de siste årene, noe som har gjort det til et mer kompetent, men mindre lettbrukt verktøy enn det var i 2020.

Slik er Next.js bygget opp

Next.js bygger på filbasert routing – strukturen i app/-mappen tilsvarer URL-strukturen i nettleseren. Siden versjon 13 (2022) finnes App Router som et supplement til den eldre Pages Router. App Router introduserer:

• React Server Components som standard – komponenter rendres på serveren og sender minimalt med JavaScript til klienten.
• Streaming SSR – sider kan begynne å leveres til nettleseren før alle data er hentet.
• Layouts og nested routes som består på tvers av navigeringer.
• Server Actions – skjemaer og operasjoner som endrer data, kan håndteres direkte på serversiden uten å skrive egne API-ruter.

Renderingsmodeller som Next.js støtter:

• Static Site Generation (SSG) – sider bygges ved build-tid.
• Server-Side Rendering (SSR) – sider rendres ved hver forespørsel.
• Incremental Static Regeneration (ISR) – sider er statiske, men bygges på nytt inkrementelt etter regler.
• Client-Side Rendering – når det trengs.
• Edge Rendering – kjøres på Vercels (eller Cloudflares) edge-noder nærmere brukeren.

At man kan velge mellom disse per rute, er både styrken til Next.js og ofte kilden til komplikasjoner.

Hva Next.js er godt på

• Allsidighet. Få rammeverk dekker et like bredt spekter av bruksområder. Markedsside med 50 statiske sider? Fungerer. SaaS-dashboard med tusenvis av dynamiske ruter? Fungerer. Netthandel med ISR og personalisering på edge? Fungerer.
• React-økosystemet. Next.js bygger på React, noe som betyr at du har tilgang til hele React-verdenen – UI-biblioteker, state management, skjemahåndtering, animasjonsbiblioteker, integrasjoner.
• Server Components. App Router og Server Components er, når de fungerer godt, et skikkelig steg fremover. JavaScript-mengden som sendes, reduseres dramatisk sammenlignet med tradisjonell React.
• Vercel-integrasjonen. For team som drifter på Vercel, er opplevelsen sømløs – forhåndsvisninger per branch, edge-funksjoner, bildeoptimalisering, analyse.
• Sterk TypeScript-støtte. Førsteklasses.
• Moden dokumentasjon og stort fellesskap.

Hvor Next.js har blitt komplekst

• App Router og Pages Router parallelt. Siden App Router kom, har Next.js kunnet kjøre begge mønstrene samtidig. Det betyr to måter å løse det samme problemet på.
• Caching-modellen. Caching i App Router er kraftig, men forvirrende. Datacaching, request memoization, route segment cache, full route cache, router cache – det finnes flere nivåer som virker inn på hverandre.
• Server Components vs. Client Components. Å vite hvilke komponenter som kjører hvor, og hvordan de kan kommunisere, krever en mental modell som er ny for mange React-utviklere.
• Versjonstempo. Next.js tar større versjonshopp omtrent hver 12.–18. måned. Migreringene er ikke trivielle.
• JavaScript-mengden kan bli stor. Next.js sender mer JavaScript til nettleseren enn Astro eller statiske HTML-bygg. Det kan optimaliseres, men krever disiplin.

Når vi anbefaler Next.js

Hos SEOS Design anbefaler vi Next.js når:

• Nettsiden er (eller skal bli) en applikasjon, ikke bare en markedsside.
• Komplekse dynamiske flyter – innlogging, betalinger, dashboards, sanntid – står på veikartet.
• Teamet er React-basert og har erfaring med eller vilje til å lære Server Components-modellen.
• Hosting på Vercel eller en lignende plattform er valgt eller vurderes.
• Headless CMS-et har gode Next.js-integrasjoner (noe som gjelder Sanity, Contentful, Storyblok m.fl.).

Hvordan et slikt bygg foregår i praksis, beskriver vi i guiden om KI-assistert webutvikling med Next.js og headless CMS.

Vi anbefaler noe annet når nettsiden først og fremst er innhold og ytelse er viktigst (da er Astro ofte bedre), når teamet er Vue-basert (da er Nuxt mer naturlig), når det er en markedsside der visuell redigering og rask levering veier tyngst – da er Webflow ofte riktig valg – eller når budsjettet og kompetansen er begrenset.

Next.js vs. React – hva er forskjellen?

React er biblioteket, Next.js er rammeverket rundt det. React håndterer komponenter og rendering av brukergrensesnitt, men tar ikke stilling til routing, datahenting eller hvordan sider leveres til nettleseren. Next.js fyller ut resten: filbasert routing, renderingsmodeller (SSG, SSR, ISR), bildeoptimalisering, håndtering av metadata og API-ruter.

Spørsmålet er derfor sjelden «Next.js eller React» – velger du Next.js, får du React på kjøpet. Det egentlige spørsmålet er om du trenger rammeverkets struktur, eller om et rent React-bygg holder, for eksempel en applikasjon bak innlogging der søkemotorer aldri skal indeksere innholdet.

Next.js vs. Astro – kort

• Next.js for applikasjoner, dashboards, netthandel, dynamiske SaaS-produkter og nettsteder der samme stack skal drive både markedsside og produkt.
• Astro for innholdstunge nettsteder – blogger, dokumentasjon, kunnskapsbanker, programmatisk SEO, markedssider uten tunge interaktive deler.

Mange byråer jobber med begge og velger per prosjekt – det gjør vi også. Valget av rammeverk henger dessuten ofte sammen med valget av innholdsarkitektur – mer om det i guiden vår om CMS for store bedrifter.

Hvilket CMS passer til Next.js?

Next.js brukes nesten alltid sammen med et headless CMS. Sanity, Contentful og Storyblok har alle førsteklasses Next.js-integrasjoner – offisielle SDK-er, forhåndsvisning av utkast og støtte for ISR, slik at innholdsoppdateringer publiseres uten at hele nettstedet bygges på nytt. Valget mellom dem handler mer om redaktøropplevelse, prismodell og hvor kompleks innholdsmodellen er, enn om teknisk kompatibilitet.

Vurderer du Next.js med headless CMS for din neste hjemmeside? Les om hvordan vi jobber med webutvikling på tjenestesiden vår.

Next.js og SEO

Next.js er fullt ut SEO-kapabelt – men det krever at man gjør de riktige tingene. Her er de vanligste fallgruvene:

• Klientrendret innhold blir oversett. Hvis kritisk innhold rendres i en «use client»-komponent som avhenger av data hentet etter mount, ser Google det kanskje ikke. Løs det ved å hente data i en Server Component og sende dem ned som props.
• Metadata via klienten. generateMetadata-API-et er der metadata hører hjemme. Setter du title og metabeskrivelse via JavaScript på klienten, vil det fungere for noen crawlere og ikke for andre.
• Caching-konflikter. Caches en side der den ikke burde – eller ikke caches der den burde – kan det føre til at gammel informasjon blir liggende i Googles indeks, eller at det oppstår duplisert innhold.
• Lighthouse-poeng. Next.js-nettsteder kan lande på utmerkede Lighthouse-poeng, men ikke automatisk. Image-komponenten, fontoptimalisering, bundle splitting – alt må være bevisst konfigurert.
• Strukturert data. Enkelt å legge inn som et script-element med type="application/ld+json" i layouts eller per rute.
• Internasjonalisering. Next.js har innebygd i18n-støtte. Å kombinere det med riktig hreflang og canonical krever disiplin, men er fullt gjennomførbart.
• Sitemap og robots. I App Router genereres disse via sitemap.ts og robots.ts.

Vanlige SEO-feller med Next.js

Dette er kjente mønstre i Next.js-prosjekter:

• Nettsteder som migrerer til Next.js fra en enklere stack og mister rangeringer i 2–3 måneder på grunn av tekniske SEO-feil som ikke ble fanget opp i bygget – hvordan du unngår det, går vi gjennom i guiden om å migrere nettside uten å miste rangeringer.
• ISR-strategier som gjør at oppdatert innhold vises for brukerne, men ikke for Google på dager eller uker.
• Server Components som kaller dyre API-er per forespørsel og driver opp svartidene på sider Google henter ofte.

Ingenting av dette er innebygde feil i Next.js. Det er konsekvenser av at rammeverket er kraftig nok til å tillate feil som enklere rammeverk ikke ville tillatt.

Oppsummering

Next.js er bransjestandarden for React-baserte produktnettsider og applikasjoner. Det er allsidig, kraftig og har det største økosystemet – men det er også et komplekst rammeverk som krever at man forstår Server Components, caching og renderingsmodeller i dybden. For applikasjoner og dynamiske nettsider er det ofte riktig valg. For rene innholdsnettsteder der ytelse er viktigst, bør du vurdere Astro. Som med alle moderne rammeverk: SEO blir bra når noen bevisst sørger for at den blir det. Next.js gjør det fullt mulig, ikke automatisk.