When using the Sitecore Headless Services 20.0.0, Next.js-based JavaScript Services (JSS) applications might not render a page as expected on the first visit. Moving to some other page and going back to the current one fixes the rendering. The following errors can be found in the log records:
TypeError: Cannot read properties of undefined (reading 'context')
at Object.children (C:\nextjs-app\node_modules\@sitecore-jss\sitecore-jss-react\dist\cjs\enhancers\withSitecoreContext.js:15:220)
at a.b.render (C:\nextjs-app\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:44:213)
at a.b.read (C:\nextjs-app\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:41:83)
at Object.exports.renderToString (C:\nextjs-app\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:52:138)
at Object.renderPage (C:\nextjs-app\node_modules\next\dist\server\render.js:804:45)
at Object.defaultGetInitialProps (C:\nextjs-app\node_modules\next\dist\server\render.js:391:51)
at Function.getInitialProps (C:\nextjs-app\.next\server\pages\_document.js:273:16)
at Object.loadGetInitialProps (C:\nextjs-app\node_modules\next\dist\shared\lib\utils.js:65:29)
at documentInitialProps (C:\nextjs-app\node_modules\next\dist\server\render.js:817:48)
at renderDocument (C:\nextjs-app\node_modules\next\dist\server\render.js:841:55)
The issue occurs with the default Next.js version 12.1.6 when running the application in production mode:
jss start:production
As a fix, downgrade Next.js version to the previous one, for example, to 12.1.5:
npm install next@12.1.5