chore: next 15, react 19, +more bumps

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -6,10 +6,9 @@ const nextConfig = {
         ignoreDuringBuilds: true,
         dirs: ['src'],
     },
+    serverExternalPackages: ['prisma', '@navikt/next-logger', '@slack/bolt'],
     experimental: {
         optimizePackageImports: ['@navikt/ds-react', '@navikt/aksel-icons', 'remeda', 'recharts'],
-        serverComponentsExternalPackages: ['prisma', '@navikt/next-logger', '@slack/bolt'],
-        instrumentationHook: true,
     },
 }
 

package.json

@@ -21,56 +21,56 @@
         "prepare": "husky"
     },
     "dependencies": {
-        "@navikt/aksel-icons": "^7.4.2",
-        "@navikt/ds-css": "^7.4.2",
-        "@navikt/ds-react": "^7.4.2",
-        "@navikt/ds-tailwind": "^7.4.2",
-        "@navikt/next-logger": "^1.34.0",
-        "@navikt/oasis": "^3.4.0",
+        "@navikt/aksel-icons": "^7.8.0",
+        "@navikt/ds-css": "^7.8.0",
+        "@navikt/ds-react": "^7.8.0",
+        "@navikt/ds-tailwind": "^7.8.0",
+        "@navikt/next-logger": "^1.35.0",
+        "@navikt/oasis": "^3.6.0",
         "@prisma/client": "6.1.0",
         "@slack/bolt": "^3.22.0",
         "@slack/logger": "^4.0.0",
         "@slack/types": "^2.14.0",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
-        "next": "^14.2.16",
+        "next": "^15.1.1",
         "next-logger": "^5.0.1",
         "nextleton": "^0.6.1",
         "node-cron": "^3.0.3",
         "pino": "^9.5.0",
-        "postcss": "^8.4.47",
+        "postcss": "^8.4.49",
         "prisma": "6.1.0",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "recharts": "^2.13.2",
-        "remeda": "^2.16.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "recharts": "^2.15.0",
+        "remeda": "^2.18.0",
         "sharp": "^0.33.5",
-        "tailwind-merge": "^2.5.4",
-        "uuid": "^11.0.2",
-        "zod": "^3.23.8"
+        "tailwind-merge": "^2.5.5",
+        "uuid": "^11.0.3",
+        "zod": "^3.24.1"
     },
     "devDependencies": {
-        "@navikt/eslint-config-teamsykmelding": "^6.6.0",
-        "@types/bun": "^1.1.12",
-        "@types/node": "^22.8.5",
+        "@navikt/eslint-config-teamsykmelding": "^7.1.0",
+        "@types/bun": "^1.1.14",
+        "@types/node": "^22.10.2",
         "@types/node-cron": "^3.0.11",
-        "@types/react": "18.3.12",
+        "@types/react": "19.0.2",
         "@types/uuid": "^10.0.0",
-        "@typescript-eslint/eslint-plugin": "^7.18.0",
-        "@typescript-eslint/parser": "^7.18.0",
+        "@typescript-eslint/eslint-plugin": "^8.18.1",
+        "@typescript-eslint/parser": "^8.18.1",
         "autoprefixer": "^10.4.20",
         "eslint": "^8.57.1",
-        "eslint-config-next": "^14.2.16",
+        "eslint-config-next": "^15.1.1",
         "eslint-plugin-import": "^2.31.0",
         "husky": "^9.1.6",
         "lint-staged": "^15.2.10",
-        "pino-pretty": "^11.3.0",
+        "pino-pretty": "^13.0.0",
         "postcss-import": "^16.1.0",
-        "prettier": "^3.3.3",
+        "prettier": "^3.4.2",
         "prettier-plugin-prisma": "^5.0.0",
-        "prettier-plugin-tailwindcss": "^0.6.8",
-        "tailwindcss": "^3.4.14",
-        "typescript": "^5.6.3"
+        "prettier-plugin-tailwindcss": "^0.6.9",
+        "tailwindcss": "^3.4.17",
+        "typescript": "^5.7.2"
     },
     "resolutions": {
         "eslint-plugin-react-hooks": "5.0.0-canary-7118f5dd7-20230705"

src/app/team/[groupId]/[teamId]/graph/page.tsx

@@ -19,14 +19,15 @@ export const metadata: Metadata = {
 }
 
 type Props = {
-    params: {
+    params: Promise<{
         groupId: string
         teamId: string
-    }
+    }>
 }
 
 async function Page({ params }: Props): Promise<ReactElement> {
-    const team = await getTeamByAdGroupAndTeamId(params.groupId, params.teamId)
+    const pageParams = await params
+    const team = await getTeamByAdGroupAndTeamId(pageParams.groupId, pageParams.teamId)
     if (!team) {
         return (
             <div>
@@ -47,7 +48,7 @@ async function Page({ params }: Props): Promise<ReactElement> {
 
     return (
         <div>
-            <BackLink href={`/team/${params.groupId}/${params.teamId}`} />
+            <BackLink href={`/team/${pageParams.groupId}/${pageParams.teamId}`} />
             <Heading size="large">Helsegraf for {team.name}</Heading>
             <Suspense fallback={<Skeleton height={300} variant="rounded" />}>
                 <OverallGraph teamId={team.id} />

src/app/team/[groupId]/[teamId]/page.tsx

@@ -29,14 +29,15 @@ export const metadata: Metadata = {
 }
 
 type Props = {
-    params: {
+    params: Promise<{
         groupId: string
         teamId: string
-    }
+    }>
 }
 
 async function Page({ params }: Props): Promise<ReactElement> {
-    const team = await getTeamByAdGroupAndTeamId(params.groupId, params.teamId)
+    const pageParams = await params
+    const team = await getTeamByAdGroupAndTeamId(pageParams.groupId, pageParams.teamId)
     if (!team) {
         return (
             <div>
@@ -61,7 +62,7 @@ async function Page({ params }: Props): Promise<ReactElement> {
             <Heading size="large">{team.name}</Heading>
             <LinkPanel
                 as={Link}
-                href={`/team/${params.groupId}/${params.teamId}/graph`}
+                href={`/team/${pageParams.groupId}/${pageParams.teamId}/graph`}
                 border
                 className="my-2"
                 prefetch={false}
@@ -71,7 +72,7 @@ async function Page({ params }: Props): Promise<ReactElement> {
             </LinkPanel>
             <LinkPanel
                 as={Link}
-                href={`/team/${params.groupId}/${params.teamId}/results`}
+                href={`/team/${pageParams.groupId}/${pageParams.teamId}/results`}
                 border
                 className="my-2"
                 prefetch={false}

src/app/team/[groupId]/[teamId]/results/page.tsx

@@ -22,14 +22,15 @@ export const metadata: Metadata = {
 }
 
 type Props = {
-    params: {
+    params: Promise<{
         groupId: string
         teamId: string
-    }
+    }>
 }
 
 async function Page({ params }: Props): Promise<ReactElement> {
-    const team = await getTeamByAdGroupAndTeamId(params.groupId, params.teamId)
+    const pageParams = await params
+    const team = await getTeamByAdGroupAndTeamId(pageParams.groupId, pageParams.teamId)
     if (!team) {
         return (
             <div>
@@ -50,7 +51,7 @@ async function Page({ params }: Props): Promise<ReactElement> {
 
     return (
         <div>
-            <BackLink href={`/team/${params.groupId}/${params.teamId}`} />
+            <BackLink href={`/team/${pageParams.groupId}/${pageParams.teamId}`} />
             <Heading size="large">Alle resultater for {team.name}</Heading>
             <Heading size="medium" level="3">
                 Tidligere spørringer

src/auth/authentication.tsx

@@ -13,7 +13,7 @@ import { getMembersOf } from './ms-graph'
  * Validates the wonderwall token according to nais.io. Should only actually redirect if the token has expired.
  */
 export async function validateWonderwallToken(redirectPath: string): Promise<void> {
-    const requestHeaders = headers()
+    const requestHeaders = await headers()
 
     if (isLocal) {
         logger.warn('Is running locally, skipping RSC auth')
@@ -50,11 +50,11 @@ export function getUserToken(headers: Headers): string {
     )
 }
 
-export function getUser(): {
+export async function getUser(): Promise<{
     name: string
     email: string
-} {
-    const token = getUserToken(headers())
+}> {
+    const token = getUserToken(await headers())
     const jwt = JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString('utf8'))
 
     return {
@@ -76,7 +76,7 @@ export async function getUsersGroups(): Promise<string[]> {
     }
 
     if (membersOf['@odata.nextLink'] != null) {
-        const user = getUser()
+        const user = await getUser()
         logger.error(
             `Whops! A user (${user.email}) has more than max page groups (${membersOf.value.length}), time to implement pagination?`,
         )
@@ -85,11 +85,11 @@ export async function getUsersGroups(): Promise<string[]> {
     return membersOf.value.map((group) => group.id)
 }
 
-export function isUserLoggedIn(): boolean {
+export async function isUserLoggedIn(): Promise<boolean> {
     try {
-        getUser()
+        await getUser()
         return true
-    } catch (e) {
+    } catch {
         return false
     }
 }

src/auth/ms-graph.ts

@@ -14,7 +14,7 @@ export async function getMembersOf(): Promise<
         return fakeMembersOfResponse
     }
 
-    const token = getUserToken(headers())
+    const token = getUserToken(await headers())
     const tokenSet = await requestOboToken(token, 'https://graph.microsoft.com/.default')
     if (!tokenSet.ok) {
         logger.error(new Error(`Unable to exchange OBO token: ${tokenSet.error.message}`, { cause: tokenSet.error }))

src/components/LoggedInUser.tsx

@@ -5,7 +5,7 @@ import { Tooltip } from '@navikt/ds-react'
 import { getUser, isUserLoggedIn } from '../auth/authentication'
 
 async function LoggedInUser(): Promise<ReactElement> {
-    if (!isUserLoggedIn()) {
+    if (!(await isUserLoggedIn())) {
         return (
             <div className="flex flex-col items-end p-4">
                 <BodyShort className="w-32 text-right">Ikke logget inn</BodyShort>
@@ -14,7 +14,7 @@ async function LoggedInUser(): Promise<ReactElement> {
         )
     }
 
-    const user = getUser()
+    const user = await getUser()
 
     return (
         <div className="flex gap-4 p-4">

src/components/Teams.tsx

@@ -10,7 +10,7 @@ import Code from './core/Code'
 import TeamCard from './TeamCard'
 
 async function Teams(): Promise<ReactElement> {
-    if (!isUserLoggedIn()) {
+    if (!(await isUserLoggedIn())) {
         return (
             <div className="max-w-prose">
                 <Heading size="large" spacing>

src/instrumentation.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+
 export async function register(): Promise<void> {
     if (process.env.NEXT_RUNTIME === 'nodejs') {
         await require('pino')

tsconfig.json

@@ -12,7 +12,12 @@
         "resolveJsonModule": true,
         "isolatedModules": true,
         "jsx": "preserve",
-        "plugins": [{ "name": "next" }]
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ],
+        "target": "ES2017"
     },
     "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
     "exclude": ["node_modules", "tests", "seed"]