Så er Next.js 14 her
Ingen nye funktioner – kun forbedringer til eksisterende
På Next.js conf præsenterede teamet bag Next.js, Vercel, den nyeste version af Next.js, version 14. Men præsentationen startede ud med et slide, hvorpå der stod at der ikke er nogle nye API’er eller funktioner i den nye version. Altså er der kun forbedringer til eksisterende funktioner og API’er.
Turbopack – brug tid på at kode og ikke på at vente på din server
Da Next.js 13 landede skiftede Next.js til Turbopack i deres compiler, men indtil nu har den ikke været stabil og anbefalet. Det er den stadig ikke, men teamet bag Next.js, Vercel, er nu kommet meget tættere på. Faktisk så består over 90% af deres interne tests faktisk compile med Turbopack nu. Det betyder at selvom Turbopack ikke er helt klar til at blive anvendt i produktion, er vi meget tæt på.
Hvad er Turbopack? Turbopack er en web bundler skrevet i Rusk som er meget hurtigere end de forgængere den erstatter, herunder Webpack. Foruden at være hurtigere, laver Turbopack også en masse caching af dine compile steps, hvilket betyder at man ikke skal bruge unødvendige ressourcer på at bygge noget kode der ikke har ændret sig. Dette er især smart hvis man arbejder i større teams med en stor kodebase, hvor det kun er små dele af koden der ændrer sig.
Server actions
I en tidligere version af Next.js blev de muligt at lave REST API’er direkte i Next.js. Udfordringerne med den nye funktion var dog udvikleroplevelsen. Det krævede separate filer, selvom din server-side kode typisk relaterede til en specifik frontend component. F.eks. en kontaktformular der sender en e-mail notifikation og viser en takke-besked i frontenden.
I Next.js 14 er server actions blevet stabil og klar til produktion. Server-actions løser det førnævnte problem og gør det muligt at skrive server-side koden direkte i samme fil som laver din frontend kode. Altså kan du lave en kontaktformular som POST’er til din server actions, som sender en e-mail notifikationer, gemmer en log i databasen og sender en takke-besked til brugeren i frontenden. Alt dette i samme fil. Det betyder også færre filer bliver sendt til brugeren, hvilket er endnu hurtigere og også bedre for SEO.
Delvis rendering – send statisk HTML direkte til brugeren
For nogle år tilbage blev det meget populært at sende en tom HTML-skal til brugeren og en stor Javascript fil, som så renderer din side. Det betyder at brugeren først skal downloade en stor Javascript-fil og vente på at data hentes fra serveren og til sidst renderes siden. Dette er langsomt på mobilforbindelser og søgemaskiner kan ikke se dit indhold.
I de seneste år er man gået over til en teknik kaldet server-side rendering, hvor serveren renderer dit HTML og sender en færdig side til brugeren. Herefter overtager JavaScript og overtager navigationen, hvilket gør navigationen ufattelig hurtig.
Med den nye funktion “partial rendering” i Next.js, bliver det muligt at server-side rendere specifikke dele af din side. Dette kan give god mening hvis du f.eks. har et dashboard med en masse grafer, som først skal indlæse noget data som kan være langsomt, og du ikke vil have at brugeren skal vente på data hentes og klargøres. Det kan også bruges hvis du har et social medie-feed fra f.eks. Instagram eller X (tidligere Twitter).
Denne nye funktion er ikke klar endnu og er kun et preview.
Indhold