Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Grunnleggende

Nextjs

StabilOppdatert 30. april 2025

Bundle optimalisering

I v6 eller nyere av Aksel sin react og ikonpakke vil Nextjs ikke lengre optimalisere tree-shaking av bundle. Dette vil potensielt føre til 200-300kb ekstra bundlesize, noe du bør unngå.

Heldigvis har nextjs en feature optimizePackageImports som løser dette. OBS! Denne er bare tilgjengelig i next v13.5 eller nyere.

JAVASCRIPT
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 lengre fungere. Dette er en svakhet i hvordan Nextjs sin webpack-bundler håndterer optimalisering mellom server og client.

På grunn av dette vil det kreve at du importerer og bruker komponentene uten dot-notation. Alle komponenter finnes tilgjengelig på path @navikt/ds-react/<Komponentnavn> uten dot-notation.

TSX
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>
TSX
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.