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-sxa/src/components/Image.tsx

@@ -72,17 +72,17 @@ export const Default = (props: ImageProps): JSX.Element => {
   const { sitecoreContext } = useSitecoreContext();
 
   if (props.fields) {
-    const Image = () => <JssImage field={props.fields.Image} />;
     const id = props.params.RenderingIdentifier;
+    const imageField = props.fields.Image;
 
     return (
       <div className={`component image ${props?.params?.styles}`} id={id ? id : undefined}>
         <div className="component-content">
           {sitecoreContext.pageState === 'edit' || !props.fields.TargetUrl?.value?.href ? (
-            <Image />
+            <JssImage field={imageField} />
           ) : (
             <JssLink field={props.fields.TargetUrl}>
-              <Image />
+              <JssImage field={imageField} />
             </JssLink>
           )}
           <Text

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Title.tsx

@@ -64,28 +64,30 @@ export const Default = (props: TitleProps): JSX.Element => {
   const datasource = props.fields?.data?.datasource || props.fields?.data?.contextItem;
   const { sitecoreContext } = useSitecoreContext();
   const text: TextField = datasource?.field?.jsonValue || {};
-  const link: LinkField = {
+  const linkValue: NonNullable<LinkField['value']> = {
     value: {
       href: datasource?.url?.path,
       title: datasource?.field?.jsonValue?.value,
     },
-  };
+  }.value;
+
+  const displayText: TextField =
+    sitecoreContext.pageState !== 'normal' && !text?.value ? { ...text, value: 'Title field' } : text;
+
   if (sitecoreContext.pageState !== 'normal') {
-    link.value.querystring = `sc_site=${datasource?.url?.siteName}`;
-    if (!text?.value) {
-      text.value = 'Title field';
-      link.value.href = '#';
-    }
+    linkValue.querystring = `sc_site=${datasource?.url?.siteName}`;
+    if (!displayText?.value) linkValue.href = '#';
   }
+  const link: LinkField = { value: linkValue };
 
   return (
     <ComponentContent styles={props?.params?.styles} id={props?.params?.RenderingIdentifier}>
       <>
         {sitecoreContext.pageEditing ? (
-          <Text field={text} />
+          <Text field={displayText} />
         ) : (
           <Link field={link}>
-            <Text field={text} />
+            <Text field={displayText} />
           </Link>
         )}
       </>

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: {
@@ -37,5 +29,11 @@ export default [
       'jsx-quotes': ['error', 'prefer-double'],
     },
   },
+  {
+    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"
   },