Next.js: Gjør (nesten) nettsiden din om til en app

Jakten på den app-lignende følelsen

Husker du hvordan det var å surfe på nettet i 2007? Hver gang du klikket på noe, måtte hele siden laste inn på nytt. Det var som å prøve å danse tango i gjørme—tregt og lite grasiøst.

Som vi diskuterte i blogginnlegg vårt, "Forskjellen på apper og nettsider? Forsvinnende lite" , så er det ikke slik lenger.

Med mindre du har et elendig internett, vil mange nettsider nå reagere umiddelbart når du trykker på noe. Flytende overgang mellom sider, elementer som "popper" inn og ut med animasjoner på en grasiøs måte og rask responstid har blitt mer og mer vanlig. Mer som en app, med andre ord.

Fra gamle dager til nå

For å oppnå denne lynraske app-lignende følelsen i "gode gamle dager" (altså 4-6 år siden i internett-tid) så brukte man gjerne en løsning der brukeren måtte vente på at all koden skulle laste inn først.

Om du bare fikk brukeren til å holde ut den første innlastingstiden, så kunne de få en lynrask og app-lignende opplevelse på en nettside.

Ulempen? Det er kjedelig å måtte vente 3-6 sekunder før du kommer inn på en nettside, og det fungerte dårlig om du også hadde ambisjoner om at kunder skulle finne deg i søkeresultatene til Google.

Next.js: Et kompromiss mellom app-lignende følelse, SEO og rask lastetid

Før 2016 så måtte mange utviklere ta et ganske dramatisk valg når de skulle lage en ny nettside: Skal du få en lynrask og app-lignende opplevelse, men ofre SEO og utsette brukeren for en treig innlasting i starten? Eller er det viktigere å prioritere SEO og den første lastetiden?

Det ble langt enklere i 2016: For Next.js ble lansert, og gjorde at du slapp dette kompromisset.

Hva er Next.js?

Kort fortalt er Next.js et rammeverk som hjelper utviklere med å lage moderne og raske nettsider. Men du trenger ikke å vite hva et rammeverk er for å dra nytte av fordelene. Tenk på Next.js som en dyktig dirigent som får orkesteret (nettsiden din) til å spille harmonisk og uten forsinkelser.

Superhelten som gir i pose og sekk

I dette teknologiske landskapet kom Next.js fram som en slags superhelt uten kappe. Den kombinerer det beste fra begge verdener: den flytende, app-lignende opplevelsen vi elsker, og den raske lastetiden og SEO-vennligheten som tradisjonelle nettsider tilbyr.

Hvordan fungerer det?

Uten å drukne deg i detaljer kan vi si at Next.js bruker noe som kalles server-side rendering. Det betyr at mye av jobben med å bygge siden skjer på serveren før den sendes til brukeren.

Resultatet? Raskere lastetider og bedre opplevelser for besøkende, selv om de sitter på en treig kaffebar-WiFi.

Smarte måter å kombinere ulike teknologier på gjør at man likevel kan oppnå en app-lignende følelse på siden.

Fordelene med Next.js

Lynrask ytelse i verdensklasse

Ytelse er essensielt for brukeropplevelsen og synligheten i søkemotorer. Mindre venting gir gladere brukere. Ingen liker å stirre på en snurrende lastesirkel.

Dette er selvfølgelig også den største fordelen for NextJS.

​NextJS er bygget for hastighet fra bunnen av:

• Automatisk kode-splitting sikrer at kun nødvendig kode lastes for hver side
• Innebygd støtte for serverside-rendering gir raskere første sidevisning og bedre SEO
• Smarte forhåndsinnlastingsteknikker henter data i bakgrunnen for umiddelbar visning
• Innebygget CDN gir lynrask levering av innhold global.

Dette betyr at brukerne får silkemyke opplevelser med minimalt med ventetid, uansett enhet eller nettverkshastighet. Og søkemotorer elsker raske sider, noe som gir dere en stor fordel i kampen om synlighet.

App-lignende opplevelse

Som et resultat av den raske lastetiden blir det også enklere å skape "app-lignende" opplevelser. Lav terskel til å skape sømløs navigering og interaktive elementer kan bidra til å sørge for at nettsiden siden din føles moderne og engasjerende.

Bedre SEO

Når siden din er rask og strukturen er optimalisert, blir det lettere for Google å finne og rangere den. Sammenlignet med tilsvarende løsninger er NextJS blant de beste på å legge til rette høy rangering i søkemotorer.

