Hva er Next.js? Forskjellen fra React

01Hva er Next.js?

Svaret på hva Next.js er, er best å gi sammen med React. React er et bibliotek som lar deg bygge brukergrensesnittet med komponenter, men det har ikke alt som trengs for en hel nettside. Next.js er et rammeverk, utviklet av Vercel, som fyller ut de manglende delene.

Beslutninger som hvor og når sidene skal genereres, hvordan adressene organiseres og hvordan bildene skal komprimeres, er lagt til rette på forhånd i Next.js. Utvikleren slipper å bygge denne infrastrukturen fra bunnen og kan konsentrere seg om selve produktet.

Kjenner du ikke React-grunnbegrepene ennå, kan du først lese artikkelen vår hva er React; sidene du skriver i Next.js er tross alt også React-komponenter.

02Forskjellen på Next.js og React

Kort sagt: React er et bibliotek, mens Next.js er et rammeverk bygget på React. De to er ikke konkurrenter; hvert prosjekt som bruker Next.js, bruker også React. Forskjellen er hvem som tar seg av resten av prosjektet.

Tabellen under oppsummerer de typiske forskjellene mellom en enkeltsideapplikasjon bygget bare med React og et Next.js-prosjekt:

03Hva er server side rendering?

Server side rendering (SSR) betyr at HTML-en til siden genereres på serveren, ikke i brukerens nettleser, og sendes ferdig. Den besøkende ser innholdet med en gang, og siden blir interaktiv etter hvert som JavaScript lastes.

Motsatsen er rendering på klientsiden: serveren sender en nesten tom side og en stor JavaScript-fil, og innholdet bygges i nettleseren. På en rask datamaskin merker du kanskje ikke forskjellen, men på en svak mobil og med tregt mobilnett blir det tydelig forsinkelse før det første innholdet vises.

Next.js tilbyr ikke bare SSR; du kan velge ulike genereringsmetoder per side. Riktig metode avhenger av hvor ofte innholdet endres.

Statisk generering (SSG)

Siden genereres én gang når prosjektet bygges, og leveres som en fil. For innhold som sjelden endres, som Om oss, tjenester og bloggsider, er dette den raskeste og billigste metoden.

Inkrementell regenerering (ISR)

Den statiske siden genereres på nytt i bakgrunnen med intervallene du bestemmer, eller når den utløses. En balansert løsning for endringer som er hyppige, men ikke øyeblikkelige, som en produktkatalog.

Rendering ved forespørsel og på klientsiden

Personlige data eller data som endres hele tiden (kontosider, lager i sanntid) genereres på serveren ved forespørsel. Små deler som bare trenger interaksjon, kjører i nettleseren.

04Hvorfor er Next.js en fordel for SEO?

Søkemotorer foretrekker ferdig HTML når de leser en side. I en React-applikasjon der innholdet bare bygges i nettleseren, ser søkeboten først et tomt skjelett; innholdet dukker først opp etter at JavaScript har kjørt. I Next.js kommer derimot overskrifter, tekster og lenker ferdige fra serveren.

Next.js har i tillegg en metadata-struktur som gjør det enkelt å styre tittel, beskrivelse og tagger for deling i sosiale medier for hver side. Teknisk SEO som strukturerte data, nettstedskart og kanoniske adresser kan også holdes ryddig i koden.

Likevel gir ikke rammeverket alene rangering. Informasjonsarkitektur, innholdskvalitet og interne lenker avgjør; SEO-vennlig webdesign planlegger disse elementene sammen med den tekniske infrastrukturen. Etter lansering trengs det måling og forbedring gjennom SEO og analyse.

05Ytelse og Core Web Vitals

Next.js gjør det enklere å lage raske sider med verktøy som automatisk kodedeling, bildekomponent, fontoptimalisering og bufring. Hver side laster bare JavaScript-en den trenger.

Terskelverdiene for Core Web Vitals som Google måler, er definert som LCP ≤ 2,5 s, INP ≤ 200 ms og CLS ≤ 0,1. Next.js gjør det lettere å nå disse målene, men garanterer det ikke; store bilder, tredjepartsskript og unødvendig klientkode kan trekke poengene ned.

Derfor er måling nødvendig både før og etter lansering. I arbeidet med hastighet og ytelse følges feltdata, og flaskehalsene fjernes én etter én.

06Hvilke prosjekter passer Next.js for?

Next.js glimrer i prosjekter der innhold og interaksjon er viktige sammen. Vil du både få trafikk fra søkemotorer og gi en rik brukeropplevelse, er det et sterkt valg.

• Kataloger med mange produkt- eller annonsesider
• Blogger og innholdssider; særlig sammen med et headless innholdsstyringssystem
• Kampanje- og produktpresentasjonssider
• Nettsteder med medlemsinnlogging og personlig panel
• Produkter som både har markedsføringssider og applikasjonsskjermer

Når trenger du det ikke?

For en presentasjonsside på noen få sider eller en enkelt kampanjeside kan Next.js bli for mye. Et raskt landingsside-design med enkel HTML og CSS krever ofte mindre vedlikehold. Vil du skille innholdsteamet fra utviklingsteamet, forklarer artikkelen vår hva er headless CMS den moderne arkitekturen bygget med Next.js.

07Vanlige feil i Next.js-prosjekter

Next.js forenkler mange beslutninger, men noen feller går igjen hos nye team. Å kjenne dem på forhånd forhindrer dyre utbedringer senere.

• Å gjøre alle komponenter til klientkomponenter: Deler som ikke trenger interaksjon, bør bli på serveren; ellers sendes unødvendig JavaScript til nettleseren.
• Å hente data uten å forstå bufringen: Hvis det ikke bestemmes hvor lenge dataene skal ligge i bufferen, kan brukeren se gammel pris eller gammelt lager.
• Å laste inn bilder uten optimalisering: Hvis den ferdige bildekomponenten ikke brukes, forlenger store filer LCP-tiden.
• Å lekke hemmelige nøkler til klienten: API-nøkler som bare skal brukes på serveren, må ikke havne i koden som sendes til nettleseren.
• Å utsette versjonsoppgraderinger: Rammeverket utvikler seg raskt; i et prosjekt som ikke oppdateres på lenge, blir oppgraderingen plutselig en stor jobb.

08Slik kommer du i gang med Next.js

Før du begynner, bør du kunne grunnleggende JavaScript og komponenttankegangen i React; for språkdelen er artikkelen hva er JavaScript en god start. Gjeldende LTS-versjon av Node.js må være installert på maskinen.

Det offisielle installasjonsverktøyet setter opp et nytt prosjekt med noen få spørsmål: det spør om valg som TypeScript, stilverktøy og mappestruktur. Følg dokumentasjonen på nextjs.org for oppdaterte retningslinjer.

• Utviklingsserveren åpnes som standard på adressen http://localhost:3000.
• Hver undermappe i app-mappen svarer til en adresse; page-filen er innholdet på den adressen.
• Før publisering lager du en produksjonsbygging med npm run build og kontrollerer feilene.

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