Update Next.js to v16.2.4

eslint.config.mjs

@@ -0,0 +1,41 @@
+import nextConfig from "eslint-config-next/core-web-vitals";
+import prettierRecommended from "eslint-plugin-prettier/recommended";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+    ...nextConfig,
+    ...tseslint.configs.recommendedTypeChecked,
+    ...tseslint.configs.stylisticTypeChecked,
+    prettierRecommended,
+    {
+        languageOptions: {
+            parserOptions: {
+                project: true,
+            },
+        },
+        rules: {
+            "@typescript-eslint/array-type": "off",
+            "@typescript-eslint/consistent-type-definitions": "off",
+            "@typescript-eslint/consistent-type-imports": [
+                "warn",
+                {
+                    prefer: "type-imports",
+                    fixStyle: "inline-type-imports",
+                },
+            ],
+            "@typescript-eslint/no-unused-vars": [
+                "warn",
+                { argsIgnorePattern: "^_" },
+            ],
+            "@typescript-eslint/require-await": "off",
+            "@typescript-eslint/no-misused-promises": [
+                "error",
+                {
+                    checksVoidReturn: { attributes: false },
+                },
+            ],
+            "no-console": "warn",
+            "prettier/prettier": "error",
+        },
+    },
+);

next.config.ts

@@ -20,9 +20,6 @@ const cspHeader = `
     upgrade-insecure-requests;`;
 
 const config: NextConfig = {
-    eslint: {
-        dirs: ["src", "tests"],
-    },
     async headers() {
         return [
             {

package.json

@@ -12,8 +12,8 @@
         "db:deploy": "prisma migrate deploy",
         "db:seed": "tsx ./prisma/seed-database-dummy-data.ts",
         "dev": "next dev --turbo",
-        "lint": "next lint --max-warnings 0",
-        "lint:fix": "npm run lint -- --fix",
+        "lint": "eslint --max-warnings 0 src tests",
+        "lint:fix": "eslint --fix src tests",
         "start": "node ./node_modules/next/dist/bin/next start",
         "typecheck": "tsc --noEmit",
         "test": "npm run build && playwright test"
@@ -53,7 +53,7 @@
         "dotenv": "^16.4.5",
         "jsonwebtoken": "^9.0.2",
         "lucide-react": "^0.476.0",
-        "next": "15.5.12",
+        "next": "16.2.4",
         "next-auth": "^5.0.0-beta.25",
         "next-themes": "^0.4.4",
         "papaparse": "^5.5.2",
@@ -72,17 +72,17 @@
     "devDependencies": {
         "@playwright/test": "1.58.2",
         "@testcontainers/postgresql": "^10.9.0",
-        "@types/eslint": "^8.56.2",
+        "@types/eslint": "^9.6.0",
         "@types/jsonwebtoken": "^9.0.6",
         "@types/k6": "^0.50.0",
         "@types/node": "^20.12.12",
         "@types/papaparse": "^5.3.15",
         "@types/react": "19.0.10",
         "@types/react-dom": "19.0.4",
-        "@typescript-eslint/eslint-plugin": "^7.10.0",
-        "@typescript-eslint/parser": "^7.10.0",
-        "eslint": "^8.56.0",
-        "eslint-config-next": "15.5.12",
+        "@typescript-eslint/eslint-plugin": "^8.0.0",
+        "@typescript-eslint/parser": "^8.0.0",
+        "eslint": "^9.0.0",
+        "eslint-config-next": "16.2.4",
         "eslint-config-prettier": "^10.0.1",
         "eslint-plugin-prettier": "^5.2.3",
         "jest": "^29.7.0",

src/app/administrator-dashboard/page.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { type Metadata } from "next";
 import UserDataTable from "~/components/user-data-table";
 import SearchInput from "~/components/search-user-input";

src/app/find-the-expert/profile-page/page.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import React, { Suspense } from "react";
+import { Suspense } from "react";
 import ButtonSkeleton from "~/components/loading/button-loader";
 import ProfilePageSearch from "~/components/ui/profile-page-search";
 import { prismaClient } from "~/server/db";

src/app/thank-you/page.tsx

@@ -1,6 +1,6 @@
 import { prismaClient } from "~/server/db";
 import PdfDownloadButton from "~/components/download-pdf";
-import React, { Suspense } from "react";
+import { Suspense } from "react";
 import { type QuestionResult, type Question } from "~/models/types";
 
 import { type Metadata } from "next";

src/auth.config.ts

@@ -0,0 +1,91 @@
+import type { DefaultSession, NextAuthConfig } from "next-auth";
+import type { JWT } from "@auth/core/jwt";
+
+import { env } from "~/env";
+
+/**
+ * Module augmentation for `next-auth` types. Allows us to add custom properties to the `session`
+ * object and keep type safety.
+ *
+ * @see https://authjs.dev/getting-started/typescript?framework=next-js
+ */
+declare module "next-auth" {
+    interface Session {
+        user: {
+            id: string;
+            groups: string[];
+        } & DefaultSession["user"];
+    }
+}
+
+const protectedRoutes = [
+    "/find-the-expert",
+    "/survey",
+    "/thank-you",
+    "/result",
+];
+
+const adminRoutes = ["/administrator-dashboard", "/survey/upload"];
+
+type TokenWithGroups = {
+    groups: string[];
+} & JWT;
+
+/**
+ * Base auth configuration that is safe to use in the Edge Runtime (no Prisma / Node.js-only
+ * imports).  The full configuration in `auth.ts` extends this with the database adapter and
+ * the Microsoft Entra ID provider.
+ */
+export const authConfig = {
+    pages: {
+        signIn: "/api/signin",
+    },
+    callbacks: {
+        // Pass the groups to the session, so the frontend can use it
+        session(params) {
+            const session = params.session;
+            const token = params.token as TokenWithGroups;
+            if (session.user) {
+                session.user.id = token.sub ?? "userId";
+                session.user.groups = token.groups ?? [];
+            }
+            return session;
+        },
+        // Put the groups in the token, because we can access the token in other callbacks
+        jwt: async ({ token, profile }) => {
+            if (profile) {
+                token["groups"] = profile["groups"] ?? [];
+            }
+            return token;
+        },
+        authorized: async ({ request, auth }) => {
+            const url = request.nextUrl;
+            // Get the admin group from .env
+            const adminGroup = env.AUTH_MICROSOFT_ENTRA_ID_ADMIN_GROUP;
+            // If the request is for an admin route, check if the user is an admin
+            if (adminRoutes.some((route) => url.pathname.startsWith(route))) {
+                return auth?.user.groups?.includes(adminGroup);
+            }
+            if (
+                protectedRoutes.some((route) => url.pathname.startsWith(route))
+            ) {
+                return !!auth;
+            }
+            return true;
+        },
+    },
+    session: {
+        strategy: "jwt",
+    },
+    /**
+     * No adapter or providers here — Prisma cannot run in the Edge Runtime.  The full `auth.ts`
+     * adds the Prisma adapter and the Microsoft Entra ID provider for server-side use (API routes
+     * and server components).
+     */
+    providers: [],
+    /**
+     * We trust our deployment provider to set the HOST header safely.
+     * @see https://authjs.dev/reference/core#trusthost
+     */
+    trustHost: true,
+} satisfies NextAuthConfig;

src/auth.ts

@@ -1,80 +1,13 @@
 import MicrosoftEntraID from "@auth/core/providers/microsoft-entra-id";
-import NextAuth, { type DefaultSession } from "next-auth";
+import NextAuth from "next-auth";
 
 import { env } from "~/env";
 import { prismaClient } from "~/server/db";
 import type { IPrismaAdapterService } from "~/server/db/prisma-client";
-import type { JWT } from "@auth/core/jwt";
-
-/**
- * Module augmentation for `next-auth` types. Allows us to add custom properties to the `session`
- * object and keep type safety.
- *
- * @see https://authjs.dev/getting-started/typescript?framework=next-js
- */
-declare module "next-auth" {
-    interface Session {
-        user: {
-            id: string;
-            groups: string[];
-        } & DefaultSession["user"];
-    }
-}
-
-const protectedRoutes = [
-    "/find-the-expert",
-    "/survey",
-    "/thank-you",
-    "/result",
-];
-
-const adminRoutes = ["/administrator-dashboard", "/survey/upload"];
-
-type TokenWithGroups = {
-    groups: string[];
-} & JWT;
+import { authConfig } from "./auth.config";
 
 export const { auth, handlers, signIn, signOut } = NextAuth({
-    pages: {
-        signIn: "/api/signin",
-    },
-    callbacks: {
-        // Pass the groups to the session, so the frontend can use it
-        session(params) {
-            const session = params.session;
-            const token = params.token as TokenWithGroups;
-            if (session.user) {
-                session.user.id = token.sub ?? "userId";
-                session.user.groups = token.groups ?? [];
-            }
-            return session;
-        },
-        // Put the groups in the token, because we can access the token in other callbacks
-        jwt: async ({ token, profile }) => {
-            if (profile) {
-                token["groups"] = profile["groups"] ?? [];
-            }
-            return token;
-        },
-        authorized: async ({ request, auth }) => {
-            const url = request.nextUrl;
-            // Get the admin group from .env
-            const adminGroup = env.AUTH_MICROSOFT_ENTRA_ID_ADMIN_GROUP;
-            // If the request is for an admin route, check if the user is an admin
-            if (adminRoutes.some((route) => url.pathname.startsWith(route))) {
-                return auth?.user.groups?.includes(adminGroup);
-            }
-            if (
-                protectedRoutes.some((route) => url.pathname.startsWith(route))
-            ) {
-                return !!auth;
-            }
-            return true;
-        },
-    },
-    session: {
-        strategy: "jwt",
-    },
+    ...authConfig,
     adapter: (
         prismaClient as unknown as IPrismaAdapterService
     ).toPrismaAdapter(),
@@ -96,10 +29,4 @@ export const { auth, handlers, signIn, signOut } = NextAuth({
             },
         }),
     ],
-    /**
-     * We trust our deployment provider to set the HOST header safely.
-     * If you don't trust your deployment provider to set the HOST header safely, you should set this to `false`.
-     * @see https://authjs.dev/reference/core#trusthost
-     */
-    trustHost: true,
 });

src/components/data-tables/data-table.tsx

@@ -30,6 +30,7 @@ export function DataTable<TData, TValue>({
     columns,
     data,
 }: DataTableProps<TData, TValue>) {
+    // eslint-disable-next-line react-hooks/incompatible-library
     const table = useReactTable({
         data,
         columns,

src/components/data-tables/show-data-table.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { useState } from "react";
 import {
     columns,
     aggregateColumns,
@@ -25,7 +25,7 @@ const ShowDataTable = ({
 }) => {
     const searchParams = useSearchParams();
     const currentRole = searchParams.get("role");
-    const [expandedRoles, setExpandedRoles] = React.useState<string[]>([
+    const [expandedRoles, setExpandedRoles] = useState<string[]>([
         Object.keys(aggregatedDataByRole)[0] ?? "",
     ]);
 

src/components/download-pdf.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import React from "react";
 import { Document, Page, Text, View, StyleSheet } from "@react-pdf/renderer";
 import { idToTextMap } from "~/utils/option-mapping";
 import { type AnswerOption, type PdfTransformedData } from "~/models/types";

src/components/mobile/progression-bar.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Button } from "~/components/ui/button";
 import {
     DropdownMenu,

src/components/mode-toggle.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import * as React from "react";
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 

src/components/profile-radar-chart.tsx

@@ -10,6 +10,7 @@ import {
 } from "recharts";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 
+// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
 export type ProfileRadarChartRoleData = { role: string } & {
     [surveyName in string]: number;
 };

src/components/search-user-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Input } from "~/components/ui/input";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -26,6 +26,7 @@ const SearchInput = () => {
         },
     });
 
+    // eslint-disable-next-line react-hooks/incompatible-library
     const { name } = form.watch();
 
     const debouncedUpdateURL = useDebouncedCallback((name: string) => {

src/components/select-communication-method.tsx

@@ -8,7 +8,7 @@ import communicationMethodToIcon from "~/components/ui/communication-method-to-i
 export default function SelectCommunicationMethod({
     userId,
     methods,
-    setCommunicationMethodIsLoading,
+    setCommunicationMethodIsLoading, // eslint-disable-line @typescript-eslint/unbound-method
 }: {
     userId: string;
     methods: CommunicationMethod[];
@@ -18,6 +18,7 @@ export default function SelectCommunicationMethod({
         useState<CommunicationMethod[]>(methods);
 
     useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setSelectedMethods(methods);
     }, [methods]);
 

src/components/select-input.tsx

@@ -32,6 +32,7 @@ function SelectUserSurveyPreferences({
     );
 
     useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setMethods(communicationPreferences?.methods ?? []);
     }, [communicationPreferences]);