Et kraftig verktøy som raskt vil lønne seg for de med avanserte behov nå (eller i fremtiden)

La oss (ganske kraftig) forenkle hvordan en nettside er bygget opp.

Den delen av en nettsiden du kan se og interagere med kalles som regel "front-end". Når du leser denne artikkelen på vår nettside, så ser du på "front-enden" til nettsiden vår.

"Back-end" beskriver den delen av siden som gjør mye av den "skjulte" logikken som brukeren ikke interagerer med direkte. Når du vil opprette en bruker på en nettside fyller du inn kontaktinfoen din i et skjema i "front-end", før det vil lastes opp til "back-enden" og lagres her.

NextJS kan håndtere kraftige utfordringer i et og samme rammeverk

De mest populære verktøyene for å bygge nettsider er ofte gode på det å bygge "front-end" til nettsiden.

Men om du har litt mer komplekse problemer, så må man ofte utvide nettsideløsningen med et tredjepartssystem eller legge til et separat rammeverk som kan ta seg av de mer avanserte utfordringene.

Til sammenligning er NextJS et svært kraftig verktøy som både er god på å bygge enkle nettsider, men som også kan håndtere mer komplekse og tyngre utfordringer – uten at du må utvide med et nytt system.

Det virker kanskje litt fjernt nå, men kan gi enorme fordeler i fremtiden om man ønsker å utvide løsningen til å for eksempel:

• Legge til en nettbutikk
• Gi medlemmer mulighet til å logge seg inn på "min side"
• Utvide nettsideløsningen til å inkludere et intranett
• Bygge et søknadshåndteringssystem i samme løsning som nettsiden

En stor fordel med å lene seg på et kraftig verktøy er nettopp man kan spare mye tid den dagen man møter på mer komplekse utfordringer, fremfor at man må begynne helt på nytt – fordi nettsideløsningen ikke takler slike problemer.

Et gratis open source rammeverk brukt av svært tunge aktører

NextJS har (som mange andre web-rammeverk) åpen kildekode.

Blant de mange fordelene som ofte kommer med å bruke open-source løsninger, er nok den største at det er helt gratis å bruke.

Hvem betaler for lunsjen?

I utviklerverden er det dessverre alltid en risiko å satse på open source verktøy som ikke har mange bidragsytere bak seg, da det å holde et rammeverk oppdatert og sikkert krever mye tid.

Derfor er lett å bli skeptisk når man hører at et så kraftig verktøy er gratis. "There's no such thing as a free lunch", selvfølgelig.

Driftet av Vercel

NextJS er heldigvis ikke avhengig av godviljen til en svett nerd som ofrer fritiden sin for å drifte og opprettholde prosjektet gratis.

Det er nemlig hostingselskapet Vercel som har laget NextJS (og som eier varemerket).

De fleste som bygger nettsider trenger jo en server der nettsiden kan ligge lagret – og Vercel har gjort det svært kostnadseffektivt og enkelt å velge dem når man bruker NextJS.

Vercel har dermed tiltrukket seg investeringer på ca. 560 millioner dollar takket være Next.js. Altså over 6.1 milliarder i norske kroner (!).

Dermed er det ikke så rart at et så stort selskap som Vercel store deler av tiden til sine ca 570 ansatte til å drifte og videreutvikle et helt gratis produkt.

Store og kjente bidragsytere både bruker og har bidratt til prosjektet

Selv om prosjektet primært er styrt av et privat selskap, så er det likevel open source – noe som betyr at kildekoden ligger åpent tilgjengelig for de som vil bidra.

Blant selskapene som har bidratt til å enten bruke eller forbedre NextJS finner man blant annet Google, Apple, Nike, Netflix, TikTok, Uber, Lyft, Starbucks, Spotify, GoDaddy, Hulu og Ticketmaster for å nevne noen.

Når så mange store aktører lener seg på NextJS, så kan du være trygg på at det er en løsning som kommer til å bli nøye ivaretatt og kvalitetssikret i årene fremover.

Er Next.js riktig for deg?

Hvis du ønsker en nettside som kombinerer det beste fra apper og tradisjonelle nettsider, kan Next.js være veien å gå. Det trenger ikke å være komplisert eller skummelt. Med riktig verktøy og litt ekspertise kan du gi brukerne dine en opplevelse som skiller seg ut.