Upgrade Nextjs to v16.2

CHANGELOG.md

@@ -15,6 +15,7 @@ Our versioning strategy is as follows:
 
 ### 🎉 New Features & Improvements
 
+* `[Next.js]` `[sitecore-jss-nextjs]` Upgrade Next.js to 16.2 ([#2193](https://github.com/Sitecore/jss/pull/2193))
 * `[sitecore-jss]` Add Unified UI origin to allowed origins ([#2192](https://github.com/Sitecore/jss/pull/2192))
 
 ## 22.12.0

packages/create-sitecore-jss/src/templates/nextjs/eslint.config.mjs

@@ -1,28 +1,20 @@
 /**
  * ESLint flat config for JSS Next.js apps.
- * Replaces legacy .eslintrc so scaffolded apps use ESLint 9 flat config.
+ * Loads eslint-config-next's published flat bundle (no FlatCompat) to avoid circular
+ * plugin graphs when ESLint 9 validates legacy eslintrc through @eslint/eslintrc.
  */
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-import { FlatCompat } from '@eslint/eslintrc';
+import { createRequire } from 'module';
 import eslintConfigPrettier from 'eslint-config-prettier';
+import prettierPlugin from 'eslint-plugin-prettier';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const compat = new FlatCompat({ baseDirectory: __dirname });
-
-const nextAndPrettierLegacy = compat.extends(
-  'next',
-  'next/core-web-vitals',
-  'plugin:@typescript-eslint/recommended',
-  'prettier',
-  'plugin:yaml/recommended',
-  'plugin:prettier/recommended'
-);
+const require = createRequire(import.meta.url);
+const coreWebVitals = require('eslint-config-next/core-web-vitals');
 
 export default [
-  { ignores: ['.generated/**', '**/*.d.ts', '**/*.js', 'node_modules', '.next', 'out'] },
-  ...nextAndPrettierLegacy,
+  {
+    ignores: ['.generated/**', '**/*.d.ts', '**/*.js', 'node_modules', '.next', 'out'],
+  },
+  ...coreWebVitals,
   {
     files: ['**/*.ts', '**/*.tsx'],
     rules: {
@@ -35,6 +27,28 @@ export default [
       ],
       '@typescript-eslint/no-explicit-any': 'error',
       'jsx-quotes': ['error', 'prefer-double'],
+      // React Compiler rules from eslint-config-next/core-web-vitals — relaxed for common JSS patterns
+      'react-hooks/component-hook-factories': 'off',
+      'react-hooks/config': 'off',
+      'react-hooks/error-boundaries': 'off',
+      'react-hooks/gating': 'off',
+      'react-hooks/globals': 'off',
+      'react-hooks/immutability': 'off',
+      'react-hooks/incompatible-library': 'off',
+      'react-hooks/preserve-manual-memoization': 'off',
+      'react-hooks/purity': 'off',
+      'react-hooks/refs': 'off',
+      'react-hooks/set-state-in-effect': 'off',
+      'react-hooks/set-state-in-render': 'off',
+      'react-hooks/static-components': 'off',
+      'react-hooks/unsupported-syntax': 'off',
+      'react-hooks/use-memo': 'off',
+    },
+  },
+  {
+    plugins: { prettier: prettierPlugin },
+    rules: {
+      'prettier/prettier': 'warn',
     },
   },
   eslintConfigPrettier,

packages/create-sitecore-jss/src/templates/nextjs/package.json

@@ -1,75 +1,74 @@
-{
-  "name": "<%- appName %>",
-  "description": "Application utilizing Sitecore JavaScript Services and Next.js",
-  "version": "0.1.0",
-  "private": true,
-  "config": {
-    "appName": "<%- appName %>",
-    "rootPlaceholders": [
-      "<%- helper.getAppPrefix(appPrefix, appName) %>jss-main"
-    ],
-    "sitecoreConfigPath": "/App_Config/Include/zzz",
-    "graphQLEndpointPath": "/sitecore/api/graph/edge",
-    "language": "en"
-  },
-  "author": {
-    "name": "Sitecore Corporation",
-    "url": "https://jss.sitecore.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sitecore/jss.git"
-  },
-  "bugs": {
-    "url": "https://github.com/sitecore/jss/issues"
-  },
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@sitecore-jss/sitecore-jss-nextjs": "<%- version %>",
-    "next": "^16.1.0",
-    "next-localization": "^0.12.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "sharp": "0.34.3"
-  },
-  "devDependencies": {
-    "@sitecore-jss/sitecore-jss-cli": "<%- version %>",
-    "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
-    "@types/node": "^24.10.4",
-    "@types/react": "^19.1.7",
-    "@types/react-dom": "^19.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.14.0",
-    "@typescript-eslint/parser": "^8.14.0",
-    "chalk": "~4.1.2",
-    "chokidar": "~4.0.3",
-    "constant-case": "^3.0.4",
-    "cross-env": "~10.0.0",
-    "dotenv-flow": "^4.1.0",
-    "@eslint/eslintrc": "^3.2.0",
-    "eslint": "^9.15.0",
-    "eslint-config-next": "^15.0.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-yaml": "^0.5.0",
-    "npm-run-all": "~4.1.5",
-    "prettier": "^2.8.3",
-    "ts-node": "^10.9.1",
-    "tsconfig-paths": "^4.1.2",
-    "typescript": "~5.4.0"
-  },
-  "scripts": {
-    "jss": "jss",
-    "lint": "eslint ./src/**/*.tsx ./src/**/*.ts ./scripts/**/*.ts",
-    "bootstrap": "ts-node --require dotenv-flow/config --project tsconfig.scripts.json scripts/bootstrap.ts",
-    "build": "cross-env NODE_ENV=production npm-run-all --serial bootstrap next:build",
-    "next:build": "next build --webpack",
-    "next:dev": "cross-env NODE_OPTIONS='--inspect' next dev --webpack",
-    "next:start": "next start",
-    "scaffold": "ts-node --project tsconfig.scripts.json scripts/scaffold-component/index.ts",
-    "start:connected": "cross-env NODE_ENV=development npm-run-all --serial bootstrap --parallel next:dev start:watch-components",
-    "start:production": "cross-env-shell NODE_ENV=production npm-run-all --serial bootstrap next:build next:start",
-    "start:watch-components": "ts-node --project tsconfig.scripts.json scripts/generate-component-builder/index.ts --watch",
-    "install-pre-push-hook": "ts-node --project tsconfig.scripts.json ./scripts/install-pre-push-hook.ts"
-  }
-}
+{
+  "name": "<%- appName %>",
+  "description": "Application utilizing Sitecore JavaScript Services and Next.js",
+  "version": "0.1.0",
+  "private": true,
+  "config": {
+    "appName": "<%- appName %>",
+    "rootPlaceholders": [
+      "<%- helper.getAppPrefix(appPrefix, appName) %>jss-main"
+    ],
+    "sitecoreConfigPath": "/App_Config/Include/zzz",
+    "graphQLEndpointPath": "/sitecore/api/graph/edge",
+    "language": "en"
+  },
+  "author": {
+    "name": "Sitecore Corporation",
+    "url": "https://jss.sitecore.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sitecore/jss.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sitecore/jss/issues"
+  },
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@sitecore-jss/sitecore-jss-nextjs": "<%- version %>",
+    "next": "^16.2.0",
+    "next-localization": "^0.12.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "sharp": "0.34.3"
+  },
+  "devDependencies": {
+    "@sitecore-jss/sitecore-jss-cli": "<%- version %>",
+    "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
+    "@types/node": "^24.10.4",
+    "@types/react": "^19.1.7",
+    "@types/react-dom": "^19.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
+    "chalk": "~4.1.2",
+    "chokidar": "~4.0.3",
+    "constant-case": "^3.0.4",
+    "cross-env": "~10.0.0",
+    "dotenv-flow": "^4.1.0",
+    "eslint": "^9.15.0",
+    "eslint-config-next": "^16.2.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-yaml": "^0.5.0",
+    "npm-run-all": "~4.1.5",
+    "prettier": "^2.8.3",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths": "^4.1.2",
+    "typescript": "~5.4.0"
+  },
+  "scripts": {
+    "jss": "jss",
+    "lint": "eslint ./src/**/*.tsx ./src/**/*.ts ./scripts/**/*.ts",
+    "bootstrap": "ts-node --require dotenv-flow/config --project tsconfig.scripts.json scripts/bootstrap.ts",
+    "build": "cross-env NODE_ENV=production npm-run-all --serial bootstrap next:build",
+    "next:build": "next build --webpack",
+    "next:dev": "cross-env NODE_OPTIONS='--inspect' next dev --webpack",
+    "next:start": "next start",
+    "scaffold": "ts-node --project tsconfig.scripts.json scripts/scaffold-component/index.ts",
+    "start:connected": "cross-env NODE_ENV=development npm-run-all --serial bootstrap --parallel next:dev start:watch-components",
+    "start:production": "cross-env-shell NODE_ENV=production npm-run-all --serial bootstrap next:build next:start",
+    "start:watch-components": "ts-node --project tsconfig.scripts.json scripts/generate-component-builder/index.ts --watch",
+    "install-pre-push-hook": "ts-node --project tsconfig.scripts.json ./scripts/install-pre-push-hook.ts"
+  }
+}

packages/sitecore-jss-cli/package.json

@@ -49,7 +49,7 @@
     "@types/node": "^24.10.4",
     "@types/readline-sync": "^1.4.8",
     "@types/resolve": "^1.20.6",
-    "@types/sinon": "^10.0.13",
+    "@types/sinon": "^17.0.4",
     "@types/tmp": "^0.2.6",
     "@types/yargs": "^17.0.33",
     "chai": "^4.3.7",

packages/sitecore-jss-cli/tsconfig.json

@@ -4,6 +4,7 @@
     "target": "es6",
     "module": "commonjs",
     "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
     "outDir": "dist/cjs",
     "typeRoots": ["node_modules/@types"],
     "declarationDir": "./types"

packages/sitecore-jss-nextjs/package.json

@@ -53,7 +53,7 @@
     "eslint-plugin-react": "^7.37.5",
     "jsdom": "^26.1.0",
     "mocha": "^11.7.0",
-    "next": "^16.1.0",
+    "next": "^16.2.0",
     "nock": "^13.3.0",
     "nyc": "^17.1.0",
     "react": "^19.1.0",
@@ -67,7 +67,7 @@
     "@sitecore-cloudsdk/core": "^0.5.2",
     "@sitecore-cloudsdk/events": "^0.5.2",
     "@sitecore-cloudsdk/personalize": "^0.5.2",
-    "next": "^16.1.0",
+    "next": "^16.2.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },