Next.js har kommet langt, men det er fortsatt mange detaljer som må mestres for å unngå frustrasjon.
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.
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.
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.
