Next.js guide för nybörjare på svenska

Next.js är ett ramverk för att bygga snabba, sökbara webbsidor med React. Den här guiden tar dig från noll: vad ramverket är, hur du skapar ett projekt, hur App Router fungerar, hur du hämtar data och lägger på SEO, och hur du får sajten live. Skrivet på svenska för dig som driver ett företag och vill förstå tekniken innan du bygger eller anlitar någon, inte för en van utvecklare.

Vad Next.js är

React är ett bibliotek för att bygga användargränssnitt, men React självt bestämmer inte hur en hel sajt ska hänga ihop. Var hamnar sidorna? Hur laddas rätt innehåll snabbt? Hur syns sidan i Google? Det är precis de frågorna Next.js svarar på. Det är ett ramverk ovanpå React som ger dig routing, rendering på servern, bildoptimering och SEO-verktyg i en och samma låda.

Den viktiga delen för dig som driver företag är att Next.js renderar sidan på servern innan den skickas till besökaren. Det betyder att både Google och en människa får färdig HTML direkt, i stället för en tom sida som fylls i av JavaScript efteråt. Sidan laddar snabbare, och den blir sökbar utan trick. En långsam sajt är en trasig sajt, oavsett hur snygg den är, och det här är ett av ställena där ramverket gör tunga lyftet åt dig.

Next.js underhålls av företaget Vercel och är i dag ett av de vanligaste sätten att bygga seriösa webbsajter i React. Vill du läsa källan direkt finns den officiella Next.js-dokumentationen, men den är skriven för utvecklare. Den här guiden översätter det till vanlig svenska.

Next.js eller WordPress

Den vanligaste frågan jag får är inte "hur bygger jag i Next.js" utan "ska jag ens göra det, eller räcker WordPress". Ärligt svar: det beror på var du är.

WordPress är snabbast att komma igång med. Det finns en färdig mall för i princip varje bransch, en plugin för varje behov, och du kan ha något uppe på en eftermiddag utan att skriva en rad kod. För en sajt som mest ska finnas där är det ofta helt rätt val, och jag säger det utan att rynka på näsan.

Men bygg den i Next.js, inte WordPress, om du frågar mig och sajten är kärnan i affären. I det ögonblick verksamheten börjar tjäna pengar blir mallen en broms: du betalar för funktioner du inte använder, plugins krockar med varandra, och det du faktiskt vill bygga går inte utan att slåss mot temat. Med Next.js äger du koden och sajten är snabb från början i stället för efter tio prestanda-plugins. Skräddarsytt är inte lyx, det är vad du växer in i.

Om du väger de två mot varandra på allvar skrev jag mer om valet mellan färdig plattform och egen kod i Shopify-guiden, för samma logik gäller där.

Vad du behöver innan du börjar

Du behöver förvånansvärt lite. Tre saker:

• Node.js installerat på datorn (version 20 eller senare). Det är motorn som kör allt bakom kulisserna. Hämta den från den officiella sidan och installera, klart.
• En kodredigerare. VS Code är standard och gratis. Vilken som helst duger, men VS Code har bäst stöd för det vi ska göra.
• Grundläggande React. Vet du vad en komponent, en prop och JSX är räcker det för att följa med. Är det helt nytt, ta en snabb React-genomgång först, för Next.js bygger på det.

Du behöver ingen server, ingen databas och inget betalkonto för att börja. Allt det här kör lokalt på din egen dator tills du bestämmer dig för att lägga upp sajten.

Skapa projektet

Next.js har ett kommando som sätter upp allt åt dig. Öppna terminalen och kör:

npx create-next-app@latest min-sajt
cd min-sajt
npm run dev

Första kommandot frågar om du vill använda de rekommenderade standardvalen. Säg ja. Då får du TypeScript, Tailwind CSS för styling, ESLint som fångar fel, App Router och Turbopack som bygger blixtsnabbt. Det är precis den uppsättning jag skulle valt själv, så du slipper fundera.

Efter npm run dev öppnar du http://localhost:3000 i webbläsaren och ser din sajt live på egna datorn. Ändrar du något i koden och sparar uppdateras sidan direkt, utan att du laddar om. Det är den snabba loopen som gör webbutveckling drägligt.

