XM Cloud: upgrading Next.js in a JSS project

Introduction

With Next.js being one of the most popular front-end frameworks out there new versions are being released all the time. Most often faster then JSS is able to follow. This blog post is about how you can go about upgrading Next.js separate from upgrading JSS. one of our projects was still on Next.js 12 and we wanted to upgrade to 13.5.6. In this article i will describe how we did this without having to upgrade JSS (as JSS had breaking changes).

The reason we want Next.js 13.5.6 is because of the significant performance improvements introduced by the Next.js team. More info here: Next.js 13.5 | Next.js (nextjs.org)

Upgrade instructions

Upgrading Next.js is actually pretty simple and just takes a couple of steps:

Start by opening your root directory in a command prompt and then run the following command:

1npm i next@13.5.6 react@latest react-dom@latest eslint-config-next@13.5.6 --save

And the command:

1npm install @types/react@latest @types/react-dom@latest --save-dev

We have now upgraded to the right version of Next.js and React.js but as we came from Next 12 it is good to run a codemod from Next.js . A codemod is a file that automates the upgrade process for breaking changes, in this case the breaking change is on how the Next.js Link component is used. You can execute this by running:

1npx @next/codemod@latest new-link .

more information on this codemod can be found here: Upgrading: Codemods | Next.js (nextjs.org)

Before we can run our upgraded application we need to make sure our node version is set to a higher version. Version 16 does is not support with Next.js 13.5.6 and furthermore v16 is reaching end-of-life.

We can do this by opening our "xmcloud.build.json" file and updating the node version, per example to 18.17.0:

1    "renderingHosts": {
2      "xmcloudpreview": {
3        "path": "./src/BdrWhitelabel",
4        "nodeVersion": "18.17.0",
5        "jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
6        "enabled": true,
7        "type": "sxa",
8            "lintCommand": "lint",
9            "startCommand": "start:production"
10        },
11      }

Now that everything is done we can test our new working version by running :

1npm run start:connected

Known issues

Currently there is one known issue for us, in which we are collaborating with Sitecore to get resolved. Currently XM Cloud deploy doesn' t respect the configured node version and instead uses the default setting of version v16.15.1. Because Next.js 13.5.6 uses features that are no longer supported in v16.15.1 this results in the error below:

111:15:45 web:build: unhandledRejection ReferenceError: Headers is not defined11:15:45 web:build:     at /workspace/tmp/builds/xmcloudpreview/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:14:884611:15:45 web:build:     at /workspace/tmp/builds/xmcloudpreview/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:14:4130811:15:45 web:build:     at Object.<anonymous> (/workspace/tmp/builds/xmcloudpreview/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:14:41329)11:15:45 web:build:     at Module._compile (node:internal/modules/cjs/loader:1105:14)11:15:45 web:build:     at Module.load (node:internal/modules/cjs/loader:981:32)11:15:45 web:build:     at Function.Module._load (node:internal/modules/cjs/loader:822:12)11:15:45 web:build:     at Module.require (node:internal/modules/cjs/loader:1005:19)11:15:45 web:build:     at Module.mod.require (/workspace/tmp/builds/xmcloudpreview/node_modules/next/dist/server/require-hook.js:64:28)11:15:45 web:build:     at require (node:internal/modules/cjs/helpers:102:18)

For now we downgraded to Next.js 13.4 but are eagerly awaiting the fix to XM Cloud deploy.