Next.JS tillkännagavs av Vercel den 26 oktober 2021 – Det är den senaste versionen av dess JavaScript-ramverk baserad på React-biblioteket. Vercels VD, Guillermo Rauch, som också är skaparen av Next.js, citerade version 12 som “den första SDK för webben” angående de avancerade funktionerna.
Vad är nytt med Next.JS 12?
Next.js har ökat hastigheten vilket gör det möjligt för utvecklare att få bättre webbplatsrankningar genom Googles Core Web Vitals. Liksom Google är Facebook också ett starkt stödsystem för Next.js. I den nuvarande situationen tänjer utvecklare på sina gränser med kodbaser. Med kodbaser som har tusentals poage-ingångspunkter och tiotusen komponenter, kämpar modern webbutveckling med många problem. Detta har katalyserat “native tooling” i Next.JS 12-versionen, särskilt med tillkännagivandet av en kompilator byggd med Rust, ett futuristiskt programmeringsspråk känt för sin prestandahastighet.
I Node.JS 12 kombineras en Rut-baserad motor för kompilering med den befintliga JS-optimerade infrastrukturen. Detta resulterar i tre gånger bättre utvecklingshastighet och fem gånger bättre bygghastighet. Dessutom erbjuder den tio gånger högre hastighet för specifika processer som minifiering av paket.
Node.JS 12 har ytterligare funktioner som att “köra kod innan en begäran är klar” aktiverade genom ES-moduler och URL-import, omedelbar Hot Module Replacement (HMR) och “Middleware”.
Kort sagt, Next.JS 12 är den största utgåvan någonsin med följande höjdpunkter:
- Rust Compiler
- Middleware (beta)
- React 18 Support
- ‘<Image />’ AVIF Support
- Not-aware ISR Fallback
- Native ES Module Support
- URL Imports (alpha)
- React Server Komponent (alfa)
Tar Next.JS vid kanten med New Middleware och Edge Runtime
Next.JS Middleware ger utvecklare kraft genom att eliminera den operativa bördan med stöd av serverlös distribution, hög skalbarhet bland annat. Som redan nämnts kör Next.JS Middleware kod redan innan begäran är klar. Svaret kan skrivas om, omdirigeras, läggas till med rubriker eller till och med streamas HTML baserat på användarnas inflöde av förfrågningar. Middleware-logik är delbar för en uppsättning sidor – autentisering, botsäkerhet, omdirigeringar, hanterar oautentiserade webbläsare, funktionsflaggor, a/b-tester, analys på serversidan, loggning och mer.
Edge-funktioner i Next.JS Middleware är så distribuerade att de upphäver de överblivna kompromisserna med serverlös. Edge-funktioner startar upp omedelbart utan kalla stövlar, distribuerar globalt och backstreamar HTML. Dessutom minskar Edge Functions bördan på klienten genom att eliminera långa routingkonfigurationsfiler och stödja robusta applikationer vid kanten. Kort sagt, kraften i dynamisk kod genererar kraften till användare med hastighetsgarantin för statisk.
Next.JS Middleware och Edge-funktioner fördelar: Att
- köra JavaScript innan ens bearbetning av förfrågningar.
- Ändra förfrågningssvar.
- Definiera hela den globala infrastrukturen för applikationer genom att smälta ihop några kodbitar under driftsättningstiden.
Varje Edge-funktion distribueras globalt, medan utvecklare definierar Next.JS Middleware som en del av deras Next.JS-applikationer. Även utan någon konfiguration körs Edge-funktioner automatiskt i alla regioner i Edge-nätverket och till skillnad från serverlösa funktioner har Edge-funktioner inga kalla bots.
Vilka är de innovativa elementen som ingår i Next.JS?
Next.JS 12 är optimerad för utvecklarupplevelse med följande innovativa element:
- ES-moduler: Next.JS skickar mindre paket till användare med stöd för ES-moduler.
- URL-import: Sömlösa integrationer utan kod och designverktyg aktiveras med introduktionen av experimentell URL-import, vilket förbättrar utvecklarnas upplevelse.
- Omedelbar HMR och byggnader: Med noll kodändringar möjliggör Next.JS 12:s Rust-baserade kompilator tre gånger snabbare Fast Refresh och fem gånger snabbare produktionsbyggnader.
- Next.JS Enhancements (Beta): Next.JS Live körs inbyggt i webbläsaren och låter vem som helst inom länken samarbeta genom att starta omedelbart.
- Rendering på serversidan Streaming och React Server Components (Alpha): Data kan hämtas från serversidan och dessa resultat kan strömmas till webbläsaren kumulativt utan JavaScript på klientsidan.
Next.JS kallas den första SDL för webben som gör utveckling, konstruktion, samarbete och leverans mycket snabbare än sin föregångare. Next.JS Middleware-ramverket är konsekvent inom det moderna molnets globala möjligheter, vilket ger webbplatser mer dynamik, anpassning och prestanda. Koder kan köras var som helst, vilket ger det bästa av den statiska och dynamiska världen med en enhetlig abstraktion.
Designers och affärsanvändare Samarbete med Next.JS 12
Next.JS är ett djupgående ramverk för erfarna webbutvecklare, men Next.JS tillåter sammanslagning av utveckling utan kod och designverktyg. Således kan icke-utvecklare använda Next.JS även om de begränsar användningen av verktyg endast för att samarbeta med utvecklare.
Enligt Vercels VD, Mr Rauch, möjliggör URL-importfunktionen “nya typer av sömlösa integrationer med ingen kod och designverktyg som Framer”. Detta hjälper till att öka antalet icke-utvecklare bland sina användare.
Framer är ett verktyg som används av designers för att prototypera komponenter eller produkter i ett visuellt användargränssnitt och dold kod. URL-importerna i Next.JS 12 stödjer en användare att importera en komponent som är visuellt utformad i ett verktyg som Framer. Användaren kan designa en komponent visuellt som en skiss. Skissens URL ska sedan kopieras och importeras till din kodbas och sedan är den visuella designen av komponentträdet färdig.
Men allt detta betyder inte att icke-utvecklare enkelt kan använda Next.JS för att bygga en app, men URL-im[ort förespråkar verkligen “lågkodsfunktionaliteten till icke-utvecklare användarbas av Next.JS 12.
Slutnot: Nästa .JS- framtiden för webbapplikationer
Från och med oktober 2021 har det gått fem år sedan Next.JS introducerades till utvecklargemenskapen och det har visat en positiv tillväxtbana som ett omfattande JavaScript sedan det började.
När det introducerades i oktober 2016 var det ett litet ramverk designat för server-renderade universella JavaScript-webbappar. Nu har det vuxit till ett ramverk med Middleware! Med Edge-funktioner och React Server-komponenter, Next. JS har aktiverat en subtil distinktion för sina utvecklare.
Och en sak till. Då kommer visuella designers och affärsanvändare inte att förstå de avancerade funktionerna i Next.JS, eftersom utvecklarna kan utöva full kontroll över detta ramverk!