Precis när vi trodde att Next.js hade allt under solen för att få din app att se ut och kännas vacker, lade ramverkets skapare till ännu fler funktioner för att säkerställa att du får en bättre upplevelse.
Vi kommer att diskutera alla nya funktioner som har introducerats i Next.js 13, den senaste versionen av Next.js, från förbättrat stöd för serverlösa appar till nya paket, liksom andra förbättringar i alla aspekter av att använda Next.js.
Next.js är ett ramverk med öppen källkod för att bygga nästa generations Single-Page Apps (SPA). Det låter dig bygga SPA snabbare och med mindre kod med hjälp av de bästa metoderna från React-ekosystemet. Det ger dig de bästa moderna utvecklingsmetoderna samtidigt som du hjälper dig att minska inlärningskurvan.
Det är byggt ovanpå Webpack Asset Pipeline och React. Du kan enkelt skriva din app i serverside-rendering (SSR) eller klient-side rendering (CSR) och distribuera den till flera plattformar, inklusive webben, Android och iOS.
Populariteten för Next.js, en av de mest populära ramarna för webbappar, härrör från dess användarvänlighet och utvecklarupplevelse - men det har också funktionalitet som gör det särskilt attraktivt för media-, SaaS- och detaljhandelsföretag. Den ursprungliga versionen av Next.js var ett React-ramverk för dynamiska servrar på webbplatser.
Next.js utvecklades för team att bygga ambitiösa, komplicerade applikationer snarare än enkelsidiga applikationer. Men att vara dynamisk har alltid haft många begränsningar. För att vara dynamisk krävde det att jonglera två olika uppsättningar av runtime-API:er, konventionella webb-API:er i webbläsaren och inget Javascript på servern. Det kräver också investeringar i dyr infrastruktur som alltid är igång och kräver arbetsintensiva processer.
Uppgradering av en statisk applikation var den enda metoden för att skala en dynamisk global applikation om du inte var en av webbjättarna som Google eller Facebook. När dynamiska krav är närvarande blir nackdelarna med statisk tydliga. Du litar på enorma mängder JavaScript på klientsidan eftersom din cachelagrade eller statiskt producerade sida är inkompatibel med finkornig användaranpassning. Att försöka maximera inom dessa begränsningar var aldrig lösningen. Och det är därför Next.js 13 introduceras.
Next.js 13 är den senaste versionen av Next.js. De nya funktionerna som introduceras är enorma, och några av dem har länge efterfrågats av samhället. Det gör det äntligen möjligt för dig att vara dynamisk utan gränser.
Next.js 13 innehåller tre viktiga innovationsområden:
Låt oss titta på dessa uppgraderingar mer detaljerat.
Det är en ny start för webbekosystemet som helhet, för Next.js och för kompilatorinfrastruktur. Utan någon inställning krävs ger Next.js din app de perfekta standardinställningarna. Att skriva JavaScript-verktyg i JavaScript 2016 var bara naturligt.
Termen ”verktyg” hänvisar här till Babel, Terser och Webpack. Dessa verktyg hade svårt att hålla jämna steg när frontend-applikationer ökade i storlek och komplexitet. Med prestandan för JavaScript-baserad kompilering nådde de sina gränser. Next.js började göra övergången till inbyggd Rust-driven verktyg som ett resultat.
Sedan gick Webpack-skaparen, Tobias Koppers, med i Vercel-teamet, och tillsammans skapade de Turbopack. Turbopack uppdaterar enorma applikationer 700 gånger snabbare än Webpack och 10 gånger snabbare än Vite. Gapet är betydligt mer uttalat för riktigt stora applikationer, med 20 gånger snabbare uppdateringar än Vite.
Dessa hastighetsförbättringar gäller för att starta din lokala utvecklingsserver och kodändringar. Turbopacks prestanda beror på dess inkrementella motor på låg nivå tillverkad med Rust och väl optimerad maskinkod. Turbopack slutför bara en enda uppgift åt gången. Från och med React snabb uppdatering fokuserar Turbopack på din lokala utvecklingsupplevelse.
I framtiden kommer Turbopack också att användas för att driva lokala och molnbaserade Next.js produktionsbyggnader. Dessutom kan du samarbeta med team från hela organisationen för att dela arbete som redan har slutförts, inte bara på din lokala dator.
Du kan prova Turbopack Alpha genom att uppgradera till Next.js 13 och köra nästa dev —turbo.
För att se de riktmärken och funktioner som stöds, besök turbo.build.
Så Turbopack är den nya hörnstenen i högpresterande nakna metallverktyg och är nu öppen källkod. Den är optimerad för React och Next.js kodbaser.
Även för enorma kodbaser kan byggandet för produktion slutföras på mindre än tio sekunder. Tack vare Vercel fjärrcache och ourNext.js build-infrastruktur gynnar dessa snabba uppdateringar dig och resten av ditt team genom att förhindra dubbelarbete. Den här fjärrcachens byggtid har redan sparat utvecklingsteam på företag av alla storlekar som sträcker sig över årtionden.
Next.js 13 omprövar hur sidor organiseras, visualiseras och tillhandahålls vid kanten för att utveckla webben. Den filsystembaserade routern är en av Next.js mest omtyckta funktioner. Du kan automatiskt skapa rutter i programmet utan konfiguration genom att släppa en fil i en mapp.
Routern har bidragit till att se några av de största webbapplikationerna i världen. Detta har gjort det möjligt för usNext.js utvecklare att hitta fantastiska möjligheter att fortsätta tillhandahålla den finaste routern som finns tillgänglig. För att aktivera global datahämtning i ditt program kan de göra det enklare att samlokalisera datahämtning inuti komponenter. Att till exempel dela dynamiska datakrav över sidor kan göra det enklare att samlokalisera programkoden med dina rutter, till exempel komponenter, tester och stilar. Efter det är det inte längre nödvändigt att skapa dina konventioner och inställningar för dig och ditt team.
Komplexa gränssnitt som håller status genom navigeringar och undviker kostsamma omritningar, renderingar och återtriggning av animationer kan lättare utformas. För gradvis antagande börjar den nya routern med att introducera appkatalogen, som kan samexistera med katalogen på den aktuella sidan.
Teamet Next.js samarbetade med React-kärnteamet för att utveckla ett nytt tillvägagångssätt för hämtning som kommer att gynna alla versioner av React och Next.js. Next.js datahämtning utökas med nya funktioner, inklusive inbyggd cachning, begäran om deduplicering, programmerbara revalideringar och granulär datarensning för att bibehålla dess anpassningsbarhet och skalbarhet.
Som ett resultat är en hybridlösning som kombinerar fördelarna med ISR, statisk datahämtning, datahämtning på tjänstsidan och till och med SWR nu tillgänglig. Allt på den här produkten är nu serverförst eftersom routern är konstruerad med React-serverkomponenter. Rika interaktiva upplevelser på klientsidan kan fortfarande upprätthållas medan drastiskt mindre JavaScript levereras som standard.
De nya React-primitiverna möjliggör hantering av laddning, feltillstånd, strömmande användargränssnitt när det renderas, och möjligen till och med mutera data i framtiden. År av investeringar i React-ekosystemet har möjliggjort skapandet av detta nya API.
Du kan implementera dessa funktioner genom att inkludera appkatalogen i dina nya eller nuvarande kodbaser. Du kan göra detta skift gradvis, till och med en sida i taget. Sidkatalogen, däremot, fortsätter att få fullt underhåll och underhåll, och med hjälp av Turbopack kan utvecklingen på både sidor och appkataloger påskyndas.
Att ladda en webbplats snabbt kan vara komplicerat. Att skaffa resurser från tredje part som teckensnitt, bilder och skript är lika viktigt som hur du renderar dina komponenter. Du måste korrigera saker för att förhindra plötsliga layoutändringar, inmatningsförseningar och otydliga innehållsförseningar.
Detta är anledningen till att Next.js bygger en mer avancerad kompilator och renderingsinfrastruktur. Dessutom ger de dig lösningar på dessa vanliga och mer komplexa problem:
I genomsnitt utgör bilder 44% av vikten på en sida. Kvaliteten på bilderna är avgörande. 70% av deltagarna i Next.js community sa att när de använde en Next.js bildkomponent i produktionen var det en förbättring av de grundläggande webbmätvärdena.
Vercel kan optimera bilder på begäran för ännu högre hastighet eftersom den kompletterar denna bildkomponent med sin globala kantinfrastruktur. Tack vare samarbetet mellan ramverket och molninfrastrukturen har miljarder optimerade bilder nu distribuerats på webben utan utvecklarens ansträngning.
Effektiviteten och utvecklarupplevelsen för bildkomponenterna har förbättrats avsevärt i Next.js 13. Reacts komponentabstraktion är värdefull eftersom den kan innehålla komplexitet samtidigt som den erbjuder en enkel HTML-liknande användarupplevelse. Next.js 13 lanserar en bättre bildkomponent som använder färre JavaScript-skrifter på klientsidan, körs bättre och behåller sitt välbekanta gränssnitt tack vare webbplattformsframsteg som är tillgängliga i alla större webbläsare, till exempel inbyggd lat laddning av bilder och CSS-bildförhållanden.
I Next.js 12, Bild Lever som båda @next /bild och @next /framtid/bild. Next.js 13 växlar standardkomponenten till:
nästa/bild flyttar till nästa/arv/bild;nästa/framtid/bild flyttar till nästa/bild.
Koden i din app kommer att automatiseras med hjälp av en codemod. Next.js kan uppgraderas på detta sätt smidigt:
Det är sannolikt vanligt att fallback-teckensnitt orsakar layoutändringar eller till och med betydande förseningar innan rätt teckensnitt ses på skärmen. Next.js 13 visar att du enkelt kan ändra ditt varumärkes typsnitt samtidigt som du behåller en snabb webbplats.
Med ett helt nytt teckensnittssystem byggt i samarbete med Chrome-teamet återuppfinner de hur utvecklare använder teckensnitt. Denna inbyggda modul optimerar dina typsnitt genom att ta bort anslutningstiderna till externa värdar och minskar behovet av externa nätverksförfrågningar, vilket förbättrar sekretess och effektivitet. Detta innebär att Next.js automatiskt kan erbjuda ett typsnitt för dig, vilket ger dig en unik varumärkesidentitet över hela din domän, oavsett om du importerar den från ett register som Google Fonts eller dina egna anpassade teckensnittsfiler.
Genom att förlita oss på CSS-attributet för storleksjustering som tillhandahålls av webbplattformen har vi också eliminerat layoutförskjutningar. Den nya teckensnittsmodulen kan automatiskt förhindra 100% av visuella störningar från saknade teckensnitt och 99% av layoutändringar som orsakas av anpassade teckensnitt.
Med den nya @next /teckensnitt modul, du kan optimera dina webbteckensnitt under byggtiden. Det laddar ner teckensnittstillgångar och är värd för dem i din /offentlig mapp. Ditt teckensnitt kommer att levereras på snabbast möjliga sätt utan en tur och retur till en annan server och kommer att cachelagras ordentligt tillsammans med resten av dina resurser, vilket sparar resurser.
När du kör din utvecklingsbyggnad för första gången, se till att du har en internetanslutning så att den kan cachelagras korrekt. Om inte Justera FontFallback är inställd, systemteckensnitt kommer att användas.
En speciell modul för Google Web Fonts finns också i @next /teckensnitt:
Om du använder anpassade teckensnitt fungerar modulen också:
De kallas också öppna grafbilder, vilket avsevärt kan höja ditt innehålls klickfrekvens. Statiska sociala kort kräver mycket ansträngning, är svåra att hantera och är benägna att göra misstag. Som ett resultat saknas ofta sociala kort. Det är dags att bli dynamisk igen. Dynamiska sociala kort, som måste anpassas och beräknas direkt, har varit svåra och dyra att skapa.
Därför tillkännagavs Vercel OG Image Generation, en ny metod för att omedelbart producera dynamiska sociala kort, av Next.js. Vercel kantfunktioner, webbmontering, ett helt nytt kärnbibliotek för att omvandla HTML och CSS till bilder, och React-komponentabstraktion gör denna metod fem gånger snabbare än tidigare alternativ. Ingen dyrare utrustning eller huvudlösa webbläsare.
Återigen möjliggörs anmärkningsvärda webbupplevelser genom sammansmältning av grundläggande komponenter med global kantinfrastruktur. Att göra det kommer att förenkla saker, spara mycket datortid och frigöra utvecklare- och designertimmar.
Next.js är ett ramverk som har funnits ett tag och har samlat en stor användarbas. Med den här utgåvan har skaparna av Next.js tagit in en ny era av webbutveckling med många nya funktioner och förbättringar av de befintliga.
Större uppdateringar i Next.js 13:
För det bör du uppdatera din Next.js och få dessa fördelar. Om du vill uppgradera dina digitala produkter med den senaste Next.js och med ett erfaret och innovativt företag, kontakta oss. Vi har arbetat med React.js i mer än 12 år, med några av de bästa europeiska utvecklarna som arbetar med det.
Alexandra Mendes är Senior Growth Specialist på Imaginary Cloud med 3+ års erfarenhet av att skriva om mjukvaruutveckling, AI och digital transformation. Efter att ha avslutat en frontend-utvecklingskurs tog Alexandra upp några praktiska kodningskunskaper och arbetar nu nära med tekniska team. Alexandra brinner för hur ny teknik formar affärer och samhälle och tycker om att förvandla komplexa ämnen till tydligt och användbart innehåll för beslutsfattare.
Människor som läste det här inlägget tyckte också att dessa var intressanta:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
