En dag forrige uke scrolla jeg gjennom Twitter-feeden min og kom over denne posten:
Let's make the web. Faster.
— Vercel (@vercel) May 19, 2021
Claim your ticket to a special edition of Next.js Conf.https://t.co/i7CPuu5csv
Jeg trykka på lenken, og så at Vercel skulle holde en gratis konferanse om Next.js! Jeg trykket meg inn, claima billetten min — og tenkte at “det her blir en koselig kveld”.
15. juni arrangerte nemlig Vercel en konferanse om hva som er nytt i Next.js-verdenen, og jeg må si jeg er imponert. Hvis du er solgt allerede har du lenken til keynoten her.
Marius savna oversikt, lagde karantenekonserter.no 🎸
Kort oppsummert, lanserer de Next.js 11, og da spesielt med Next.js Live.
I presentasjonen var det også mye fokus på bedre ytelse, og hvordan de stadig vil forbedre både bruker- og utvikleropplevelsen.
Next.js Live
En stor release på konferansen var Next.js Live. Har du prøvd LiveShare med VSCode kjenner du kanskje igjen dette.
Det er et verktøy som lar deg skrive kode sammen med kollegaene dine, i samme fil. Genialt!
Det som skiller dette fra VSCode sin samarbeidsverktøy er at dette er i browseren din, og du kan se kode og produktet ditt samtidig (ser litt ut som CodeSandbox), mens du flere er å redigerer i samme fil samtidig.
Conformance
På konferansen snakket de blant annet om comformance som går ut på at utvikleren kan kose seg med produktet sitt mens systemet passer på optimal loading og “Core Web Vitals”.
Den skal også passe på sikkerhet og tilgjengelighet for deg. Det er mye ansvar å legge på et system!
I tillegg har de også koblet seg på eslint-kjøret. Ved å kjøre next lint får du hjelp til å avdekke feil spesifikke for rammeverket ditt.
Script-optimalisering
Noen ganger må du laste tredjeparts-kode, og det er ikke alltid det går så raskt. Ofte hvis du jobber på store prosjekter må du kanskje laste inn analytics, ads (😱), widget for kundeservice, og så videre.
Derfor valgte de Sanity, Next.js og Netlify
Med den nye Script-komponenten til Next.js kan du definere hvilken strategi denne innlastingen skal ha, slik at siden kan prioritere hva som er viktigst å laste først.
Valgene du har er beforeInteractive (for kritisk kode) , afterInteractive (default, etter siden har lasta) og lazyOnLoad (for kode som kan vente).
Bildeforbedringer
Vercel var ogsså veldig opptatt av den nye bildekomponenten i Next.JS, som har vært etterspurt av kodesamfunnet. Denne skal gi deg en litt bedre visuell effekt, samtidig som den reduserer at (store) bilder popper inn lenge etter siden er lastet. I tillegg kan den automatisk oppdage størrelse på bilder, og gir deg muligheten til å gi deg en “blurret” forhåndsvisning av bildet ditt.
I tillegg kommer Next.js 11 med Webpack 5, en eksperimentell CRA-migrasjon, og bedre ytelse. Les mer om det her.
Det var en liten oppsummering fra meg om hva som skjer på Next.js fronten. Håper i det minste det var litt interessant for deg, og at du tar en titt på den nye releasen! 👩🏫
