Dette er nytt i Next.js 13: - Flere godbiter som mange vil like

Ukas frontend-nytt med Next.js Conf 2022, Next.js 13, Turbopack og :has() i CSS.

Next.js 13 er ute. 📸: Ole Petter Baugerød Stokke
Next.js 13 er ute. 📸: Ole Petter Baugerød Stokke Vis mer

Dette var uken for twitter-oppkjøp 🐦, og dermed en litt annerledes code review 📄 og to tilsynelatende misfornøyde ansatte 📦.

Og 4 682 ting skjedde i frontend-verdenen!

Next.js Conf 2022

Denne uken er preget av Next.js sin konferanse og lanseringen av Next 13 og Turbopack 🚀

Fikk du ikke med deg konferansen live, men ønsker å gjøre et dypdykk inn i materien? I så fall ligger alt fra konferansen på Next.js sine nettsider.

Next.js 13

Next er som sikkert mange vet et veldig populært rammeverk for React. Og forrige ukes største nyhet var at Next.js 13 har blitt lansert. Her finner vi flere godbiter som mange vil like 🍬.

Blant annet:

  • Strukturen på applikasjonen din kan nå bygges opp rundt app/ i stedet for pages/. I app/ brukes mapper til å definere page routes, som blant annet eliminerer behovet for en components mappe!
  • Introduksjon av layouts skal gjøre det enklere å bruke nøstede layouts rundt om i applikasjonen din! Særlig fordi det nå blir enklere å gjenbruke layouts og samtidig finspisse de mer mot routen du står på nå.
  • Server-side kode inne i komponenten din eliminerer behovet for å tenke på SP, SSP og ISR! Dette sammen med layouts tillater for smartere fetching slik at all dataen din ikke trenger og fetches hver gang du går inn på en route igjen❗️

Ønsker du å få en oversikt over alle endringene fra Next 12 til Next 13? shadcn har laget en guide som kan hjelper deg!

Turbopack — en ny bundler for JavaScript og TypeScript

Vercel annonserte også denne uken Turbopack - en ny bundler for JavaScript- og TypeScript skrevet i Rust, og som blant annet er laget av hjernen bak webpack: Tobias Koppers.

Det skal visstnok være 10x raskere enn Vite og 700x raskere enn webpack når en jobber med store prosjekter(!) 😅. Spørs om Turbopack kan hamle opp med brukervennlige Vite, som allerede er raskt nok for de fleste prosjekter. Det vil tiden vise!

Turbopack er foreløpig kun tilgjengelig som en alpha, og du kan prøve det ut hvis du bruker Next.js 13 og skriver inn kommandoen under ⬇️.

next dev --turbo

CSS :has()

Snart støtter alle browsere :has() i CSS (bak et flagg enn så lenge i Firefox 🦊).

Med :has() åpner det seg styling-muligheter i alle DOM-ens retninger (også oppover ↕️ og til siden ↔️) som mange kommer til å finne veldig smarte. Hvis du ønsker å vite mer om hva du kan gjøre med :has() så anbefaler jeg deg å sjekke ut videoen under som er laget av jh3yy!

Ønsker deg en riktig god uke! Vi sees 🧑💻