Høydepunktet i Next.js 15.1: «Kjærkommet tilskudd for meg!»

Next.js 15.1, CSS Grid-stabling og ref callbacks i ukas ForrigeUke.

Petter Sæther Moen har funnet et høydepunkt i Next.js 15.1. 📸: Bekk / Ole Petter Baugerød Stokke
Petter Sæther Moen har funnet et høydepunkt i Next.js 15.1. 📸: Bekk / Ole Petter Baugerød Stokke Vis mer

Dette var uken for å parprogrammere🧑🤝🧑, glede seg til juleferie🎅, finne nye måter å sortere lister på ⏳— og 1296 ting som skjedde i frontend-verdenen.

Thank you, Next 🎵

Next.js har kommet med ny minor-versjon! 15.1.

Denne gangen kan de friste med støtte for React 19, bedre feilmeldinger, et nytt API, after, for å eksekvere kode etter response har blitt sendt, og ikke minst noen etterlengtede eksperimentelle funksjoner for autoriseringskontroll.

Særlig autoriseringskontrollen er et kjærkomment tilskudd for meg:

Endelig blir det (snart) like enkelt å håndtere egne visninger for 401 Unauthorized og 403 Forbidden som det allerede er for 404 Not Found.

Position absolute? Bruk heller CSS Grid-stabler!

Har du prøvd å lage en knapp som skal vise en alternativ tekst eller ikon når den går inn i “lastemodus”?

Da har du sikkert oppdaget hvor vanskelig det kan være å få knappen til å beholde nøyaktig samme størrelse i overgangen mellom lasting og ikke lasting. Hvorfor skal dette være så vanskelig?

Wes Bos viser frem hvor enkelt det kan løses ved å bruke CSS Grids. Her viser han frem hvordan du bare kan sette spinneren og teksten til samme grid-area. Da stables de bare oppå hverandre. Og med litt visibility: hidden pepret inn så er du ferdig på et blunk.

Dette var et snedig triks som jeg i hvert fall kommer til å ta i bruk fremover!

Ut med useEffect — Inn med Ref Callbacks

Dominik Dorfmeister, vedlikeholder av TanStack Query, skrev i 2022 om hvordan du kan unngå useEffect ved å bruke ref callbacks.

Her viste han frem at du sannsynligvis kan slippe unna en del rotete useRef og useEffect ved å heller bare sende inn en funksjon til ref-feltet.

I lys av React 19 og den kommende React-kompilatoren har Dominik skrevet en oppfølgingsartikkel. Her viser han blant annet frem at vi ved å bruke den nye cleanup-funksjonen i ref callbacks greier å kvitte oss med enda flere useEffect-er!

Dette er definitivt noe jeg kommer til å bruke flittig fremover — kanskje det kan rydde opp i rotet ditt også?

Det var alt for denne gang. Ha en fin uke!