Vi bygget om hele plattformen vår fra grunnen av med Next.js 16, React 19, TypeScript og App Router. Her er hvorfor, og hva vi fikk igjen for det.
en
no
frNatasun har alltid handlet om å flytte grenser. Vi var blant de tidlige brukerne av Next.js for flere år siden, og vi har vært på en reise siden den gang — fra WordPress til Laravel, fra Pages Router til App Router, og nå til Next.js 16.
Dette er ikke bare en oppgradering. Det er en fullstendig gjenoppbygging. Hver fil, hvert komponent, hver linje med kode — skrevet om fra grunnen av.
Her er hvorfor vi gjorde det, hva som endret, og hvorfor vi tror det var riktig valg.
Stacken vår var ikke dårlig. Det var Next.js 13 med Pages Router, MUI v5, Redux for statshåndtering, og JavaScript overalt. Det fungerte. Men det hadde vokst til noe tungt.
Stat bodde i over 20 Redux-utklipp. Autentiseringen vår var sydd sammen fra Auth0, Cognito og Firebase — tre forskjellige systemer som knapt snakket med hverandre. Vi hadde JavaScript-filer gjennom hele koden uten type-sikkerhet. Server-side rendering var treg fordi alt gikk gjennom axios HTTP-kall til vår egen API før det nådde databasen.
Resultatet? Trege sideinnlasting, en oppblåst pakke, og en kodebase som var smertefull å jobbe med. Hver nye føltes som å vandre gjennom gjørme.
Visste vi kunne gjøre det bedre.
Next.js 16 med App Router ga oss noe vi hadde lengtet etter: Server-komponenter.
Med Server-komponenter blir de fleste sidene våre rendret på serveren — ikke i nettleseren. Det betyr mindre JavaScript-pakker, raskere førstegangsvisning, og bedre SEO ut av boksen. Ikke flere klient-side vannfall. Ikke flere som venter på at 20 Redux-utklipp skal hydrere før siden ser riktig ut.
Server Actions endret hvordan vi håndterer mutasjoner. I stedet for å opprette API-ruter og kalle dem med axios, kaller vi funksjoner direkte. Rammen håndterer resten — serialisering, feilhåndtering, revalidering.
Og streaming? Sidene våre laster nå progressivt. Brukere ser innhold etter hvert som det ankommer, ikke alt på en gang etter at alt er ferdig lastet.
Vi skrev om hver eneste fil fra JavaScript til TypeScript med streng modus aktivert. Ingen any-typer. Ingen fluktveier.
Dette kan høres ut som mye arbeid — og det var det — men avkastningen har vært umiddelbar. Vi fanger feil ved kompileringstid nå, ikke i produksjon. IDE-en vår vet nøyaktig hva hver funksjon returnerer, hva hvert API-svar ser ut, og hva hvert komponent forventer som props.
For en plattform så kompleks som Natasun — med markedsplass, chatsystem, blogg-CMS, prosjektporteføljer og jobbtabell — er type-sikkerhet ikke en luksus. Det er en nødvendighet.
En av de største arkitekturendringene var hvordan vi henter data. Den gamle stacken vår brukte axios for å kalle våre egne API-ruter, som deretter spurt databasen. Det er et ekstra nettverkshopp for hvert eneste forespørsel.
Nå spør Server-komponenter databasen direkte gjennom Prisma. Ingen axios. Ingen API-ruter imellom. Bare en rett linje fra komponent til database.
Prisma 6 ga oss bedre ytte, forbedret type-sikkerhet, og et skjema som faktisk gjenspeiler datamodellen vår klart. Med over 30 modeller — brukere, innlegg, produkter, bestillinger, fakturaer, prosjekter, jobber, kommentarer og mer — er det avgjørende å ha en vel-typeORM.
Det gamle oppsettet vårt var rotete. Auth0 var konfigurert. Cognito var konfigurert. Firebase var konfigurert. Tre leverandører, tre forskjellige mønstre, tre sett med feil.
Vi erstattet alt med Auth.js v5 — et enkelt, rent autentiseringssystem som støtter Google, GitHub, X (Twitter), LinkedIn og e-post/passord. Det bruker Prisma for lagring av økter, JWT for token, og Cloudflare Turnstile for CAPTCHA.
Kobling av kontoer fungerer sømløst nå. En bruker kan registrere seg med Google, koble GitHub, og senere logge inn med hvilket som helst av dem. Systemet finner det bare ut.
Vi gjenoppbygde ikke bare eksisterende funksjoner — vi la til helt nye. Den største tillegget er vår digitale markedsplass.
Selgere kan legge ut produkter med bilder, kategorier, tagger og priser. Kjøpere kan bla gjennom, legge i handlekurven, og betale med PayPal, kredittkort eller USDT-krypto. Bestillinger spores med full statusarbeidsflyt. Fakturaer genereres automatisk. Omtale og vurderinger hjelper kjøpere med å ta beslutninger.
Alt dette kjører på samme Prisma + Next.js-stack. Ingen tredjeparts e-handelsplattform. Ingen Shopify-innebygginger. Vår markedsplass, vår kode, våre regler.
Natasun betjener et globalt publikum. Vi støtter engelsk, norsk og fransk — med flere språk på vei.
Hvert eneste innhold lagres som et JSON-objekt med språknøkler. URL-er har forstavelsen til lokaliteten (/no/blog, /fr/about-us). Søkemotorer indekserer hvert språk separat. Og vårt i18n-system håndterer alt fra brukergrensesnittoversettelser til datoformatering til valuta visning.
Dette var ikke lett å bygge, men det var avgjørende. Brukerne våre skal ikke måtte snakke engelsk for å bruke plattformen vår.
Hver offentlig side på Natasun genererer nå omfattende strukturerte data. Vi snakker Schema.org-markering for blogginnlegg, jobbannonser, produkter, prosjekter og organisasjonsdata.
OpenGraph- og Twitter Card-metatagger genereres for hver side. Hreflang alternative lenker forteller søkemotorer om alle språkversjoner. Dynamiske nettstedskart og RSS-feeder holder søkemotorer oppdatert.
Dette er ikke SEO som en ettertanke. Det er SEO innbakt i arkitekturen.
Her er en rask oversikt over hva som endret:
Hvert valg var bevisst. Vi byttet ikke biblioteker for moro skyld — vi valgte verktøy som er raskere, enklere å vedlikeholde, og bedre egnet for våre behov.
Denne gjenoppbyggingen er grunnmuren. Vi itererer nå raskt på toppen av den.
Kommer snart: digital nedlasting, abonnementsplaner, forbedrede prosjektssamarbeidsverktøy, bedre analyser for medlemmer, og API-forbedringer for tredjepartsintegrasjoner.
Vi bygger Natasun for å være plattformen der digitale skapere, utviklere og kunstnere faktisk vil jobbe. Og med Next.js 16 har vi endelig grunnmuren for å gjøre det mulig.
Har du tanker? Fant du en feil? Vil du bidra? Ta kontakt med oss eller åpne en sak på GitHub-en vår.
