Bygg modern webb-app med Next.js 2026
App Router, React Server Components, Server Actions och allt du behöver veta för att bygga en produktionsklar webbapplikation med Next.js.
Därför är Next.js standarden 2026
Next.js har gått från "React-ramverk" till "fullstack-plattform". Med App Router, React Server Components och Server Actions kan du bygga allt från statiska sidor till komplexa SaaS-applikationer - med en enda kodbas.
Varför team väljer Next.js
- Fullstack i en kodbas: frontend + API + server logic
- Inbyggd routing, layouts, loading states, error boundaries
- Optimerad för Vercel men deployas överallt (Docker, Node, Cloudflare)
- Största ekosystemet: shadcn/ui, next-auth, tRPC, Prisma
- SEO-optimerat by default med SSR och metadata API
App Router-arkitektur
App Router (introducerad i Next.js 13, stabil sedan 14) ersätter Pages Router med en filbaserad arkitektur byggd på React Server Components.
Filbaserad routing
app/page.tsx = /, app/about/page.tsx = /about. Layouts, loading, error och not-found på varje nivå.
Nested Layouts
layout.tsx delas mellan child-routes. Persisterar state vid navigation. Perfekt för dashboards, sidebars.
Loading UI
loading.tsx visas automatiskt under navigation. Använd React Suspense för granulär kontroll.
Error Boundaries
error.tsx fångar fel per route-segment. Isolerar krascher så hela appen inte går ner.
React Server Components (RSC)
RSC är den största förändringen i React sedan hooks. Komponenter körs på servern som default - de skickar ingen JavaScript till klienten. Resultatet: mindre bundles, snabbare sidladdning, direkt databasaccess.
RSC vs Client Components
| Egenskap | Server Component | Client Component |
|---|---|---|
| JavaScript till klient | Nej (0 KB) | Ja |
| Databasaccess | Direkt (async/await) | Via API |
| useState/useEffect | Nej | Ja |
| Event handlers | Nej | Ja (onClick etc.) |
| Default i App Router | Ja | Krav: "use client" |
Server Actions
Server Actions låter dig kalla serverfunktioner direkt från klient-komponenter - utan att skapa API-routes manuellt. De använder "use server"-direktivet och hanterar formulär, mutationer och revalidering.
Form handling
Bind direkt till <form action={serverAction}>. Fungerar utan JavaScript (progressive enhancement).
Revalidation
revalidatePath() och revalidateTag() invaliderar cache efter mutation. Snabb uppdatering utan page reload.
Optimistic UI
useOptimistic() visar ändringen direkt medan servern processar. Bäst för snabb UX.
Error handling
try/catch i server action + useActionState för att visa fel i UI:t.
4 rendering-strategier
| Strategi | När | Exempel | Cache |
|---|---|---|---|
| SSG (Static Site Generation) | Innehåll som sällan ändras | Blogg, dokumentation, landningssidor | Build time, CDN |
| ISR (Incremental Static Regen) | Innehåll som uppdateras periodiskt | Produktsidor, nyheter, prislistor | Revalidate: 60s-3600s |
| SSR (Server-Side Rendering) | Personaliserat eller realtidsdata | Dashboard, sök, kundportal | Per request |
| CSR (Client-Side Rendering) | Interaktiva widgets, inga SEO-krav | Chat, editor, realtidsdiagram | Klient-state |
Data fetching best practices
Principer
- Fetcha data i Server Components - närmast datakällan
- Använd fetch() med Next.js cache-options (revalidate, tags)
- Parallella requests med Promise.all() - undvik waterfalls
- Streaming med Suspense för progressiv rendering
- SWR eller React Query för klient-side data som kräver polling
Auth med NextAuth (Auth.js)
NextAuth (numera Auth.js) är de facto-standarden för autentisering i Next.js. Stöder 50+ providers, sessions, JWT, och database adapters.
OAuth Providers
Google, GitHub, Microsoft, LinkedIn etc. En-klicks login med minimal konfiguration.
Credentials
Email/password med bcrypt. Krav: rate limiting, CSRF-skydd.
Session Strategy
JWT (stateless, snabbt) eller Database sessions (revokerbara, mer kontroll).
Middleware Auth
Skydda routes med middleware.ts. Kontrollera session innan sidan ens laddas.
Deployment: Vercel vs Alternativ
| Plattform | Bäst för | Pris | Notering |
|---|---|---|---|
| Vercel | Snabbast DX, bäst Next.js-stöd | Pro $20/dev/mo | Skapad av Next.js-teamet. Edge runtime, analytics, preview deploys. |
| Cloudflare Pages | Edge-first, låg kostnad | Free tier generöst | OpenNext-adapter behövs. Begränsat Node.js API-stöd. |
| Docker + VPS | Full kontroll, predictable cost | ~$20-50/mo | Krav: eget CI/CD, SSL, monitoring. Bäst för on-prem-krav. |
| Railway / Render | Enkel deploy utan Vercel | Usage-based | God DX, auto-scaling, databasstöd. |
Typisk SaaS-stack 2026
Här är den stack vi rekommenderar för ett nytt SaaS-projekt 2026. Optimerad för snabb start, låg kostnad och skalbarhet.
| Lager | Verktyg | Varfor |
|---|---|---|
| Framework | Next.js 15+ (App Router) | Fullstack, RSC, Server Actions |
| Språk | TypeScript (strict) | Typsäkerhet, refactoring, DX |
| Styling | Tailwind CSS + shadcn/ui | Snabb utveckling, konsistent design |
| Databas | PostgreSQL (Supabase/Neon) | Serverless Postgres, gratis tier |
| ORM | Drizzle | Typsäker, SQL-nära, snabb |
| Auth | Auth.js (NextAuth) | 50+ providers, gratis |
| Payments | Stripe | Bäst API, svenska kronor |
| Resend + React Email | Transaktionell email med React | |
| Hosting | Vercel | Zero-config, preview deploys |
| Analytics | PostHog | Product analytics + feature flags |
Vanliga frågor
App Router eller Pages Router?
App Router för alla nya projekt. Pages Router är stabilt men får inga nya features. Migrering behöver inte göras på en gång - de kan samexistera.
Next.js eller Remix?
Next.js för de flesta team. Remix om du vill ha maximal kontroll över HTTP och föredrar web standards över Next.js-magi. Ekosystemet är 10x större för Next.js.
Måste vi använda Vercel?
Nej. Next.js kan deployas på Docker, Cloudflare, AWS, Railway etc. Men Vercel ger bäst DX och snabbast deploy-cykel.
Hur hanterar vi SEO?
Metadata API (generateMetadata), sitemap.ts, robots.ts, structured data med JSON-LD. Next.js gör det mesta automatiskt.
Simon Axelsson
Grundare, SIAX Technology AB
Bygger med Next.js sedan version 12. siax.io är byggt med Next.js 15, App Router, TypeScript och Tailwind - exakt den stack som beskrivs i denna guide.