React og Next.js

Webutvikling med React og Next.js

En god webapp laster raskt, fungerer med tastatur og skjermleser, og er enkel å videreutvikle. Vi bygger med React 19 og Next.js App Router i TypeScript, med TanStack Query for datahenting, TanStack Form og Zod for skjemaer og validering, og Tailwind CSS med shadcn/ui og Radix for tilgjengelige komponenter.

Webfrontenden i vårt eget open source-prosjekt Canary er bygget med Next.js 16, React 19 og Tailwind CSS 4. Hos Sector Alarm jobbet vi i et utviklingsmiljø med egne team for iOS, Android og React, der kunnskapsdeling på tvers av teamene var en viktig del av arbeidet.

Next.js, ren React eller Astro — slik velger vi rammeverk

Next.js er ikke alltid riktig svar. Vi velger ut fra hva nettstedet eller appen faktisk skal gjøre:

• Next.js når løsningen har innlogging, dynamiske data, mange sidetyper eller behov for god synlighet i søkemotorer. Med App Router og React Server Components kan mye rendres på serveren, slik at mindre JavaScript sendes til nettleseren.
• Ren React som klientapp når løsningen lever bak innlogging, ikke trenger søkesynlighet og snakker med et eksisterende API. Da gir et eget serverlag mer kompleksitet enn gevinst.
• Astro for innholdsdrevne nettsteder der det meste er statisk. Sidene blir raske som standard, og React-komponenter kan fortsatt brukes der det trengs interaktivitet. Dette nettstedet er bygget slik.

Grensen mellom server og klient er det viktigste arkitekturvalget i en Next.js-app. Vi holder klientkomponentene små og tydelig avgrenset, og lar TanStack Query eie data som må oppdateres i nettleseren. Uansett rammeverk bruker vi de samme byggesteinene — TypeScript, Zod og et felles designsystem — slik at komponenter og datalag kan tas med videre om behovene endrer seg.

Flere merkevarer og designsystem

Når flere merkevarer skal ha egne nettsteder, lønner det seg å dele kode. Vi har bygget nettsteder der flere merkevarer deler komponenter, datalag og byggeoppsett, mens hver merkevare har sitt eget innhold, språk og visuelle uttrykk. Designtokens hentes fra Figma og gjøres om til CSS-variabler og Tailwind-tema med Style Dictionary, slik at en endring i designet kan rulles ut til alle nettstedene på en kontrollert måte.