Lige da vi troede, at Next.js havde alt under solen for at få din app til at se og føles smuk, tilføjede rammeværkets skabere endnu flere funktioner for at sikre, at du får en bedre oplevelse.
Vi diskuterer alle de nye funktioner, der er blevet introduceret i Next.js 13, den nyeste version af Next.js, fra forbedret support til serverløse apps til nye pakker, samt andre forbedringer på tværs af alle aspekter af brugen af Next.js.
Next.js er en open source-ramme til opbygning af næste generation af Single-Page Apps (SPA). Det giver dig mulighed for at opbygge SPA'er hurtigere og med mindre kode ved hjælp af de bedste fremgangsmåder fra React-økosystemet. Det giver dig de bedste moderne udviklingspraksis, samtidig med at du hjælper dig med at reducere læringskurven.
Det er bygget oven på Webpack Asset Pipeline og React. Du kan nemt skrive din app i servergengivelse (SSR) eller gengivelse på klientsiden (CSR) og implementere den på flere platforme, herunder internettet, Android og iOS.
Populariteten af Next.js, en af de mest populære webapp-rammer, stammer fra dens brugervenlighed og udvikleroplevelse - men det kan også prale af funktionalitet, der gør det særligt attraktivt for medier, SaaS og detailvirksomheder. Den oprindelige version af Next.js var en React-ramme for dynamiske servere inde på websteder.
Next.js blev udviklet til teams til at opbygge ambitiøse, komplicerede applikationer snarere end enkeltsidede applikationer. At være dynamisk har dog altid haft adskillige begrænsninger. For at være dynamisk krævede det at jonglere med to forskellige sæt runtime API'er, konventionelle web-API'er i browseren og ingen Javascript på serveren. Det kræver også investering i dyr infrastruktur, der altid kører og nødvendiggør arbejdskrævende processer.
Opgradering af en statisk applikation var den eneste metode til at skalere en dynamisk global applikation, medmindre du var en af webgiganterne som Google eller Facebook. Når dynamiske krav er til stede, bliver ulemperne ved statisk tydelige. Du er afhængig af enorme mængder JavaScript på klientsiden, da din cachelagrede eller statisk producerede side er uforenelig med finkornet brugertilpasning. At forsøge at maksimere inden for disse begrænsninger var aldrig løsningen. Og det er derfor Next.js 13 introduceres.
Next.js 13 er den seneste version af Next.js. De nye funktioner, der introduceres, er enorme, og nogle af dem er længe blevet efterspurgt af samfundet. Det giver dig endelig mulighed for at være dynamisk uden grænser.
Next.js 13 omfatter tre væsentlige innovationsområder:
Lad os se nærmere på disse opgraderinger.
Det er en frisk start for webøkosystemet som helhed, for Next.js og for kompilatorinfrastruktur. Uden nogen indstilling kræves, giver Next.js din app de ideelle standardindstillinger. At skrive JavaScript-værktøjer i JavaScript i 2016 var kun naturligt.
Udtrykket „værktøjer“ henviser her til Babel, Terser og Webpack. Disse værktøjer havde svært ved at følge med, da front-end-applikationer steg i størrelse og kompleksitet. Med udførelsen af JavaScript-baseret kompilering nåede de deres grænser. Next.js begyndte at skifte til indbygget rustdrevet værktøj som følge heraf.
Derefter sluttede Webpack-skaberen, Tobias Koppers, sig til Vercel-teamet, og sammen skabte de Turbopack. Turbopack opdaterer enorme applikationer 700 gange hurtigere end Webpack og 10 gange hurtigere end Vite. Gabet er betydeligt mere udtalt for virkelig store applikationer med 20 gange hurtigere opdateringer end Vite.
Disse hastighedsforbedringer gælder for opstart af din lokale udviklingsserver og kodeændringer. Turbopacks ydeevne skyldes dens trinvise motor på lavt niveau lavet med Rust og veloptimeret maskinkode. Turbopack udfører kun en enkelt opgave ad gangen. Fra og med React hurtig opdatering fokuserer Turbopack på din lokale udviklingsoplevelse.
I fremtiden vil Turbopack også blive brugt til at drive lokale og skybaserede Next.js produktionsbygninger. Derudover kan du samarbejde med teams fra hele organisationen for at dele arbejde, der allerede er afsluttet, ikke kun på din lokale maskine.
Du kan prøve Turbopack Alpha ved at opgradere til Next.js 13 og køre næste dev —turbo.
For at se de understøttede benchmarks og funktioner, skal du besøge turbo-build.
Så Turbopack er den nye hjørnesten i højtydende bare metalværktøjer og er nu open source. Det er optimeret til React og Next.js kodebaser.
Selv for enorme kodebaser kan bygning til produktion være afsluttet på under ti sekunder. Takket være Vercel remote cache og ourNext.js build-infrastruktur gavner disse hurtige opdateringer dig og resten af dit team ved at forhindre dobbeltarbejde. Denne eksterne caches byggetid har allerede sparet udviklingsteams i virksomheder af alle størrelser over årtier.
Next.js 13 genovervejer, hvordan sider organiseres, visualiseres og leveres på kanten for at fremme internettet. Den filsystembaserede router er en af Next.js mest populære funktioner. Du kan automatisk konstruere ruter i programmet uden konfiguration ved at droppe en fil inde i en mappe.
Routeren har bidraget til at se nogle af de største webapplikationer i verden. Dette har gjort det muligt for usNext.js udviklere at finde fantastiske muligheder for at fortsætte med at levere den fineste router til rådighed. For at aktivere global datahentning i din applikation kan de gøre det lettere at samlokalisere datahentning inde i komponenter. Deling af dynamiske datakrav på tværs af sider kan f.eks. gøre det nemmere at finde programkoden sammen med dine ruter, f.eks. komponenter, tests og typografier. Derefter er det ikke længere nødvendigt at oprette dine konventioner og opsætning for dig og dit team.
Komplekse grænseflader, der holder tilstand gennem navigationer og undgår dyre omtegninger, gengivelser og genudløsning af animationer, kan lettere anlægges. For gradvis vedtagelse begynder den nye router med at introducere appmappen, som kan eksistere sammen med biblioteket på den aktuelle side.
Next.js teamet samarbejdede med React-kerneteamet for at udvikle en frisk tilgang til hentning, der vil gavne alle versioner af React og Next.js. Next.js datahentning udvides med nye funktioner, herunder indbygget caching, anmodning om deduplikering, programmerbare revalideringer og granulær datarensning for at bevare dens tilpasningsevne og skalerbarhed.
Som et resultat er en hybridløsning, der kombinerer fordelene ved ISR, statisk datahentning, datahentning på servicesiden og endda SWR nu tilgængelig. Alt på dette produkt er nu serverførst, fordi routeren er konstrueret ved hjælp af React-serverkomponenter. Rige interaktive oplevelser på klientsiden kan stadig opretholdes, mens drastisk mindre JavaScript leveres som standard.
De nye React-primitiver muliggør håndtering af indlæsning, fejltilstande, streaming UI, når det gengives, og muligvis endda mutering af data i fremtiden. Års investering i React-økosystemet har muliggjort oprettelsen af denne nye API.
Du kan implementere disse funktioner ved at inkludere appmappen i dine nye eller nuværende kodebaser. Du kan foretage dette skift gradvist, endda en side ad gangen. Sidemappen modtager derimod fortsat fuld vedligeholdelse og vedligeholdelse, og ved hjælp af Turbopack kan udviklingen på både sider og appmapper accelereres.
At få et websted til at indlæse hurtigt kan være kompliceret. At få tredjepartsaktiver som skrifttyper, billeder og scripts er lige så vigtigt som, hvordan du gengiver dine komponenter. Du skal rette ting for at forhindre pludselige layoutændringer, inputforsinkelser og uklart indholdsforsinkelse.
Dette er grunden til, at Next.js bygger en mere avanceret kompilator og gengivelsesinfrastruktur. Derudover giver de dig løsninger på disse almindelige og mere komplekse problemer:
I gennemsnit udgør billeder 44% af vægten af en side. Kvaliteten af billederne er afgørende. 70% af deltagerne i Next.js community sagde, at når de brugte en Next.js billedkomponent i produktionen, var der en forbedring af de grundlæggende webmålinger.
Vercel kan optimere billeder efter behov for endnu højere hastighed, da det supplerer denne billedkomponent med sin globale kantinfrastruktur. Takket være dette samarbejde mellem rammeverket og cloud-infrastrukturen er milliarder af optimerede billeder nu blevet distribueret på nettet uden udviklerens indsats.
Effektiviteten og udvikleroplevelsen af billedkomponenterne er forbedret betydeligt i Next.js 13. Reacts komponentabstraktion er værdifuld, fordi den kan indeholde kompleksitet og samtidig tilbyde en ligetil HTML-lignende brugeroplevelse. Next.js 13 lancerer en bedre billedkomponent, der bruger færre JavaScript-skripter på klientsiden, kører bedre og bevarer sin velkendte grænseflade takket være webplatformfremskridt, der er tilgængelige på tværs af alle større browsere, såsom native image doven indlæsning og CSS-billedforhold.
I Next.js 12, Billede Lever som begge @next /billede og @next /fremtid/billede. Next.js 13 skifter standardkomponenten til:
næste/billede flytter til næste/legacy/billede;næste/fremtid/billede flytter til næste/billede.
Koden i din app automatiseres ved hjælp af en codemod. Next.js kan opgraderes på denne måde problemfrit:
Det er sandsynligvis almindeligt, at fallback-skrifttyper forårsager layoutændringer eller endda betydelige forsinkelser, før den korrekte skrifttype ses på skærmen. Next.js 13 viser, at du nemt kan ændre dit brands skrifttyper, mens du opretholder en hurtig hjemmeside.
Med et helt nyt skrifttypesystem bygget i samarbejde med Chrome-teamet genopfinder de, hvordan udviklere bruger skrifttyper. Dette indbyggede modul optimerer dine skrifttyper ved at fjerne forbindelsesopsætningstider til eksterne værter og reducerer behovet for eksterne netværksanmodninger, hvilket forbedrer privatlivets fred og effektivitet. Dette indebærer, at Next.js automatisk kan tilbyde en skrifttype til dig, hvilket giver dig en unik brandidentitet på tværs af hele dit domæne, uanset om du importerer det fra et register som Google Fonts eller dine egne brugerdefinerede skrifttypefiler.
Ved at stole på CSS-attributten for størrelsesjustering, der leveres af webplatformen, har vi også elimineret layoutskift. Det nye skrifttypemodul kan automatisk forhindre 100% af visuel forstyrrelse fra manglende skrifttyper og 99% af layoutændringer forårsaget af brugerdefinerede skrifttyper.
Med den nye @next /skrifttype modul, du kan optimere dine Web Fonts i byggetiden. Det downloader skrifttypeaktiver og hoster dem i din /offentlig mappe. Din skrifttype vil blive leveret på den hurtigste måde uden en rundtur til en anden server og vil blive korrekt cachelagret sammen med resten af dine ressourcer, hvilket sparer dig ressourcer.
Når du kører din udviklingsbuild for første gang, skal du sørge for, at du har en internetforbindelse, så den kan cache den korrekt. Medmindre Juster FontFallback er indstillet, systemskrifttyper vil blive brugt.
Et specielt modul til Google Web Fonts er også tilgængeligt i @next /skrifttype:
Hvis du bruger brugerdefinerede skrifttyper, fungerer modulet også:
De kaldes også åbne grafbilleder, hvilket kan øge dit indholds klikfrekvens betydeligt. Statiske sociale kort kræver en stor indsats, er vanskelige at administrere og er tilbøjelige til fejl. Som et resultat mangler sociale kort ofte. Det er tid til at blive dynamisk igen. Dynamiske sociale kort, som skal tilpasses og beregnes med det samme, har været vanskelige og dyre at oprette.
Derfor blev Vercel OG Image Generation, en ny metode til øjeblikkelig produktion af dynamiske sociale kort, annonceret af Next.js. Vercel kantfunktioner, websamling, et helt nyt kernebibliotek til omdannelse af HTML og CSS til billeder og React-komponentabstraktion gør denne metode fem gange hurtigere end tidligere alternativer. Ikke dyrere udstyr eller hovedløse webbrowsere.
Endnu en gang er bemærkelsesværdige weboplevelser muliggjort ved fusion af grundlæggende komponenter med global kantinfrastruktur. Dette vil forenkle tingene, spare meget computertid og frigøre udvikler- og designertimer.
Next.js er en ramme, der har eksisteret i et stykke tid og har samlet en stor brugerbase. Med denne udgivelse har skaberne af Next.js indført en ny æra af webudvikling med mange nye funktioner og forbedringer af de eksisterende.
Større opdateringer i Next.js 13:
Til det skal du opdatere din Next.js og få disse fordele. Hvis du vil opgradere dine digitale produkter ved hjælp af den nyeste Next.js og med en erfaren og innovativ virksomhed, Kontakt os. Vi har arbejdet på React.js i mere end 12 år, hvor nogle af de bedste europæiske udviklere arbejder på det.
Alexandra Mendes er Senior Growth Specialist hos Imaginary Cloud med 3+ års erfaring med at skrive om softwareudvikling, AI og digital transformation. Efter at have gennemført et frontend-udviklingskursus fik Alexandra nogle praktiske kodningsevner og arbejder nu tæt sammen med tekniske teams. Alexandra brænder for, hvordan nye teknologier former erhvervslivet og samfundet, og hun nyder at omdanne komplekse emner til klart og nyttigt indhold for beslutningstagere.
People who read this post, also found these interesting:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
