Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • grunnleggende
      • Hva er Aksel?
      • Kom i gang med kodepakkene
      • Kom i gang med Figma
      • Har du innspill til Aksel?
      • Versjonering i Figma
      • Logo
      • Design tokens
      • Farger
      • Brekkpunkter
      • Typografi
      • Endringslogg
      • Migrering
      • CSS import
      • Kommandolinje
      • Stylelint
      • Tailwind
      • Layout primitives
      • Nextjs
      • OverridableComponent

Nextjs

Oppdatert 30. april 2025Stabil

Innhold på siden

  • Bundle optimalisering
  • App Router

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.

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.

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.

LenkerLenker

  • optimizePackageImports
  • Dot-notation
  • Server-components

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack