feat: upgrade nextjs to v15

nikomakela · nikomakela · commit 09d1b391be2f · 2025-11-26T14:45:47.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/Dockerfile b/Dockerfile
@@ -260,5 +260,4 @@ USER default
 
 ENV PROJECT ${PROJECT}
 
-CMD ["sh", "-c", "/app/run_node.sh"]
-
+CMD ["sh", "-c", "/app/run_node.sh"]
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/events-helsinki/src/domain/search/eventSearch/advancedSearch/search.module.scss b/apps/events-helsinki/src/domain/search/eventSearch/advancedSearch/search.module.scss
@@ -78,10 +78,11 @@ $buttonWidth: 180px;
     }
 
     & > :first-child {
+      padding: var(--spacing-xs);
+
       @include breakpoints.respond-above(s) {
         grid-column: 1 / 5;
       }
-      padding: var(--spacing-xs);
 
       svg {
         margin-right: var(--spacing-xs);
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/hobbies-helsinki/src/domain/search/eventSearch/advancedSearch/search.module.scss b/apps/hobbies-helsinki/src/domain/search/eventSearch/advancedSearch/search.module.scss
@@ -78,10 +78,11 @@ $buttonWidth: 180px;
     }
 
     & > :first-child {
+      padding: var(--spacing-xs);
+
       @include breakpoints.respond-above(s) {
         grid-column: 1 / 5;
       }
-      padding: var(--spacing-xs);
 
       svg {
         margin-right: var(--spacing-xs);
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/apps/sports-helsinki/src/domain/search/combinedSearch/search.module.scss b/apps/sports-helsinki/src/domain/search/combinedSearch/search.module.scss
@@ -136,10 +136,11 @@ $buttonWidth: 180px;
   }
 
   & > :first-child {
+    padding: var(--spacing-xs);
+
     @include breakpoints.respond-above(s) {
       grid-column: 1 / 5;
     }
-    padding: var(--spacing-xs);
 
     svg {
       margin-right: var(--spacing-xs);
diff --git a/apps/sports-helsinki/src/domain/venue/venueInfo/venueInfo.module.scss b/apps/sports-helsinki/src/domain/venue/venueInfo/venueInfo.module.scss
@@ -51,6 +51,9 @@
 }
 
 a.link {
+  margin: var(--spacing-xs) 0;
+  padding: 0;
+
   &,
   &:visited {
     color: var(--color-secondary-link);
@@ -59,9 +62,6 @@ a.link {
   svg g * {
     color: var(--color-secondary-link);
   }
-
-  margin: var(--spacing-xs) 0;
-  padding: 0;
 }
 
 a.marginlessLink {
diff --git a/apps/sports-helsinki/src/domain/venue/venueOtherInfo/venueOtherInfo.module.scss b/apps/sports-helsinki/src/domain/venue/venueOtherInfo/venueOtherInfo.module.scss
@@ -50,6 +50,8 @@
 }
 
 a.link {
+  margin: var(--spacing-xs) 0;
+  padding: 0;
   &,
   &:visited {
     color: var(--color-secondary-link);
@@ -58,9 +60,6 @@ a.link {
   svg g * {
     color: var(--color-secondary-link);
   }
-
-  margin: var(--spacing-xs) 0;
-  padding: 0;
 }
 
 .list {
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
diff --git a/package.json b/package.json
diff --git a/packages/components/eslint.config.mjs b/packages/components/eslint.config.mjs
diff --git a/packages/components/package.json b/packages/components/package.json
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

Original file line number	Diff line number	Diff line change
`@@ -78,10 +78,11 @@ $buttonWidth: 180px;`
`78`	`78`	`}`
`79`	`79`
`80`	`80`	`& > :first-child {`
	`81`	`+ padding: var(--spacing-xs);`
	`82`	`+`
`81`	`83`	`@include breakpoints.respond-above(s) {`
`82`	`84`	`grid-column: 1 / 5;`
`83`	`85`	`}`
`84`		`- padding: var(--spacing-xs);`
`85`	`86`
`86`	`87`	`svg {`
`87`	`88`	`margin-right: var(--spacing-xs);`