Kom i gang på 5 minutter

Har du en server (Next.js, Express, Ktor, …)?
├─ Ja → Bruk SSR via moduler-pakken           ✅ Anbefalt
│        – ingen layout shift
│        – moduler-pakken håndterer miljø, service discovery og fallback automatisk
│
├─ Ja, men kan ikke bruke moduler-pakken
│  (f.eks. ikke-JS-backend)  → Tilpasset SSR-implementasjon  ⚠️ Se nedenfor
│
└─ Nei (ren SPA uten server)  → CSR              ⚠️ Siste utvei

//Via offentlig ingress:                                           
GET https://www.nav.no/dekoratoren/ssr?context=privatperson&language=nb&teamName=min-side.personbruker   
   
// Via Nais service discovery, med access policy fra steg 3:      
GET http://nav-dekoratoren.personbruker/ssr?context=privatperson&language=nb&teamName=min-side.personbruker

{
    "headAssets": "<!-- CSS, favicons → inn i <head> -->",
    "header":     "<!-- Header-innhold → inn rett før appinnholdet -->",
    "footer":     "<!-- Footer-innhold → inn rett etter appinnholdet -->",
    "scripts":    "<!-- <script>-elementer → kan plasseres hvor som helst -->"
}

import { injectDecoratorClientSide } from "@navikt/nav-dekoratoren-moduler";

injectDecoratorClientSide({
    env: "prod",
    params: { 
      context: "privatperson",
      teamName: 'min-side.personbruker',
    },
});

npm install --save @navikt/nav-dekoratoren-moduler

@navikt:registry=https://npm.pkg.github.com

npm login --registry=https://npm.pkg.github.com --auth-type=legacy

- uses: actions/setup-node@v4
  with:
    registry-url: "https://npm.pkg.github.com"

- run: npm ci
  env:
    NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}

accessPolicy:
  outbound:
    rules:
      - application: nav-dekoratoren
        namespace: personbruker

import { fetchDecoratorReact } from "@navikt/nav-dekoratoren-moduler/ssr";
import Script from "next/script";

export default async function RootLayout({ children }: { children: React.ReactNode }) {
    const Decorator = await fetchDecoratorReact({
        env: "prod",
        params: { context: "privatperson", language: "nb" },
    });

    return (
        <html lang="nb">
            <head>
                <Decorator.HeadAssets />
            </head>
            <body>
                <Decorator.Header />
                {children}
                <Decorator.Footer />
                <Decorator.Scripts loader={Script} />
            </body>
        </html>
    );
}

import { fetchDecoratorReact, type DecoratorComponentsReact } from "@navikt/nav-dekoratoren-moduler/ssr";
import Document, { Head, Html, Main, NextScript, type DocumentContext, type DocumentInitialProps } from "next/document";

type MyDocumentProps = DocumentInitialProps & { Decorator: DecoratorComponentsReact };

class MyDocument extends Document<MyDocumentProps> {
    static async getInitialProps(ctx: DocumentContext): Promise<MyDocumentProps> {
        const initialProps = await Document.getInitialProps(ctx);
        const Decorator = await fetchDecoratorReact({
            env: "prod",
            params: { context: "privatperson", language: "nb" },
        });
        return { ...initialProps, Decorator };
    }

    render() {
        const { Decorator } = this.props;
        return (
            <Html lang="nb">
                <Head>
                    <Decorator.HeadAssets />
                </Head>
                <body>
                    <Decorator.Header />
                    <Main />
                    <Decorator.Footer />
                    <Decorator.Scripts />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default MyDocument;

import { fetchDecoratorHtml } from "@navikt/nav-dekoratoren-moduler/ssr";

const { DECORATOR_HEAD_ASSETS, DECORATOR_HEADER, DECORATOR_FOOTER, DECORATOR_SCRIPTS } =
    await fetchDecoratorHtml({
        env: "prod",
        params: { context: "privatperson" },
    });

import { setBreadcrumbs, onBreadcrumbClick } from "@navikt/nav-dekoratoren-moduler";

setBreadcrumbs([
    { title: "Ditt Nav", url: "https://www.nav.no/person/dittnav" },
    { title: "Kontakt oss", url: "https://www.nav.no/person/kontakt-oss", handleInApp: true },
]);

onBreadcrumbClick((breadcrumb) => {
    navigateTo(breadcrumb.url); // bytt med rammerverkets router
});

import { setAvailableLanguages, onLanguageSelect } from "@navikt/nav-dekoratoren-moduler";

setAvailableLanguages([
    { locale: "nb", url: "https://www.nav.no/min-side/nb" },
    { locale: "en", url: "https://www.nav.no/min-side/en", handleInApp: true },
]);

onLanguageSelect((language) => {
    navigateTo(language.url);
});

import { buildCspHeader } from "@navikt/nav-dekoratoren-moduler/ssr";

const myAppDirectives = {
    "default-src": ["min-cdn.nav.no"],
    "style-src": ["css.nav.no"],
};

const csp = await buildCspHeader(myAppDirectives, { env: "prod" });

// Express-eksempel:
app.get("*", (req, res) => {
    res.setHeader("Content-Security-Policy", csp);
    // ...
});

import {
    awaitDecoratorData,
    isStorageKeyAllowed,
    setNavCookie,
    getNavCookie,
    navLocalStorage,
} from "@navikt/nav-dekoratoren-moduler";

// Vent til Dekoratøren har lastet samtykke-data
await awaitDecoratorData();

// Sjekk om en nøkkel er tillatt (uten å skrive)
if (isStorageKeyAllowed("min-nøkkel")) {
    setNavCookie("min-nøkkel", "verdi");
}

// navLocalStorage respekterer samtykke automatisk
navLocalStorage.setItem("min-nøkkel", "verdi");