En detalj värd att känna till: sedan Next.js 16 kör bygget på Turbopack som standard, och next build kör inte längre någon lintning automatiskt. Det är småsaker, men de är exempel på att ramverket ändras mellan versioner. Läs alltid dokumentationen för din version i stället för en tre år gammal bloggpost, min egen inkluderad.

App Router: mappar är sidor

Här sitter kärnan i hur Next.js fungerar, och det är enklare än det låter. Mappstrukturen är dina sidor. Skapar du en mapp skapar du en adress. Inuti en app-mapp betyder varje page.tsx en sida:

min-sajt/
  app/
    layout.tsx      ramen runt varje sida
    page.tsx        startsidan (/)
    om/
      page.tsx      sidan /om
    tjanster/
      page.tsx      sidan /tjanster
  public/           bilder och statiska filer

Mappen om med en page.tsx ger dig automatiskt adressen /om. Ingen router att konfigurera, inga rutter att registrera. En sida ser i sin enklaste form ut så här:

// app/page.tsx
export default function Page() {
  return <h1>Hej från min sajt</h1>
}

layout.tsx är ramen som ligger runt varje sida: sidhuvud, meny, sidfot, allt som ska synas överallt. Den skrivs en gång och återanvänds, så du slipper klistra in menyn på varje sida.

Vill du ha en adress som varierar, till exempel ett blogginlägg per artikel, lägger du en mapp med hakparenteser: app/blog/[slug]/page.tsx. Här kommer den enda punkt där nyare Next.js skiljer sig tydligt från äldre exempel du hittar på nätet. Adressens parametrar är numera ett löfte du måste invänta med await:

// app/blog/[slug]/page.tsx
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <h1>Inlägg: {slug}</h1>
}

Ser du en gammal guide som läser params.slug rakt av utan await är den skriven för en tidigare version. Det är en liten sak, men den typen av tyst förändring är själva anledningen att alltid kolla dokumentationen för din version.

Server- och klientkomponenter

Det här är det begrepp som förvirrar flest i början, så jag håller det konkret. I Next.js körs varje komponent på servern som standard. Det är bra: koden kör nära databasen, hemligheter läcker aldrig till besökaren, och mindre JavaScript skickas till webbläsaren. En serverkomponent kan hämta data direkt och skickar färdig HTML.

Ibland behöver du något som bara kan hända i webbläsaren: en knapp som räknar, ett formulär som reagerar på klick, något som använder useState. Då lägger du raden "use client" högst upp i filen, och komponenten blir en klientkomponent:

"use client"
import { useState } from "react"

export default function Raknare() {
  const [antal, setAntal] = useState(0)
  return (
    <button onClick={() => setAntal(antal + 1)}>
      Klickad {antal} gånger
    </button>
  )
}

Tumregeln: håll så mycket som möjligt på servern, och gör bara de små interaktiva bitarna till klientkomponenter. Ju mer som körs på servern, desto snabbare och mer sökbar blir sajten. Nybörjarmisstaget är att sätta "use client" överst i allt av gammal vana, och då tappar du hela poängen med ramverket.

Hämta data

Eftersom serverkomponenter körs på servern kan de hämta data direkt, utan ett separat API i mitten. Du gör komponenten async och använder await, precis som vilken vanlig funktion som helst. Här hämtar en sida produkter ur en databas:

// app/produkter/page.tsx — körs på servern
import { db } from "@/lib/db"

export default async function Page() {
  const produkter = await db.query.products.findMany()
  return (
    <ul>
      {produkter.map((p) => (
        <li key={p.id}>{p.namn}</li>
      ))}
    </ul>
  )
}

Ingen laddningssnurra som poppar in efteråt, ingen extra runda till ett API. Besökaren får en färdig lista direkt. Det här är en av de största praktiska vinsterna med Next.js jämfört med en ren React-app, och det är också varför sidorna rankar bättre: Google får riktigt innehåll, inte en tom sida.

