feat: upgrade nextjs to v15

nikomakela · nikomakela · commit a49f2f5dbd56 · 2025-11-24T12:42:40.000+02:00
LIIKUNTA-768. Upgrade using NextJS v15 with React 18 (by using codemod tools). It should be noted that this is not a well supported or adviced combination by NextJS. There is no clear statement for supporting it -- only opposite. See more: 1. A blog post that suggests that there should be no issues: https://nextjs.org/blog/next-15#pages-router-on-react-18. 2. An official documentation and migration guide, that clearly states that React v19 should be used: https://nextjs.org/docs/15/app/guides/upgrading/version-15#react-19. 3. 3rd party blog that says it's okay to use React v18 with Pages router: https://www.wisp.blog/blog/can-nextjs-15-app-router-be-used-with-react-18. 4. Yet another page in docs that states that it's okay to use React v18, even with NextJS v16: https://nextjs.org/docs/messages/react-version. NOTE: The codemod fails when it was ran. No matter what is chosen for React v18, it is still upgraded. Similar experiments here: https://www.reddit.com/r/nextjs/comments/1gpb104/comment/lxw60lj/. ---- Step 1: Upgrade the NextJS framework by using a codemod tool `npx @next/codemod@canary upgrade 15.5.5`. Requested codemod wizard to use Turbopack configuration and to keep React v18. Also requested the suggested ESLint upgrade. Ran all the suggested codemods. Ran the same codemod tool in project root, in app roots and in the packages/components. NOTE: There seems to be a bug in the codemod wizard, since when it asks about upgrading the React, it updates the package version anyway, no matter what is chosen. So, those changes needed to be manually reverted. ---- Step 2: Remove changes added by codemod since they are not working Start supporting Turbopack in configuration level. There seems to be still some issues e.g. in stylesheet imports that makes the turbopack not usable. Also, we should separate the server side functiosn from clietn side functiosn much more stricter, which would be a huge job at this point. However, since it's preferred, the configuration is now added for future testing, but it's just not set as default.
diff --git a/apps/events-helsinki/eslint.config.mjs b/apps/events-helsinki/eslint.config.mjs
@@ -36,6 +36,7 @@ export default [
       '@next/next/no-img-element': 'off',
       'jsx-a11y/anchor-is-valid': 'off',
       '@typescript-eslint/naming-convention': 'off',
+      '@typescript-eslint/triple-slash-reference': 'off',
       'vitest/no-commented-out-tests': 'off',
       'vitest/no-disabled-tests': 'off',
       'no-console': 'error',
diff --git a/apps/events-helsinki/next-env.d.ts b/apps/events-helsinki/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/apps/events-helsinki/package.json b/apps/events-helsinki/package.json
@@ -24,7 +24,7 @@
     "get-translations": "node ./scripts/get-translations.js",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --cache --cache-location ../../.cache/eslint/events-helsinki.eslintcache",
     "lint-fix": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --fix",
-    "pre-commit": "next lint --fix",
+    "pre-commit": "eslint --fix .",
     "prepare": "husky",
     "share-static-hardlink": "rimraf ./public/shared-assets && syncdir ../../static/assets ./public/shared-assets --copy",
     "share-static-symlink": "rimraf ./public/shared-assets && symlink-dir ../../static/assets ./public/shared-assets",
@@ -70,7 +70,7 @@
     "ics": "^3.8.1",
     "lodash": "4.17.21",
     "msw": "^2.10.4",
-    "next": "14.2.33",
+    "next": "15.5.5",
     "next-i18next": "15.4.2",
     "postcss": "^8.5.6",
     "query-string": "^9.2.2",
@@ -98,8 +98,8 @@
     "@graphql-codegen/typescript-operations": "4.6.1",
     "@graphql-codegen/typescript-react-apollo": "4.3.3",
     "@graphql-codegen/typescript-resolvers": "^4.5.1",
-    "@next/env": "15.4.1",
-    "@next/eslint-plugin-next": "15.4.1",
+    "@next/env": "15.5.5",
+    "@next/eslint-plugin-next": "15.5.5",
     "@size-limit/file": "11.2.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -125,7 +125,7 @@
     "es-check": "9.1.4",
     "esbuild": "0.25.6",
     "eslint": "9.31.0",
-    "eslint-config-next": "15.4.1",
+    "eslint-config-next": "15.5.5",
     "eslint-config-prettier": "^10.1.5",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
diff --git a/apps/hobbies-helsinki/eslint.config.mjs b/apps/hobbies-helsinki/eslint.config.mjs
@@ -36,6 +36,7 @@ export default [
       '@next/next/no-img-element': 'off',
       'jsx-a11y/anchor-is-valid': 'off',
       '@typescript-eslint/naming-convention': 'off',
+      '@typescript-eslint/triple-slash-reference': 'off',
       'vitest/no-commented-out-tests': 'off',
       'vitest/no-disabled-tests': 'off',
       'no-console': 'error',
diff --git a/apps/hobbies-helsinki/next-env.d.ts b/apps/hobbies-helsinki/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/apps/hobbies-helsinki/package.json b/apps/hobbies-helsinki/package.json
@@ -24,7 +24,7 @@
     "get-translations": "node ./scripts/get-translations.js",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --cache --cache-location ../../.cache/eslint/hobbies-helsinki.eslintcache",
     "lint-fix": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --fix",
-    "pre-commit": "next lint --fix",
+    "pre-commit": "eslint --fix .",
     "prepare": "husky",
     "share-static-hardlink": "rimraf ./public/shared-assets && syncdir ../../static/assets ./public/shared-assets --copy",
     "share-static-symlink": "rimraf ./public/shared-assets && symlink-dir ../../static/assets ./public/shared-assets",
@@ -70,7 +70,7 @@
     "ics": "^3.8.1",
     "lodash": "4.17.21",
     "msw": "^2.10.4",
-    "next": "14.2.33",
+    "next": "15.5.5",
     "next-i18next": "15.4.2",
     "postcss": "^8.5.6",
     "query-string": "^9.2.2",
@@ -98,8 +98,8 @@
     "@graphql-codegen/typescript-operations": "4.6.1",
     "@graphql-codegen/typescript-react-apollo": "4.3.3",
     "@graphql-codegen/typescript-resolvers": "^4.5.1",
-    "@next/env": "15.4.1",
-    "@next/eslint-plugin-next": "15.4.1",
+    "@next/env": "15.5.5",
+    "@next/eslint-plugin-next": "15.5.5",
     "@size-limit/file": "11.2.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -125,7 +125,7 @@
     "es-check": "9.1.4",
     "esbuild": "0.25.6",
     "eslint": "9.31.0",
-    "eslint-config-next": "15.4.1",
+    "eslint-config-next": "15.5.5",
     "eslint-config-prettier": "^10.1.5",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
diff --git a/apps/sports-helsinki/eslint.config.mjs b/apps/sports-helsinki/eslint.config.mjs
@@ -36,6 +36,7 @@ export default [
       '@next/next/no-img-element': 'off',
       'jsx-a11y/anchor-is-valid': 'off',
       '@typescript-eslint/naming-convention': 'off',
+      '@typescript-eslint/triple-slash-reference': 'off',
       'vitest/no-commented-out-tests': 'off',
       'vitest/no-disabled-tests': 'off',
       'no-console': 'error',
diff --git a/apps/sports-helsinki/next-env.d.ts b/apps/sports-helsinki/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/apps/sports-helsinki/package.json b/apps/sports-helsinki/package.json
@@ -25,7 +25,7 @@
     "get-translations": "node ./scripts/get-translations.js",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --cache --cache-location ../../.cache/eslint/sports-helsinki.eslintcache",
     "lint-fix": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --fix",
-    "pre-commit": "next lint --fix",
+    "pre-commit": "eslint --fix .",
     "prepare": "husky",
     "share-static-hardlink": "rimraf ./public/shared-assets && syncdir ../../static/assets ./public/shared-assets --copy",
     "share-static-symlink": "rimraf ./public/shared-assets && symlink-dir ../../static/assets ./public/shared-assets",
@@ -76,7 +76,7 @@
     "leaflet": "1.9.4",
     "lodash": "4.17.21",
     "msw": "^2.10.4",
-    "next": "14.2.33",
+    "next": "15.5.5",
     "next-i18next": "15.4.2",
     "postcss": "^8.5.6",
     "query-string": "^9.2.2",
@@ -105,8 +105,8 @@
     "@graphql-codegen/typescript-operations": "4.6.1",
     "@graphql-codegen/typescript-react-apollo": "4.3.3",
     "@graphql-codegen/typescript-resolvers": "^4.5.1",
-    "@next/env": "15.4.1",
-    "@next/eslint-plugin-next": "15.4.1",
+    "@next/env": "15.5.5",
+    "@next/eslint-plugin-next": "15.5.5",
     "@size-limit/file": "11.2.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -133,7 +133,7 @@
     "es-check": "9.1.4",
     "esbuild": "0.25.6",
     "eslint": "9.31.0",
-    "eslint-config-next": "15.4.1",
+    "eslint-config-next": "15.5.5",
     "eslint-config-prettier": "^10.1.5",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,16 @@
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+
+const eslintConfig = [
+  ...nextCoreWebVitals,
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;
diff --git a/next.base.config.mjs b/next.base.config.mjs
@@ -87,10 +87,15 @@ const nextBaseConfig = ({
   srcFolder,
   ...overrideConfig
 }) => {
+  /**
+   * Determine if Turbopack is active (i.e., next dev --turbo)
+   */
+  const isTurbopack = process.env.NEXT_RUNTIME === 'edge' && isDevelopment;
+
   /**
    * @type {import('next').NextConfig}
    */
-  const nextConfig = {
+  let nextConfig = {
     reactStrictMode: true,
     cacheMaxMemorySize: 0,
     sassOptions: {
@@ -107,7 +112,6 @@ const nextBaseConfig = ({
         }))
       );
     },
-    optimizeFonts: true,
     httpAgentOptions: {
       // @link https://nextjs.org/blog/next-11-1#builds--data-fetching
       keepAlive: true,
@@ -118,9 +122,6 @@ const nextBaseConfig = ({
       maxInactiveAge: (isCI ? 3600 : 25) * 1000,
     },
 
-    // @link https://nextjs.org/docs/advanced-features/compiler#minification
-    swcMinify: true,
-
     images: {
       domains: [new URL(process.env.CMS_ORIGIN).origin],
     },
@@ -129,19 +130,19 @@ const nextBaseConfig = ({
     output: 'standalone',
 
     experimental: {
-      /*    turbotrace: {
-        contextDirectory: path.resolve(__dirname, '../..'),
-        logDetail: true,
-      }, */
       // Prefer loading of ES Modules over CommonJS
-      // @link {https://nextjs.org/blog/next-11-1#es-modules-support|Blog 11.1.0}
-      // @link {https://github.com/vercel/next.js/discussions/27876|Discussion}
       esmExternals: true,
       // Experimental monorepo support
-      // @link {https://github.com/vercel/next.js/pull/22867|Original PR}
-      // @link {https://github.com/vercel/next.js/discussions/26420|Discussion}
       externalDir: true,
       scrollRestoration: true,
+      // Removed turbopack config keys like 'cra' and 'turbopack' from here
+    },
+
+    // 🚨 TURBOPACK CONFIGURATION
+    // Explicitly set the root directory for monorepo support.
+    turbopack: {
+      // Assumes next.config.mjs is two levels down from the monorepo root (where the main lockfile is)
+      root: join(__dirname, '../../'),
     },
 
     typescript: {
@@ -197,53 +198,6 @@ const nextBaseConfig = ({
       ];
     },
 
-    webpack: (config, { webpack, isServer }) => {
-      if (!isServer) {
-        // Fixes npm packages that depend on `fs` module
-        // @link https://github.com/vercel/next.js/issues/36514#issuecomment-1112074589
-        // @link https://stackoverflow.com/a/63074348/784642
-        config.resolve.fallback = {
-          ...config.resolve.fallback,
-          fs: false,
-          net: false,
-          tls: false,
-          child_process: false,
-          perf_hooks: false,
-        };
-      }
-
-      // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/
-      config.plugins.push(
-        new webpack.DefinePlugin({
-          __SENTRY_DEBUG__: NEXTJS_SENTRY_DEBUG,
-          __SENTRY_TRACING__: NEXTJS_SENTRY_TRACING,
-        })
-      );
-
-      config.module.rules.push({
-        test: /\.svg$/,
-        issuer: /\.(js|ts)x?$/,
-        use: [
-          {
-            loader: '@svgr/webpack',
-            // https://react-svgr.com/docs/webpack/#passing-options
-            options: {
-              svgo: true,
-              // @link https://github.com/svg/svgo#configuration
-              svgoConfig: {
-                multipass: false,
-                datauri: 'base64',
-                js2svg: {
-                  indent: 2,
-                  pretty: false,
-                },
-              },
-            },
-          },
-        ],
-      });
-      return config;
-    },
     env: {
       APP_NAME: packageJson.name,
       APP_VERSION: packageJson.version,
@@ -261,7 +215,41 @@ const nextBaseConfig = ({
     },
   };
 
-  let config = { ...nextConfig, ...overrideConfig };
+  // 🚨 CONDITIONAL WEBPACK ASSIGNMENT
+  // Define the webpack property object *only* when not using Turbopack.
+  const webpackConfig = isTurbopack
+    ? {}
+    : {
+        webpack: (config, { webpack, isServer }) => {
+          if (!isServer) {
+            // Fixes npm packages that depend on `fs` module
+            // @link https://github.com/vercel/next.js/issues/36514#issuecomment-1112074589
+            // @link https://stackoverflow.com/a/63074348/784642
+            config.resolve.fallback = {
+              ...config.resolve.fallback,
+              fs: false,
+              net: false,
+              tls: false,
+              child_process: false,
+              perf_hooks: false,
+            };
+          }
+
+          // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/
+          config.plugins.push(
+            new webpack.DefinePlugin({
+              __SENTRY_DEBUG__: NEXTJS_SENTRY_DEBUG,
+              __SENTRY_TRACING__: NEXTJS_SENTRY_TRACING,
+            })
+          );
+
+          // Removed custom SVG loader rule, relying on Next.js native SVGR support.
+          return config;
+        },
+      };
+
+  // Merge nextConfig with the conditional webpackConfig and user overrides.
+  let config = { ...nextConfig, ...webpackConfig, ...overrideConfig };
 
   if (!NEXTJS_DISABLE_SENTRY) {
     // @ts-ignore because sentry does not match nextjs current definitions
diff --git a/package.json b/package.json
@@ -112,12 +112,12 @@
     "ws": "^8.13.3"
   },
   "dependencies": {
-    "@next/bundle-analyzer": "15.4.1",
+    "@next/bundle-analyzer": "15.5.5",
     "@sentry/nextjs": "9.38.0",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "hds-react": "4.8.0",
-    "next": "14.2.33",
+    "next": "15.5.5",
     "next-transpile-modules": "10.0.1",
     "postcss": "^8.5.6",
     "react": "18.3.1",
@@ -148,6 +148,7 @@
     "env-cmd": "10.1.0",
     "esbuild": "0.25.6",
     "eslint": "9.31.0",
+    "eslint-config-next": "15.5.5",
     "git-rev-sync": "3.0.2",
     "husky": "^9.1.7",
     "is-ci": "4.1.0",
diff --git a/packages/components/eslint.config.mjs b/packages/components/eslint.config.mjs
@@ -45,5 +45,8 @@ export default [
     ...getDefaultIgnorePatterns(),
     'storybook-static',
     '**/generated/*',
+    '**/.next',
+    '**/.out',
+    'next-env.d.ts',
   ]),
 ];
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -42,7 +42,7 @@
     "@apollo/client": "^3.11.10",
     "@changey/react-leaflet-markercluster": "4.0.0-rc1",
     "@jonkoops/matomo-tracker-react": "0.7.0",
-    "@next/env": "15.4.1",
+    "@next/env": "15.5.5",
     "@react-leaflet/core": "2.1.0",
     "@sentry/browser": "9.38.0",
     "@types/file-saver": "^2.0.7",
@@ -70,7 +70,7 @@
     "leaflet": "1.9.4",
     "leaflet.markercluster": "1.5.3",
     "lodash": "4.17.21",
-    "next": "14.2.33",
+    "next": "15.5.5",
     "next-i18next": "15.4.2",
     "postcss": "^8.5.6",
     "query-string": "^9.2.2",
@@ -128,7 +128,7 @@
     "dequal": "2.0.3",
     "dompurify": "3.2.6",
     "eslint": "9.31.0",
-    "eslint-config-next": "15.4.1",
+    "eslint-config-next": "15.5.5",
     "eslint-plugin-storybook": "^9.0.17",
     "globals": "16.3.0",
     "html-react-parser": "5.2.5",
diff --git a/packages/components/src/components/category/CategoryFilter.tsx b/packages/components/src/components/category/CategoryFilter.tsx
diff --git a/yarn.lock b/yarn.lock
