Migrate nextjs from 13 to 16

.envrc.json

@@ -24,6 +24,14 @@
       "example": "http://localhost:8000/static/sdk/open-forms-sdk.js",
       "developmentDefault": "http://localhost:8000/static/sdk/open-forms-sdk.js"
     },
+    {
+      "name": "OPEN_FORMS_MOCK",
+      "description": "Whether to use a mock implementation of the Open Forms API. This can be used for development and testing without needing to set up an actual Open Forms instance.",
+      "required": false,
+      "valueType": "string",
+      "examples": ["true", "false"],
+      "developmentDefault": "false"
+    },
     {
       "name": "OVERIGE_OBJECTEN_API_PORT",
       "description": "Port number for the Overige Objecten API. This is used to access the Overige Objecten API from the frontend.",

ENVIRONMENT_VARIABLES.md

@@ -39,6 +39,7 @@
 | `OPEN_FORMS_API_TOKEN`         | base64      |          | ✅     | Open Forms API token, used to access access forms from the website and the Strapi Dashboard. See: https://open-forms.readthedocs.io/en/stable/configuration/general/cms_integration.html | `pIUa5y9fIImYq2Nf92AUEw==`                                                                            | `pIUa5y9fIImYq2Nf92AUEw==`                                                                            |
 | `OPEN_FORMS_API_URL`           | url         |          |        | URL for the Open Forms v2 API. See: https://open-forms.readthedocs.io/en/stable/developers/embedding.html                                                                                | ``                                                                                                    | `http://localhost:8000/api/v2/`                                                                       |
 | `OPEN_FORMS_CSS_URL`           | url         |          |        | URL for the Open Forms SDK CSS file. See: https://open-forms.readthedocs.io/en/stable/developers/embedding.html                                                                          | ``                                                                                                    | `http://localhost:8000/static/sdk/open-forms-sdk.css`                                                 |
+| `OPEN_FORMS_MOCK`              | string      |          |        | Whether to use a mock implementation of the Open Forms API. This can be used for development and testing without needing to set up an actual Open Forms instance.                        | ``                                                                                                    | `false`                                                                                               |
 | `OPEN_FORMS_SDK_URL`           | url         |          |        | URL for the Open Forms SDK JavaScript file. See: https://open-forms.readthedocs.io/en/stable/developers/embedding.html                                                                   | `http://localhost:8000/static/sdk/open-forms-sdk.js`                                                  | `http://localhost:8000/static/sdk/open-forms-sdk.js`                                                  |
 | `OVERIGE_OBJECTEN_API_CORS`    | url         |          |        | CORS settings for the Overige Objecten API. This is used to access the Overige Objecten API from the frontend.                                                                           | `http://localhost:8000`                                                                               | ``                                                                                                    |
 | `OVERIGE_OBJECTEN_API_PORT`    | port-number |          |        | Port number for the Overige Objecten API. This is used to access the Overige Objecten API from the frontend.                                                                             | `4001`                                                                                                | `4001`                                                                                                |

apps/overige-objecten-api/package.json

@@ -42,8 +42,9 @@
     "lodash.memoize": "4.1.2",
     "lodash.merge": "4.6.2",
     "lodash.snakecase": "4.1.1",
-    "react": "18.3.1",
-    "react-markdown": "9.1.0",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "react-markdown": "10.1.0",
     "rehype-raw": "7.0.0",
     "slugify": "1.6.9",
     "swagger-ui-express": "5.0.1",

apps/overige-objecten-api/vite.config.ts

@@ -5,6 +5,9 @@ import { defineConfig } from 'vite';
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+  },
   build: {
     outDir: 'public/vendor',
     rollupOptions: {

apps/pdc-frontend/custom.d.ts

@@ -1 +1,3 @@
+declare module '@utrecht/component-library-css';
 declare module '*.md';
+declare module '*.css';

apps/pdc-frontend/eslint.config.mjs

@@ -1,3 +1,6 @@
+import next from 'eslint-config-next';
+import nextCoreWebVitals from 'eslint-config-next/core-web-vitals';
+import nextTypescript from 'eslint-config-next/typescript';
 /* eslint-disable import/no-unresolved */
 import { nextJsConfig } from '@frameless/eslint-config/next-js';
 
@@ -11,4 +14,13 @@ const customConfig = {
   },
 };
 
-export default [...nextJsConfig, customConfig];
+export default [
+  ...next,
+  ...nextCoreWebVitals,
+  ...nextTypescript,
+  ...nextJsConfig,
+  customConfig,
+  {
+    ignores: ['node_modules/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
+  },
+];

apps/pdc-frontend/next.config.mjs

@@ -35,6 +35,9 @@ const nextConfig = {
     ];
   },
   images: {
+    // Allow localhost images in dev only (blocked in production for security)
+    // https://nextjs.org/docs/app/api-reference/components/image#dangerouslyallowlocalip
+    dangerouslyAllowLocalIP: process.env.NODE_ENV === 'development',
     remotePatterns: [
       {
         protocol: protocol.replace(/:$/, ''),
@@ -43,20 +46,13 @@ const nextConfig = {
       },
     ],
   },
-  webpack: (config, { isServer }) => {
-    if (!isServer) {
-      config.resolve.conditionNames = ['import', 'require', 'default'];
-    }
-    config.module.rules.push({
-      test: /\.md$/,
-      // This is the asset module.
-      type: 'asset/source',
-    });
-    return config;
-  },
-
-  experimental: {
-    serverActions: true,
+  turbopack: {
+    rules: {
+      '*.md': {
+        loaders: ['raw-loader'],
+        as: '*.js',
+      },
+    },
   },
 };
 

apps/pdc-frontend/package.json

@@ -34,38 +34,38 @@
     "@frameless/utils": "workspace:*",
     "@nl-design-system-unstable/documentation": "1.1.0",
     "@open-formulieren/sdk": "3.4.2",
-    "@playwright/test": "1.45.3",
     "@tanstack/react-query": "4.29.25",
     "@utrecht/component-library-css": "9.0.0",
-    "@utrecht/component-library-react": "13.0.2",
+    "@utrecht/component-library-react": "14.0.0",
     "@utrecht/design-tokens": "5.0.1",
     "@utrecht/flo-legal-decision-tree-client": "1.0.3",
     "@utrecht/flolegal-decision-tree-css": "2.1.2",
     "@utrecht/open-forms-container-css": "2.0.1",
     "@utrecht/open-forms-container-react": "1.0.5",
-    "@utrecht/web-component-library-react": "3.0.12",
-    "accept-language": "3.0.18",
+    "@utrecht/web-component-library-react": "4.0.4",
+    "accept-language": "3.0.20",
     "classnames": "2.3.3",
     "csp-header": "5.2.1",
     "downshift": "7.6.2",
-    "i18next": "22.5.1",
-    "i18next-browser-languagedetector": "7.0.2",
-    "i18next-resources-to-backend": "1.1.4",
-    "is-absolute-url": "4.0.1",
+    "i18next": "26.1.0",
+    "i18next-browser-languagedetector": "8.2.1",
+    "i18next-resources-to-backend": "1.2.1",
+    "is-absolute-url": "5.0.0",
     "lodash.mergewith": "4.6.2",
-    "next": "13.5.6",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-i18next": "12.3.1",
-    "react-loading-skeleton": "3.3.1",
-    "react-markdown": "9.1.0",
+    "next": "16.2.6",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "react-i18next": "17.0.7",
+    "react-loading-skeleton": "3.5.0",
+    "react-markdown": "10.1.0",
     "rehype-raw": "7.0.0",
     "sharp": "0.34.5"
   },
   "devDependencies": {
     "@frameless/eslint-config": "1.2.0",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/client-preset": "4.1.0",
+    "@playwright/test": "1.45.3",
     "@testing-library/jest-dom": "6.4.5",
     "@testing-library/react": "15.0.7",
     "@types/jest": "29.5.12",
@@ -75,13 +75,15 @@
     "@utrecht/multiline-data-css": "2.0.1",
     "@utrecht/spotlight-section-css": "2.0.1",
     "@utrecht/textbox-css": "3.0.1",
-    "eslint-config-next": "13.2.4",
+    "eslint": "9.39.4",
+    "eslint-config-next": "16.2.6",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "raw-loader": "4.0.2",
     "rimraf": "6.1.3",
-    "sass": "1.98.0",
+    "sass": "1.99.0",
     "ts-node": "10.9.2",
-    "wait-on": "7.2.0"
+    "wait-on": "9.0.10"
   },
   "repository": {
     "type": "git+ssh",

apps/pdc-frontend/src/app/[locale]/(openFormsLayout)/error.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import Link from 'next/link';
 import { useParams } from 'next/navigation';
-import { forwardRef, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { PropsWithChildren } from 'react';
 
 import { useTranslation } from '../../i18n/client';
@@ -19,12 +18,12 @@ interface ErrorPageContentProps {
   message?: string;
 }
 
-const ErrorPageContent = forwardRef(({ title, message }: PropsWithChildren<ErrorPageContentProps>) => (
+const ErrorPageContent = ({ title, message }: PropsWithChildren<ErrorPageContentProps>) => (
   <>
     {title && <Heading level={1}>{title}</Heading>}
     {message && <Paragraph>{message}</Paragraph>}
   </>
-));
+);
 
 ErrorPageContent.displayName = 'ErrorPageContent';
 
@@ -61,7 +60,6 @@ export default function Error({ error, reset }: ErrorPageProps) {
           label: t('components.breadcrumbs.label.online-loket'),
           current: false,
         }}
-        Link={Link}
       />
       <main id="main">
         <ErrorPageContent

apps/pdc-frontend/src/app/[locale]/(openFormsLayout)/form/[...slug]/page.tsx

@@ -1,28 +1,27 @@
 import { headers } from 'next/headers';
-import Link from 'next/link';
-import React from 'react';
 
 import { useTranslation } from '@/app/i18n';
-import { Breadcrumbs, Heading1 } from '@/components';
+import { Heading1 } from '@/components';
+import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { OpenFormsEmbed } from '@/components/OpenFormsEmbed/OpenFormsEmbed';
 import { openFormValidator } from '@/util';
-import { createOpenFormsApiUrl, createOpenFormsCssUrl, createOpenFormsSdkUrl } from '@/util/openFormsSettings';
+import { createOpenFormsClientApiUrl } from '@/util/openFormsSettings';
 
 type FormPageProps = {
-  params: {
+  params: Promise<{
     locale: string;
     slug: [formId: string, formStep: string];
-  };
+  }>;
 };
 
-const FormPage = async ({
-  params: {
+const FormPage = async (props: FormPageProps) => {
+  const params = await props.params;
+  const {
     locale,
     slug: [formId],
-  },
-}: FormPageProps) => {
+  } = params;
   const { t } = await useTranslation(locale, 'common');
-  const nonce = headers().get('x-nonce') || '';
+  const nonce = (await headers()).get('x-nonce') || '';
   const formInfo = await openFormValidator({ formId });
 
   return (
@@ -50,14 +49,11 @@ const FormPage = async ({
           label: t('components.breadcrumbs.label.products'),
           current: false,
         }}
-        Link={Link}
       />
       <main id="main">
         <div className="utrecht-form-container utrecht-form-container--openforms">
           <OpenFormsEmbed
-            apiUrl={createOpenFormsApiUrl()?.href || ''}
-            sdkUrl={createOpenFormsSdkUrl()?.href || ''}
-            cssUrl={createOpenFormsCssUrl()?.href || ''}
+            apiUrl={createOpenFormsClientApiUrl() || ''}
             nonce={nonce}
             slug={formId}
             fallback={formInfo ? <Heading1>{formInfo.name}</Heading1> : null}

apps/pdc-frontend/src/app/[locale]/(openFormsLayout)/form/error/[errorKey]/page.tsx

@@ -1,5 +1,3 @@
-import Link from 'next/link';
-
 import { GetOpenFormsErrorPageQuery } from '../../../../../../../gql/graphql';
 
 import { useTranslation } from '@/app/i18n';
@@ -13,8 +11,8 @@ type ParamsType = {
 };
 
 interface OpenFormsErrorPageProps {
-  params: ParamsType;
-  searchParams: { [key: string]: string | undefined };
+  params: Promise<ParamsType>;
+  searchParams: Promise<{ [key: string]: string | undefined }>;
 }
 
 type ErrorKey = 'formulier-niet-gevonden' | 'formulier-server-is-offline' | 'form-not-found' | 'form-server-down';
@@ -30,15 +28,17 @@ const getMappedError = (key: string): NormalizedError => {
   return mappedErrorKies[normalized];
 };
 
-const OpenFormsErrorPage = async ({ params: { errorKey, locale } }: OpenFormsErrorPageProps) => {
+const OpenFormsErrorPage = async (props: OpenFormsErrorPageProps) => {
+  const params = await props.params;
+  const { errorKey, locale } = params;
   const { t } = await useTranslation(locale, ['open-forms-error-pages', 'common']);
   const type = getMappedError(errorKey);
   const { data } = await fetchData<{ data: GetOpenFormsErrorPageQuery }>({
     url: getStrapiGraphqlURL(),
     query: GET_OPEN_FORMS_ERROR_PAGE,
     variables: { locale, type },
   });
-  const openFromsErrorPageData = data?.openFormsErrorPages[0];
+  const openFormsErrorPageData = data?.openFormsErrorPages[0];
 
   return (
     <div>
@@ -65,11 +65,10 @@ const OpenFormsErrorPage = async ({ params: { errorKey, locale } }: OpenFormsErr
           label: t('components.breadcrumbs.label.online-loket'),
           current: false,
         }}
-        Link={Link}
       />
       <main id="main">
-        <Heading level={1}>{openFromsErrorPageData?.title}</Heading>
-        {openFromsErrorPageData?.body && <Markdown>{openFromsErrorPageData.body}</Markdown>}
+        <Heading level={1}>{openFormsErrorPageData?.title}</Heading>
+        {openFormsErrorPageData?.body && <Markdown>{openFormsErrorPageData.body}</Markdown>}
       </main>
     </div>
   );