Steg-för-steg-guide till Next.js 2026 — projektstart, App Router, data fetching, rendering, API-rutter och deployment.
Next.js har etablerat sig som standardramverket för React-applikationer 2026. Med App Router, Server Components och en rad prestandaoptimeringar ur lådan är det första valet för allt från enkla marknadsplatser till komplexa SaaS-plattformar. Next.js 16 fortsätter att driva utvecklingen med förbättrad rendering, snabbare kompilering och djupare molnintegration.
Den här guiden tar dig från en tom terminal till en fullt fungerande Next.js-applikation i produktion. Vi täcker projektinitiering, App Router, sidor och layouts, data fetching med olika renderingsstrategier, API-rutter, styling, miljövariabler, och slutligen deployment. Varje avsnitt bygger på föregående så att du får en sammanhängande förståelse för hela ramverket.
Skapa ett nytt Next.js-projekt
Det enklaste sättet att starta ett Next.js-projekt är med create-next-app. Kör följande i din terminal:
| 1 | npx create-next-app@latest mitt-projekt --typescript --tailwind --eslint --app --turbopack |
Flaggor: --typescript aktiverar TypeScript (standard 2026), --tailwind inkluderar Tailwind CSS, --eslint sätter upp ESLint med Next.js-regler, --app använder App Router (nya standarden), och --turbopack aktiverar Turbopack för snabbare utveckling. När installationen är klar navigerar du till mappen och startar utvecklingsservern: npm run dev.
Din applikation är nu tillgänglig på http://localhost:3000. Öppna projektet i VSCode och utforska strukturen: app/ innehåller dina sidor, app/layout.tsx är rotlayouten, och app/page.tsx är startsidan.
App Router och filbaserad routing
Next.js App Router använder filsystemet för routing. En fil som heter app/om/page.tsx blir automatiskt tillgänglig på /om. Mappar med parenteser som (marketing) grupperar sidor utan att påverka URL:en. Dynamiska routes skapas med hakparenteser: app/blogg/[slug]/page.tsx matchar /blogg/min-artikel.
Skapa din första sida: skapa mappen app/om och lägg till en page.tsx. Skapa en dynamisk route för blogginlägg: app/blogg/[slug]/page.tsx. Next.js skickar parametern som en prop till komponenten via params. App Router stöder också catch-all routes med [...slug] och valfria catch-all med [[...slug]].
Layouts och templates
En layout i Next.js är en React-komponent som omsluter sidor och bevarar tillstånd mellan navigationer. Skapa app/layout.tsx för rotlayouten — här lägger du global navigation, footer och meta-taggar. Layouts kan också nästlas: app/blogg/layout.tsx gäller bara för sidor under /blogg.
Skillnaden mellan layouts och templates är att layouts bevarar tillstånd och inte återrenderas vid navigation inom samma layout, medan templates återrenderas varje gång. Använd layouts för UI-element som är kvar mellan sidbyten (navigation, sidebar) och templates för sidor som behöver nytt tillstånd varje gång (t.ex. sid-specifika animationer).
Data fetching — SSR, SSG och ISR
Next.js erbjuder flera strategier för att hämta data, och du kan blanda dem inom samma applikation. Server Components (standard i App Router) hämtar data direkt på servern och skickar färdig HTML till klienten:
| 1 | async function BlogPage() { |
| 2 | const res = await fetch("https://api.example.com/posts") |
| 3 | const posts = await res.json() |
| 4 | return ( <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul> ) |
| 5 | } |
För statisk generering (SSG) — sidor som byggs en gång vid bygg-tillfället — använder du fetch utan cache: 'no-store'. Next.js cachar automatiskt fetch-anrop under byggnationen. För dynamisk rendering (SSR) lägger du till cache: 'no-store' eller använder export const dynamic = 'force-dynamic'. För ISR (Incremental Static Regeneration) anger du next: { revalidate: 3600 } — sidan byggs statiskt men uppdateras varje timme.
API-routes med Route Handlers
Next.js App Router använder Route Handlers för API-rutter. Skapa en fil under app/api/ för att exponera ett API-endpoint. Här är en enkel API-route för att hantera kontakter:
| 1 | // app/api/contact/route.ts |
| 2 | export async function POST(request: Request) { |
| 3 | const body = await request.json() |
| 4 | // spara till databas eller skicka mail |
| 5 | return Response.json({ message: "Tack för ditt meddelande" }) |
| 6 | } |
Route Handlers stöder GET, POST, PUT, PATCH, DELETE, OPTIONS och HEAD. Du kan också använda dynamiska segment: app/api/posts/[id]/route.ts. För middleware använder du middleware.ts i rotmappen — perfekt för autentiseringskontroller, omdirigeringar och A/B-testning.
Komponenter och Server vs Client
I App Router är alla komponenter Server Components som standard — de renderas på servern och skickar bara HTML till klienten. Det gör sidorna snabbare och minskar JavaScript-blasterna. När du interaktivitet (onClick, useState, useEffect) lägger du till "use client" överst i filen för att göra den till en Client Component.
En bra tumregel: använd Server Components så långt ut som möjligt och flytta bara interaktiva delar till Client Components. Till exempel: en bloggsida är en Server Component som hämtar data, medan kommentarsfältet är en Client Component som hanterar formulärinmatning. Detta mönster ger bästa prestanda och minst JavaScript.
Styling i Next.js
Tailwind CSS är standard-stylinglösningen i Next.js 2026 och rekommenderas för de flesta projekt. Det ger dig utility-klasser direkt i din JSX och treeshakar bort oanvänd CSS vid byggnation. För mer traditionell styling stöder Next.js även CSS Modules (page.module.css), global CSS, Sass och CSS-in-JS-bibliotek som styled-components och Panda CSS.
Next.js 16 har förbättrat stödet för CSS Modules med automatisk scope-hantering och bättre prestanda i utvecklingsläge. För svenska team som arbetar med designssystem rekommenderar jag Tailwind CSS tillsammans med clsx eller tailwind-merge för villkorliga klasser.
Statiska assets och bildoptimering
Next.js Image-komponenten (next/image) är en av ramverkets starkaste funktioner. Den optimerar bilder automatiskt: konverterar till WebP/AVIF, anpassar storlek efter viewport, lazy-loadar bilder under mitten, och förhindrar layout-shift genom att kräva width och height. För externa bilder måste du lägga till domänen i next.config.js under images.remotePatterns.
Statiska filer placeras i public/-mappen och nås från roten (/logo.svg). Använd next/font för att optimera typsnitt — Google Fonts laddas automatiskt och serveras från din egen domän för bästa prestanda. Next.js 16 har också förbättrat stödet för variabla typsnitt.
Miljövariabler och konfiguration
Next.js använder .env.local för lokala miljövariabler, .env.production för produktion och .env.development för utveckling. Variabler som börjar med NEXT_PUBLIC_ exponeras i klienten; övriga är bara tillgängliga på servern. Ladda alltid hemligheter från miljövariabler, aldrig från källkod.
Använd next.config.js eller next.config.ts för avancerad konfiguration: omdirigeringar, rewrites, headers, bilddomäner, webpack-inställningar och experimentella funktioner. Next.js 16 har en renare konfiguration med bättre TypeScript-stöd och validering av config-värden vid byggnation.
Deployment — från lokalt till produktion
Det enklaste sättet att deploya en Next.js-applikation är via Vercel (skaparna av Next.js). Koppla ditt Git-repo, Vercel upptäcker automatiskt att det är ett Next.js-projekt, bygger och deployar. Varje push till main-grenen skapar en ny deployment, och pull requests får egna preview-URL:er. Vercel hanterar SSL, CDN och edge-functions automatiskt.
För självhostad deployment bygger du med npm run build och startar med npm start. Du kan också köra Next.js i Docker: bygg en image med Node.js, kopiera .next-mappen och starta med node .next/server.js. Azure Container Apps och AWS Elastic Beanstalk är populära alternativ för svenska företag som redan använder dessa molnplattformar.
Next.js 16 — nya funktioner
Next.js 16, släppt våren 2026, innehåller flera viktiga förbättringar. Turbopack är nu stabil och används som standard för utvecklingsservern — upp till 10 gånger snabbare hot module replacement än Webpack. Partial Prerendering (PPR) är i stabil beta och kombinerar statisk och dynamisk rendering i samma sida för optimal prestanda.
Server Actions är nu fullt stabila och låter dig anropa serverfunktioner direkt från clientkomponenter utan att skapa API-routes. Next.js 16 har också förbättrat stödet för instrumentation (OpenTelemetry), bättre caching-kontroll med connection() för streaming, och en omarbetad middleware som är snabbare och mer förutsägbar.
Prestandaoptimering
Next.js erbjuder flera inbyggda verktyg för prestandaoptimering. Använd next/image för bildoptimering, next/font för typsnitt, och next/link för automatisk prefetching av länkar. React.lazy och next/dynamic låter dig ladda komponenter dynamiskt för att minska initial bundle size.
För databasanrop, använd React cache-funktionen för att deduplicera anrop inom samma request. Använd streaming och Suspense för att visa delar av sidan medan andra fortfarande laddas. Next.js 16 har förbättrat streaming-prestandan med bättre hantering av asynkrona komponenter och lägre overhead för Suspense-gränser.
Sammanfattning och nästa steg
Next.js 2026 är ett moget, kraftfullt ramverk som passar både små och stora projekt. Du har nu lärt dig att skapa ett projekt, förstå App Router, arbeta med layouts, hämta data med olika strategier, bygga API-rutter och deploya din applikation. Nästa steg är att bygga en riktig applikation — en blogg, en SaaS-plattform eller en e-handelssajt — där du får använda alla dessa koncept i praktiken.
“Next.js 16 med App Router och Server Components är det mest produktiva sättet att bygga moderna webbapplikationer 2026.”
- Simon Axelsson
Vanliga frågor
- Är Next.js bara för React-applikationer?
- Ja, Next.js är ett React-ramverk och kräver React. Det är designat för fullstack React-applikationer med både frontend och backend. För Vue.js-utvecklare är Nuxt.js motsvarigheten. För enklare statiska sidor utan React kan Astro eller 11ty vara bättre alternativ.
- Ska jag välja App Router eller Pages Router 2026?
- App Router är standard och rekommenderas för alla nya projekt 2026. Det har Server Components, förbättrad layout-hantering och bättre prestanda. Pages Router är fortfarande fullt stött men får inga nya funktioner. Migrera gradvis om du har ett befintligt Pages Router-projekt.
- Vad är skillnaden mellan Server Components och Client Components?
- Server Components renderas på servern och skickar bara HTML till klienten — de kan inte använda useState, useEffect eller onClick. Client Components renderas i webbläsaren och har full interaktivitet. Som standard är alla komponenter Server Components; lägg till <code>'use client'</code> när du behöver interaktivitet.
- Hur hanterar Next.js 16 autentisering?
- Next.js är agnostiskt när det gäller autentisering. Populära lösningar 2026 inkluderar NextAuth.js (Auth.js), Clerk, Supabase Auth och Lucia. För serverkomponenter använder du middleware eller Server Actions med sessionshantering. För klientkomponenter använder du context eller bibliotekets egna hooks.
- Kan jag använda Next.js utan Vercel?
- Absolut. Next.js kan deployas var som helst som kör Node.js: Azure Container Apps, AWS ECS, Google Cloud Run, Docker, eller en egen server. Vercel är enklast och har djupast integration, men Next.js är inte låst till en specifik plattform. Flera svenska företag kör Next.js på Azure med goda resultat.
Om författaren
Simon Axelsson är senior IT-konsult och grundare av SIAX Technology AB. Han hjälper nordiska företag med molninfrastruktur, dataplattformar och AI-automation.
Fler artiklar av Simon