Upgrade Nextjs to v16.2

CHANGELOG.md

@@ -13,6 +13,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/angular/.vscode/extensions.json

@@ -1,9 +1,9 @@
-{
-  "recommendations": [
-    "GraphQL.vscode-graphql",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "mikestead.dotenv",
-    "redhat.vscode-yaml",
-  ]
-}
+{
+  "recommendations": [
+    "GraphQL.vscode-graphql",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "mikestead.dotenv",
+    "redhat.vscode-yaml"
+  ]
+}

packages/create-sitecore-jss/src/templates/angular/src/tsconfig.app.json

@@ -1,21 +1,21 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "baseUrl": "./",
-    "newLine": "LF"
-  },
-  "lib": [
-    "esnext.asynciterable"
-  ],
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts",
-    "**/*.sitecore.ts",
-    "./app/jss-context.server-side.service.ts",
-    "./app/i18n/jss-translation-server-loader.service.ts",
-    "./app/app.server.module.ts",
-    "./main.server.ts",
-    "./environments/environment.prod.js"
-  ],
-}
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "newLine": "LF"
+  },
+  "lib": [
+    "esnext.asynciterable"
+  ],
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts",
+    "**/*.sitecore.ts",
+    "./app/jss-context.server-side.service.ts",
+    "./app/i18n/jss-translation-server-loader.service.ts",
+    "./app/app.server.module.ts",
+    "./main.server.ts",
+    "./environments/environment.prod.js"
+  ]
+}

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

@@ -63,29 +63,37 @@ const ComponentContent = (props: ComponentContentProps) => {
 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 = {
-    value: {
-      href: datasource?.url?.path,
-      title: datasource?.field?.jsonValue?.value,
-    },
+  const baseText: TextField = datasource?.field?.jsonValue || {};
+  let displayText: TextField = baseText;
+  let linkValue: NonNullable<LinkField['value']> = {
+    href: datasource?.url?.path,
+    title: datasource?.field?.jsonValue?.value,
   };
+
   if (sitecoreContext.pageState !== 'normal') {
-    link.value.querystring = `sc_site=${datasource?.url?.siteName}`;
-    if (!text?.value) {
-      text.value = 'Title field';
-      link.value.href = '#';
+    linkValue = {
+      ...linkValue,
+      querystring: `sc_site=${datasource?.url?.siteName}`,
+    };
+    if (!baseText?.value) {
+      displayText = { ...baseText, value: 'Title field' };
+      linkValue = {
+        ...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/.vscode/extensions.json

@@ -1,9 +1,9 @@
-{
-  "recommendations": [
-    "GraphQL.vscode-graphql",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "mikestead.dotenv",
-    "redhat.vscode-yaml",
-  ]
-}
+{
+  "recommendations": [
+    "GraphQL.vscode-graphql",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "mikestead.dotenv",
+    "redhat.vscode-yaml"
+  ]
+}

packages/create-sitecore-jss/src/templates/nextjs/.vscode/launch.json

@@ -1,15 +1,12 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Attach to Process",
-      "type": "node",
-      "request": "attach",
-      "skipFiles": ["<node_internals>/**"],
-      "port": 9229
-    }
-  ]
-}
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Attach to Process",
+      "type": "node",
+      "request": "attach",
+      "skipFiles": ["<node_internals>/**"],
+      "port": 9229
+    }
+  ]
+}

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

@@ -1,28 +1,21 @@
 /**
  * ESLint flat config for JSS Next.js apps.
- * Replaces legacy .eslintrc so scaffolded apps use ESLint 9 flat config.
+ * Uses eslint-config-next's native flat config (no FlatCompat) to avoid circular
+ * plugin graphs when ESLint 9 validates legacy eslintrc-style bundles.
  */
-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 require = createRequire(import.meta.url);
 
-const nextAndPrettierLegacy = compat.extends(
-  'next',
-  'next/core-web-vitals',
-  'plugin:@typescript-eslint/recommended',
-  'prettier',
-  'plugin:yaml/recommended',
-  'plugin:prettier/recommended'
-);
+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 +30,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"
+  }
+}