Next.js er et React-framework, der tilføjer byggeklodser til React, og giver yderligere struktur, funktioner og optimeringer til webapplikationer på tværs af platforme. Moderne webapplikationer skal i dag tage højde for mange ting – heriblandt brugerinterface, routing, datahåndtering, rendering, integrationer, infrastruktur, performance, skalerbarhed, udvikler-oplevelse og meget mere.
Bygger din virksomhed i dag webapplikationer på React, så ved du, at det kan være et større og tidskrævende arbejde at bygge en webapplikation i React fra bunden, og her kommer Next.js. som et handy framework. Du kan bygge din webapplikation i React, og trinvist implementere eksempelvis routing, datahåndtering og integrationer ved hjælp af Next.JS features – eller du kan bygge hele din webapplikation op omkring Next.JS fra bunden.
Frameworket er blandt andet udviklet til at lette udviklerarbejdet med forskellige typer af webapplikationer som komplekse apps og porteføljer som SoMe platforme, Headless CMS, tools der er bygget som webapplikationer, og meget mere. Derudover kommer frameworket med en lang række fordele på marketing-siden, som jeg vil komme nærmere ind på nedenfor.
Frameworket er ekstremt fleksibelt, og der er kun få begrænsninger på, hvad du kan bygge med det, hvilket er en kæmpe fordel, som måske også er grunden til, at store virksomheder som TikTok, Twitch, Nike, og mange mange flere, anvender frameworket i dag. På den mere kritiske side skal det dog nævnes, at et skift til Next.js kan være dyrt og tidskrævende, afhængigt af projektets udgangspunkt, størrelse og kompleksitet. Derfor anbefaler vi også, at du laver en analyse for og imod, før du giver dig i kast med frameworket.
I indlægget kommer jeg omkring både de helt åbenlyse fordele, men også potentielle faldgruber, som du skal være opmærksom på, når du overvejer at bruge Next.js.
- Top SEO-performance
- Minimer loadtider markant ved at bruge multi zones
- Eksempel: Trivago
- Potentielle faldgruber
- Next.js key features
- Konklusion
Top SEO-performance
Moderne webapplikationer skal være hurtige, optimerede og kunne en hel masse på samme ting, såsom at hente en stor mængde af data og vise det til slutbrugeren på splitsekunder.
Det høje krav til performance er i høj grad i fokus hos søgemaskiner som Google, der blandt andet giver websites en performance score, som er medbestemmende for, hvordan websitet rangerer.
Her kommer marketingfolk ofte i knibe, da den form for udfordringer kan kræve høj teknisk viden at løse. Her kommer Next.js med en række værktøjer til at løse performanceproblemer nemmere, end vi hidtil har været vant til.
Hvis du har et single page interface (SPA), der volder SEO-mæssige udfordringer, kan Next.js desuden stærkt anbefales, da det er bygget med built-in funktionalitet til at løse mange af de udfordringer, der ofte kommer med SPA’er.
Hvis du allerede har apps som er bygget i React eller har planer om at gøre det, så skal du læse med her, for Next.js kan hjælpe med at løse en stor del af de udfordringer, du kan støde på med din React-app.
Udfordringer med at køre React-baserede webapplikationer kan være følgende. Måske er du selv stødt på nogle af dem:
- Den indledende sideindlæsning kan være langsom for brugeren, fordi al JavaScript skal indlæses, før siden loades
- Indlæsning af billeder sløver applikationen
- Du har muligvis problemer med søgemaskineoptimering (SEO), da søgemaskiner skal indeksere din applikation for at få information fra din webapplikation.
- Manglende muligheder for renderings-typer af content (Server-Side Rendering, Static Site Generation, and Client-Side Rendering)
Hvis I står med nogle af de ovennævnte udfordringer eller bare generelt ønsker at få optimeret jeres webapplikation og gøre den skalerbar, så er Next.js bestemt relevant at kigge ind i, og kan måske være med til at booste jeres performance i den lange bane.
Minimer loadtider markant ved at bruge Multi Zones
Next.js understøtter rige muligheder for tilpasning til det enkelte behov. En af disse tilpasningsmuligheder er Multi Zones.. En zone defineres som en afgrænsning/del/område af en app. Med Multi Zones merges flere zoner til én samlet app.
Med andre ord kan der bygges zoner til hver sektion af et website, som f.eks. kategorisider, produktsider, kurv, mv. i e-commerce, eller servicesider, om-sider, kommercielle landing pages og lead generation -sider i en b2b-kontekst.
Det er dermed muligt at afgrænse de enkelte zoner i den samlede app/site, så hvis en bruger tilgår en kategoriside, loades ressourcer til andre dele af sitet ikke, da de ikke skal benyttes for at servere indholdet til den pågældende side. Dermed øges effektiviteten ved ikke at hente “unødvendige” filer og server requests, som belaster brugerens ventetid.
Eksempel: Trivago
Prissammenligningstjenesten for hoteller Trivago, omskrev deres platform fra en backend baseret på PHP og frontend på Javascript, til en Type-script løsning baseret på Next.js. Efter implementeringen reducerede Trivago den gennemsnitlige sidestørrelse fra 2,1 MB til 1,7 MB – en reduktion på 37%.
Samtidigt skabte de en øget effektivitet ved at kunne øge antallet af daglige code releases. Dermed blev det muligt at skabe en bedre brugeroplevelse gennem kortere loadtider og som stillede lavere hardwarekrav til brugernes devices for at kunne skabe en gnidningsfri oplevelse.
Trivago kunne via analytics data udpege Android 6.0 som det dårligst-performende operativsystem blandt platformens brugere. Gennem implementering af Next.js fokuserede de derfor på at skabe en effektiv og friktionsfri performance-oplevelse for brugere med Android 6.0.
Potentielle faldgruber
Inden du kaster dig hovedkulds ud i en større implementering af Next.js vil jeg lige kort opridse nogle af de faldgruber, som kan være afgørende for, om det bør bruges til jeres næste webapplikation:
Medmindre jeres løsning er koblet op på et CMS, vil ændringer kræve, at der skal en webudvikler ind over. I langt de fleste tilfælde vil ændringer kræve custom code. Det gælder dog også, når du arbejder med React, men React kommer til gengæld med langt flere GUI-apps, som kan hjælpe med frontend-udviklingen.
Plugin-økosystemet i Next.js er ikke imponerende. Selvom økosystemet af plugins er meget effektivt, er webudviklerne begrænset i deres muligheder for at ændre eller udvide eksisterende plugins. Dette kan være en stor hindring for udviklere, der ønsker at skabe unikke oplevelser for deres brugere.
Frameworket kommer ikke med en indbygget state manager, hvilket gør opsætning og vedligehold lidt mere omstændeligt. Det er muligt at implementere eksterne state managers, men her er det værd at bemærke, at løsningen ikke vil være struktureret efter Next.js-frameworket. På den vis mangler fleksibiliteten som vi kender den fra eksempelvis Redux og MobX, som har mere sofistikerede funktioner til håndtering af data på tværs af forskellige komponenter.
Derudover kan det være svært at fejlfinde, når noget går galt, fordi du ofte har at gøre med kode, der er abstraheret væk fra visningen.
Grundet det større tids- og ressourcemæssige forbrug ved implementering bliver arbejdet med Next.js ofte betragtet som en omkostningstung løsning, fremfor velkendte CMS’er som WordPress eller andre platforme, som tilbyder en visuel editor, der nemt kan installeres og dermed gøre udviklingen mindre tung at arbejde med.
Next.js key features
Som nævnt ovenfor, så kommer Next.js med mange built-in features der letter udviklingsarbejdet markant. For overblikkets skyld har jeg valgt at fremhæve nogle af de vigtigste, set med mine briller.
Page-based routing system
I React har du ikke en indbygget router – altså en funktion, der giver brugeren illusionen af at der er flere sider på vores web applikation. En router overvåger URL’en, og når denne ændrer sig, forhindrer den browseren i at sende en anmodning til en server og gengiver i stedet indholdet på siden ved brug af JavaScript. Next.js har i stedet et filbaseret routing-system. Når en fil tilføjes til sidens bibliotek i dit Next.js projekt, så behandles den som en route.
Typer af ruter i Next.js:
Index Routes: index.js-filerne under “pages directory” dirigeres automatisk til rodmappen. For eksempel: Hvis vi opretter en fil i den såkaldte “pages directory” med navnet index.js . Så kunne den tilgås ved at gå til http://localhost:3000/.
Nested Routes: Hvis vi opretter en indlejret mappestruktur, vil vores routes være struktureret på samme måde. For eksempel: Hvis vi opretter en ny mappe kaldet blogs og opretter en ny fil kaldet “about-nextjs.js” inde i mappen, kan vi få adgang til denne fil ved at besøge http://localhost:3000/blogs/about-next.js
Dynamic Routes: Vi kan også acceptere URL-parametre og oprette dynamiske routes ved hjælp af parentes syntaksen “[]”. For eksempel: Hvis vi opretter en ny side under “pages directory” kaldet [id].js, kan den komponent, der eksporteres fra denne fil, få adgang til parameter-id og gengive indhold i overensstemmelse hermed. Dette kan tilgås ved at gå til localhost:3000/[hvilket-som-helst-id]
Built-in CSS og Sass support
Next.js giver dig mulighed for at importere CSS-filer fra en JavaScript-fil. Dette er muligt, fordi Next.js udvider begrebet import ud over JavaScript. Herunder kan man også bruge CSS på komponentniveau. Next.js understøtter disse CSS-moduler ved hjælp af filnavne-konventionen: [name].module.css. Udover dette, så giver Next.js dig mulighed for at importere Sass og gøre brug af både .scss- og .sass-udvidelserne. Du kan også bruge Sass på komponentniveau via CSS-moduler ved at bruge .module.scss eller .module.sass udvidelserne.
Development environment med Fast Refresh-support
Fast Refresh er en ny genindlæsning oplevelse, der giver dig øjeblikkelig feedback på redigeringer foretaget af dine React-komponenter, hvilket gør det meget praktisk og hurtigt at udvikle i. Det beholder og husker samtidigt – også den state du befinder dig i, så når du redigerer dine komponenter, så vil de blive auto-reloaded i samme state, hvilket kan være meget praktisk. Denne feature er aktiveret som standard for alle projekter på Next.js 9.4 eller nyere.
Full-stack-funktioner
Du kan godt bygge en full-stack web applikation med Next.js, og Next.js gør det nemmere for udviklere at tilføje backend-kode til deres JavaScript-baserede projekter og integrere forskellige understøttede databasesystemer, såsom Firebase, MongoDB, MySql osv. hvor det samtidig også har sit eget Authentication system “NextAuth.js” som tillader dig at implementere authentication til din web applikation på få minutter.
Data-fetching: Pre-rendering, static generation (SSG) and server-side rendering (SSR)
Pre-rendering: Som standard præ-renderer Next.js hver side. Det betyder, at Next.js genererer HTML for hver side i forvejen, i stedet for at få det hele gjort af JavaScript på klientsiden. Denne type af præ-rendering resultere ofte i bedre ydeevne og SEO-performance.
Next.js bruger en proces som kaldes for “hydrering”, som gør, at at HTML’en der er generet, er forbundet med minimal JavaScript-kode for den pågældende side. Når en side indlæses af browseren, kører dens JavaScript-kode og gør siden fuldt interaktiv. Denne proces kaldes hydrering.
Next.js har to former for præ-rendering: Static Generation (SSG) og Server-side Rendering. Forskellen er, hvornår den genererer HTML til en side.
Static Generation (SSG): HTML’en genereres på byggetidspunktet og vil blive genbrugt ved hver anmodning.
Server-side Rendering: HTML’en genereres på hver anmodning.
Image Component and Image Optimization
Next.js Image-komponenten, “next/image”, er en udvidelse af HTML-elementet <img>, udviklet decideret til det moderne web. Den inkluderer en række indbyggede ydelsesoptimeringer for at hjælpe dig med at opnå gode Core Web Vitals resultater.
Nogle af de indbyggede optimeringer i billede-komponenten inkluderer:
- Forbedret ydeevne: Viser altid korrekt størrelse billede for hver enhed ved hjælp af moderne billedformater
- Visuel stabilitet: Forhindre kumulativ layout skift automatisk
- Hurtigere sideindlæsninger: Billeder indlæses kun, når de kommer ind i viewporten, med valgfri slørede pladsholdere
- Aktiv Fleksibilitet: On-demand billede “resizing”, selv for billeder gemt på en fjern server.
Meta Tags
Next.js har noget, som hedder “next/head”, som tillader at tilføje diverse meta-elementer til <head>-tagget på siden, så for eksempel titel, metatags som søgeord osv. Dette er en meget vigtig faktor, da det betyder, at vi kan gøre web-app SEO-venlige, og dette kan ofte være udfordrende for JavaScript-baserede web applikationer. Dette er en indbygget feature i Next.js ved brug af “next/head” komponenten.
Konklusion
Next.js kan i mange tilfælde være et godt valg til dine React-baserede webapplikationer eller single page interface-projekter. Det tilbyder ydeevne og optimeringsfunktioner, der vil give dig en SEO-mæssig fordel og gøre din applikation top-performende ift. optimering af pagespeed. Den imponerende grad af fleksibilitet er desuden til at tage og føle på, og netop skalering er en af de centrale fordele med Next.js.
Eksempler på virksomheder der allerede har adopteret det nye framework er bl.a. Trivago og Netflix, som begge har implementeret teknologien, fordi de netop kan eksekvere på feature-requests/løsninger hurtigere, blot fordi Next.js tilbyder så mange fordele hos udviklerne og er designet med hensigten at gøre udviklingen mere effektiv på tværs af platforme og markeder.
Det stiller dog oftest nogle andre krav til virksomheders ressourcer at indfri det fulde potentiale af Next.js, så vær opmærksom på, at de nævnte fordele i indlægget her, kræver kompetencer i både backend og frontend, og at arkitekturen – for virksomheder uden en stærk teknisk partner eller in-house kompetencer, kan møde nogle bump på vejen. Derudover er der begrænsede muligheder for at tilrette eksisterende plugins, hvilket igen fordrer, at unikke funktioner skal bygges fra bunden.
Alt i alt opvejer fordelene i høj grad ulemperne for de fleste typer af projekter og use cases, men i sidste ende afhænger det af kompleksiteten og størrelsen af setup’et samt hvilke specifikke funktioner der er påkrævet.
