Grunnleggende
Nextjs
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.
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.
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>
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
.