Next.js 14: – Det er ingen nye API-er!

De som var redde for å nok en gang måtte lære seg noe nytt, kan slappe av. Men Next.js 14 inneholder likevel flere spennende nyheter.

En av de største nyhetene i Next.js 14 er at det ikke er noe nytt. 📸: Skjermbilde, YouTube/Next.js Conf
En av de største nyhetene i Next.js 14 er at det ikke er noe nytt. 📸: Skjermbilde, YouTube/Next.js Conf Vis mer

Torsdag kveld norsk tid gikk Vercel-sjef og Next.js-skaper Guillermo Rauch på scenen på Next.js Conf og lanserte en ny hovedversjon av Next.js: Next.js 14.

Det er ett år siden Next.js 13 ble lansert, med en helt ny app-mappe – som er en ny filbasert ruter som på sikt skal erstatte den gamle pages-ruteren. Med app-mappen får du støtte for nye React-teknologier som React Server Components (RSC).

For utviklere har det betydd at det er mye nytt å lære seg, og det har vært mye frustrasjon over at ting ikke lenger fungerer som det skal – eller er vanskelig å forstå:

Tilhørerne i salen trakk nok derfor et lettelsens sukk da Guillermo Rauch i går kveld kunne annonsere:

– Next.js 14 har ingen nye API-er!

Server Actions

Vercel lanserer selvfølgelig ikke en ny hovedversjon uten at det er noe nytt.

En av de største nyhetene er at Server Actions nå er stabilt og klart for bruk i produksjon. Med Server Actions kan du definere en funksjon som kjører på serveren, og kalle den direkte fra React-komponenter som kan kjøre på klienten. Mens du tidligere typisk ville laget en API-rute i mappen /pages/api og gjøre en fetch mot API-ruten fra klientsiden, gjør Server Actions det mulig å forenkle alt sammen.

Du kan nå i React-komponenten din bare skrive 'use server' for å gi beskjed om at en funksjon skal kjøre på serveren. For eksempel slik:

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Server Actions er ifølge Vercel dypt integrert i hele App Router-modellen, og du har fått funksjoner for å revalidere cachede data, sette og lese cookies og en masse mer som du kan lese om her.

Skapt debatt

Denne måten å gjøre ting på har riktignok skapt en del diskusjoner i sosiale medier, og mange er bekymret for om det er trygt å legge kode du normalt ville lagt i en egen fil som kun inneholder serverkode, på klienten.

I tweeten over brukes for øvrig SQL Template Tags som gjør at du ikke skal være utsatt for SQL injection-angrep hvis "slug" plutselig skulle inneholde "DROP TABLE" eller noe sånt.

Når du også bruker 'use server' øverst i funksjonen skal du såvidt vi forstår være trygg på at ingenting i funksjonen lekker til klienten. Det blir som om all koden i funksjonen hadde ligget i en fil på serveren, og forhåpentligvis sørger Next.js for at det faktisk er slik.

Men hva om en utvikler glemmer å skrive 'use server' i en funksjon som bør kjøre på serveren og plutselig lekker API-nøkler, eller åpner for SQL injection-angrep eller lignende?

Over 5.000 integrasjonstester

Det var mye snakk om hvordan Next.js skulle bli enda raskere. Siden Next.js 13 har Vercel jobbet mye med å gjøre den lokale dev-serveren kjappere, enten man bruker den nye App-ruteren eller fortsatt holder seg til den gamle Pages-ruteren.

Tidligere har Vercel jobbet med å skrive om next dev og andre deler av Next.js for å få til dette. Vercels nye Rust-baserte kompilator er snart stabil, og selskapet har planer om å få alt over på denne etter hvert.

Dette vil først skje når alt i Next.js fungerer som det skal. Vercel har derfor skrevet 5689 (!) integrasjonstester for next dev, som de nå kjører mot Turbopack – den underliggende Rust-baserte bundleren som skal brukes i Next.js.

Det er fortsatt noen tester (i rødt) som feiler. Så snart alle er ok, vil Turbopack få status som stabil. 📸: Vercel / areweturboyet.com
Det er fortsatt noen tester (i rødt) som feiler. Så snart alle er ok, vil Turbopack få status som stabil. 📸: Vercel / areweturboyet.com Vis mer

Ved testing av vercel.com, som er en stor Next.js-applikasjon, har selskapet hittil oppnådd 53,3 prosent raskere oppstart av lokal devserver og opptil 94,7 prosent raskere kodeoppdateringer med Fast Refresh.

– Med en gang 100 prosent av testene passerer, vil Turbopack bli regnet som stabil i en kommende "minor release", skriver Vercel i et blogginnlegg.

Du kan følge med live på hvordan det går med integrasjonstestingen på areweturboyet.com. De er på godt over 90 prosent nå.

Delvis forhånds-rendring

Vercel annonserte også noen nye ting som er i forhåndsvisningsversjon (preview).

Med Partial Prerendering skal du kunne få en veldig rask statisk generert forhåndsvisning av en side. Og igjen – uten noen nye API-er du må lære, lover Vercel.

Partial prerendering benytter seg av React Suspense, og vil forhåndsrendre det du har definert som fallback. Så har du for eksempel et "skeleton" eller noe annet som fallback mens siden lastes, så kan dette leveres statisk fra serveren slik at brukeren opplever siden som raskere.

I nyeste versjoner av Next.js kan man imidlertid ha en loading.js-fil som automatisk viser deg for eksempel en spinner eller et "skeleton". Dette bruker React Suspense "under panseret", og isåfall er det ifølge Vercel ikke noe du behøver å endre i koden din for å bruke partial prerendering. Igjen: Ingen nye API-er.

Lanserer kurs i app-ruteren

Vercel har åpenbart lagt merke til hvor mye forvirring og frustrasjon det har vært blant utviklere relatert til den nye app-ruteren.

Derfor har selskapet lansert et nytt gratiskurs som tar deg gjennom hvordan du bygger en Next.js-app som bruker app-ruteren.

Kurset ser ved første øyekast ganske omfattende ut, og går gjennom blant annet hvordan du lager layouter, setter opp databaser, fetcher data i serverkomponenter, legger til autentisering, og så videre. Du lærer også om helt nye ting som "partial prerendering".

Alle presentasjonene fra Next.js Conf ligger for øvrig på YouTube:

Vis mer