{"id":742,"date":"2023-10-31T07:57:31","date_gmt":"2023-10-31T07:57:31","guid":{"rendered":"https:\/\/webhotelsoversigt.dk\/blog\/?p=742"},"modified":"2023-10-31T07:58:45","modified_gmt":"2023-10-31T07:58:45","slug":"saa-er-next-js-14-her","status":"publish","type":"post","link":"https:\/\/webhotelsoversigt.dk\/blog\/saa-er-next-js-14-her\/","title":{"rendered":"S\u00e5 er Next.js 14\u00a0her"},"content":{"rendered":"\n

Ingen nye funktioner \u2013 kun forbedringer til eksisterende <\/em><\/p>\n\n\n\n

P\u00e5 Next.js conf pr\u00e6senterede teamet bag Next.js, Vercel, den nyeste version af Next.js, version 14. Men pr\u00e6sentationen startede ud med et slide, hvorp\u00e5 der stod at der ikke er nogle nye API\u2019er eller funktioner i den nye version. Alts\u00e5 er der kun forbedringer til eksisterende funktioner og API\u2019er. <\/p>\n\n\n\n

<\/span>Turbopack \u2013 brug tid p\u00e5 at kode og ikke p\u00e5 at vente p\u00e5 din server <\/span><\/h2>\n\n\n\n

Da Next.js 13 landede skiftede Next.js til Turbopack i deres compiler, men indtil nu har den ikke v\u00e6ret stabil og anbefalet. Det er den stadig ikke, men teamet bag Next.js, Vercel, er nu kommet meget t\u00e6ttere p\u00e5. Faktisk s\u00e5 best\u00e5r over 90% af deres interne tests faktisk compile med Turbopack nu. Det betyder at selvom Turbopack ikke er helt klar til at blive anvendt i produktion, er vi meget t\u00e6t p\u00e5. <\/p>\n\n\n\n

Hvad er Turbopack? Turbopack er en web bundler skrevet i Rusk som er meget hurtigere end de forg\u00e6ngere den erstatter, herunder Webpack. Foruden at v\u00e6re hurtigere, laver Turbopack ogs\u00e5 en masse caching af dine compile steps, hvilket betyder at man ikke skal bruge un\u00f8dvendige ressourcer p\u00e5 at bygge noget kode der ikke har \u00e6ndret sig. Dette er is\u00e6r smart hvis man arbejder i st\u00f8rre teams med en stor kodebase, hvor det kun er sm\u00e5 dele af koden der \u00e6ndrer sig. <\/p>\n\n\n\n

<\/span>Server actions <\/span><\/h2>\n\n\n\n

I en tidligere version af Next.js blev de muligt at lave REST API\u2019er direkte i Next.js. Udfordringerne med den nye funktion var dog udvikleroplevelsen. Det kr\u00e6vede separate filer, selvom din server-side kode typisk relaterede til en specifik frontend component. F.eks. en kontaktformular der sender en e-mail notifikation og viser en takke-besked i frontenden. <\/p>\n\n\n\n

I Next.js 14 er server actions blevet stabil og klar til produktion. Server-actions l\u00f8ser det f\u00f8rn\u00e6vnte problem og g\u00f8r det muligt at skrive server-side koden direkte i samme fil som laver din frontend kode. Alts\u00e5 kan du lave en kontaktformular som POST\u2019er til din server actions, som sender en e-mail notifikationer, gemmer en log i databasen og sender en takke-besked til brugeren i frontenden. Alt dette i samme fil. Det betyder ogs\u00e5 f\u00e6rre filer bliver sendt til brugeren, hvilket er endnu hurtigere og ogs\u00e5 bedre for SEO. <\/p>\n\n\n\n

<\/span>Delvis rendering \u2013 send statisk HTML direkte til brugeren <\/span><\/h2>\n\n\n\n

For nogle \u00e5r tilbage blev det meget popul\u00e6rt at sende en tom HTML-skal til brugeren og en stor Javascript fil, som s\u00e5 renderer din side. Det betyder at brugeren f\u00f8rst skal downloade en stor Javascript-fil og vente p\u00e5 at data hentes fra serveren og til sidst renderes siden. Dette er langsomt p\u00e5 mobilforbindelser og s\u00f8gemaskiner kan ikke se dit indhold. <\/p>\n\n\n\n

I de seneste \u00e5r er man g\u00e5et over til en teknik kaldet server-side rendering, hvor serveren renderer dit HTML og sender en f\u00e6rdig side til brugeren. Herefter overtager JavaScript og overtager navigationen, hvilket g\u00f8r navigationen ufattelig hurtig. <\/p>\n\n\n\n

Med den nye funktion \u201cpartial rendering\u201d i Next.js, bliver det muligt at server-side rendere specifikke dele af din side. Dette kan give god mening hvis du f.eks. har et dashboard med en masse grafer, som f\u00f8rst skal indl\u00e6se noget data som kan v\u00e6re langsomt, og du ikke vil have at brugeren skal vente p\u00e5 data hentes og klarg\u00f8res. Det kan ogs\u00e5 bruges hvis du har et social medie-feed fra f.eks. Instagram eller X (tidligere Twitter). <\/p>\n\n\n\n

Denne nye funktion er ikke klar endnu og er kun et preview. <\/p>\n

\n
\n

Indhold<\/p>\n<\/span><\/div>\n