Hopp til innhold
Aksel

Grunnleggende

Next.js

StabilOppdatert 29. april 2026

Bundle-optimalisering

Nextjs vil ikke automatisk tree-shake Aksel sin React- og ikonpakke. Dette vil ofte føre til flere hundre kb ekstra bundle-size. Featuren optimizePackageImports løser dette:

next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ["@navikt/ds-react", "@navikt/aksel-icons"]
  }
}

App Router

Ved bruk av @navikt/ds-react i server-components vil komponenter med dot-notation ikke fungere. Dette er en svakhet i hvordan Nextjs sin webpack-bundler håndterer optimalisering mellom server og client.

På grunn av dette må du importere og bruke komponentene uten dot-notation. Alle komponenter finnes tilgjengelig på path @navikt/ds-react/<Komponentnavn> uten dot-notation.

Før
import { ExpansionCard } from "@navikt/ds-react";


<ExpansionCard aria-label="Demo">
  <ExpansionCard.Header>
    <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
  </ExpansionCard.Header>
  <ExpansionCard.Content>
    Innhold
  </ExpansionCard.Content>
</ExpansionCard>
Etter
import { 
  ExpansionCard, 
  ExpansionCardHeader, 
  ExpansionCardTitle, 
  ExpansionCardContent
} from "@navikt/ds-react/ExpansionCard";


<ExpansionCard aria-label="Demo">
  <ExpansionCardHeader>
    <ExpansionCardTitle>Utbetaling av sykepenger</ExpansionCardTitle>
  </ExpansionCardHeader>
  <ExpansionCardContent>
    Innhold
  </ExpansionCardContent>
</ExpansionCard>

Dette er bare et problem ved direkte bruk i server-components. Hvis du importerer kode i en komponent, page eller layout med "use client" i toppen vil du kunne importere direkte fra @navikt/ds-react.

Lenker