Next.js har kommet langt, men det er fortsatt mange detaljer som må mestres for å unngå frustrasjon.
Her er de sentrale endringene og hvordan du håndterer de best mulig, slik at det fungerer godt.
#1: Ryddig prosjektstruktur
Med introduksjonen av App Router i Next.js 13 (nå standardisert) er det blitt lettere å organisere prosjekter.
Den nye strukturen gir mulighet til å skille tydelig mellom hva som er routing, komponenter, datahåndtering og funksjonsområder. Dette gir et solid rammeverk for skalering og forenkler samarbeidet i team.
En gjennomtenkt prosjektstruktur reduserer kaos, gir bedre navigasjon og gjør koden mer forutsigbar.
Konseptet er enkelt: App Router håndterer routing, mens datahåndtering og validering flyttes til egne TypeScript-filer uten JSX. Komponenter og funksjonalitet organiseres i mapper som samler alt relevant for én del av applikasjonen.
Denne separasjonen gir en klar ansvarsfordeling, og bruk av use server på datahentingsfunksjoner sikrer at de kan brukes trygt overalt i prosjektet.
#2: Forstå det store bildet: Tre soner for kode
Jeg deler prosjektet konseptuellt inn i tre “soner”, hver med sitt eget ansvar:
- Delt kode (den grønne boksen) er komponenter, konstanter, og typer som skal være tilgjengelig for hele applikasjonen. Ingenting utenfor denne sonen får importere fra den.
- Navigasjon og data(den røde boksen) er for å forberede nødvendig data og definere hva som skal skje når brukeren navigerer.
- Funksjonalitet (den blå boksen) inneholder interaktive komponenter og logikk spesifikt for brukeropplevelsen. Den er «self-contained», altså ingen imports fra søsken- eller undermapper.
Ingen piler går fra grønn boks. Ingen blå piler går til rød boks. Og ingen blå piler går fra undermapper og oppover. Dette tvinger på en ryddighet som gjør livet enklere for deg selv — og for teamet ditt.
#3: Datahåndtering uten frustrasjon
Tidligere var datahenting i Next.js preget av komplekse løsninger som getServerSideProps og getStaticProps. Disse er nå erstattet av enklere serverfunksjoner.
Data hentes via dedikerte funksjoner som også validerer innholdet før det sendes videre. Dette er en viktig forbedring fordi det skaper en strømlinjeformet og sikker dataflyt.
For eksempel kan en funksjon hente data basert på URL-parametere og validere resultatene med Zod før det returneres.
På denne måten unngår man gjentakelser og potensielle feil. Ved å wrappes i håndteres forsinkelser sømløst, noe som forbedrer brukeropplevelsen betraktelig.
#4: Features: Røddig måte å gruppere kompleksitet
Features-mappen er et konsept som grupperer logikk og funksjonalitet for spesifikke deler av applikasjonen. Dette er nyttig fordi det sørger for at kode relatert til én del, for eksempel fakturaer eller profiler, holdes samlet og selvstendig.
Dette grepet gir god oversikt og hindrer uønskede avhengigheter.
Alt som trengs for en feature, inkludert komponenter, hooks, og verktøyfunksjoner, legges i egne mapper, og det sikrer at funksjonaliteten kan utvikles og testes isolert.
Dette er spesielt verdifullt i større prosjekter der flere utviklere jobber samtidig.
Ny Next.js ute – Petter er spesielt glad for én nyhet
#5: Interaktivitet og skjemaer
En av de største forbedringene i Next.js 15 er introduksjonen av server actions. Dette er funksjoner som kjører på serveren og håndterer data direkte fra klientsiden, uten behov for separate API-endepunkter.
Dette gir en dramatisk forenkling av hvordan skjemaer og interaktivitet bygges.
Nå kan man validere data både på klient- og serversiden uten ekstra kompleksitet. For eksempel kan en server action håndtere innsending av et skjema, validere dataene og returnere et resultat uten å lage en egen API-handler.
Denne metoden reduserer antall lag i applikasjonen og gir raskere og mer sikker databehandling.
#6: Caching
Caching i Next.js har blitt mer eksplisitt med use cache. Dette gir bedre kontroll over hvordan data lagres og hentes, og åpner for tilpassede strategier som balanserer ytelse og ferskhet.
Dette er spesielt nyttig for applikasjoner med mye statisk eller sjelden oppdatert innhold, som produktlister eller artikler.
Ved å kombinere cache-profiler med suspense kan man sørge for at data alltid lastes smidig, uten at brukeropplevelsen forstyrres. Dette gjør applikasjoner raskere og mer responsive.
#7: Turbopack
Next.js har introdusert Turbopack, en ny bundler skrevet i Rust, som er mye raskere enn Webpack.
Selv om den fortsatt er i experimental mode, gir den en merkbar forbedring i utvikleropplevelsen, særlig ved hot-reloading og oppstart av utviklingsserveren.
Denne endringen betyr at utviklere kan jobbe raskere og mer effektivt.
Konseptuelt fungerer Turbopack som en erstatning for Webpack, men med fokus på hastighet og skalerbarhet.
Det krever kun mindre justeringer i prosjektoppsettet for å aktivere, og leverer imponerende resultater, spesielt i komplekse prosjekter.
Oppsummert
Next.js 15 har raffinert plattformen til å bli både kraftigere og mer intuitiv.
Endringene gjør det enklere å jobbe med prosjektstrukturer, datahåndtering, funksjonalitet og ytelse.
Med disse grepene får man ikke bare ryddigere kode, men også en mer effektiv utviklingsprosess og bedre sluttresultat.