Vill du koppla en riktig databas är Drizzle mot Postgres en kombination jag använder ofta, men det är ett eget kapitel. För den här guiden räcker det att veta att datan hämtas där den behövs, på servern.

SEO och metadata

Det här är där Next.js verkligen skiljer sig från en vanlig React-sajt, och det är förmodligen den viktigaste delen för ett företag. Titeln och beskrivningen som syns i Google sätter du i koden, per sida, med ett metadata-objekt:

// app/layout.tsx
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Min företagssajt",
  description: "Vi bygger snabba sajter i Sundsvall.",
}

Next.js gör om det till rätt <title>- och <meta>-taggar i sidhuvudet åt dig. På en sida som varierar, som ett blogginlägg, byter du ut objektet mot en generateMetadata-funktion som hämtar titeln från datan. Samma princip, bara dynamisk.

Ramverket har också inbyggt stöd för sitemap.ts och robots.ts, alltså sajtkartan och instruktionerna till sökmotorernas robotar, som filer du fyller i. Du får med andra ord den tekniska SEO-grunden på köpet i stället för att jaga en plugin. Vad du sedan gör med den grunden är en egen historia, och den tar jag i den kompletta SEO-guiden för svenska företag.

Deploya på Vercel

När sajten funkar lokalt vill du få den på nätet. Enklaste vägen är Vercel, byggt av samma team som gör Next.js. Du kopplar ditt Git-repo, och varje gång du sparar en ändring och pushar bygger och lägger Vercel upp den nya versionen åt dig. Ingen server att sköta, ingen manuell överföring av filer.

Flödet i praktiken:

1. Lägg koden i ett Git-repo på GitHub.
2. Skapa ett konto på Vercel och importera repot.
3. Vercel känner igen att det är Next.js och bygger det utan konfiguration.
4. Varje git push till huvudgrenen lägger automatiskt upp en ny version.

Vill du inte binda dig till Vercel går det lika bra att köra sajten på en vanlig Node.js-server eller i en Docker-container. Next.js är inte låst till en leverantör. Men för de flesta småföretag är Vercels gratisnivå mer än nog för att komma igång, och du kan alltid flytta senare.

Vanliga misstag

Fel jag ser om och om igen, och som är lätta att undvika:

• Att göra allt till en klientkomponent. Man klistrar in "use client" överallt av gammal React-vana och tappar snabbheten och sökbarheten. Börja på servern, gå till klienten bara när du måste.
• Att följa en gammal guide. Next.js ändras mellan versioner. Ett exempel du hittar på en två år gammal sida kan använda mönster som inte längre gäller, som att läsa adressparametrar utan await.
• Att bygga för smart för tidigt. Den mest imponerande lösningen är sällan den rätta. Ett system du själv förstår om ett år är värt mer än en elegant konstruktion bara du begriper just nu. Börja tråkigt och robust.
• Att strunta i mätning från start. Lägg in enkel besöks- och konverteringsspårning direkt. Utan siffror gissar du, och gissningar är dyra.

Jag byggde ett helt nätverk på åtta sajter på samma ramverk, som en multi-tenant-plattform där varje sajt har egen röst men delar samma kodbas. Poängen med att nämna det är inte storleken, utan att exakt samma Next.js du precis satte upp med ett kommando skalar från en enda sida till ett nätverk utan att du byter verktyg. Du bygger inte om för att du växer, du bygger vidare.

Är Next.js rätt för dig

Om du bara vill ha en enkel sida som finns där, och aldrig tänker röra den, är WordPress eller en enkel sajtbyggare troligen snabbare för dig. Ingen skam i det.

Men är sajten en del av hur du tjänar pengar, om du behöver den snabb, sökbar och möjlig att bygga vidare på i egen takt, då är Next.js svårt att slå. Du får prestanda och SEO inbyggt i stället för påklistrat, och du äger det du bygger. Det är därför jag bygger nästan allt åt kunder i det i dag.

Vill du hellre att någon sätter grunden åt dig, eller bara bolla om Next.js är rätt för just din sajt, är det precis den typen av jobb jag tar. Du kan boka en chattsession så tittar vi på ditt fall, eller titta på tidigare projekt för att se vad som går att bygga.