[sitecore-jss-nextjs/react][nextjs/react][v20] Update next to v13, react to 18 (#1830)

* Update next to v13
* Update react to v18

Author: art-alexeyenko

CHANGELOG.md

@@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. The format
 
 This project does NOT adhere to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), and major versions of this project denote compatibility with Sitecore Platform versions. Refer to the "Headless Services" section in the [Sitecore modules compatibility table](https://support.sitecore.com/kb?id=kb_article_view&sysparm_article=KB1000576) or the [Headless Rendering download page](https://dev.sitecore.net/Downloads/Sitecore_Headless_Rendering.aspx) for more details on versioning.
 
+## 20.4.0
+
+* `[sitecore-jss-nextjs]` `[nextjs]` Update nextjs to version 13
+* `[sitecore-jss-react]` `[sitecore-jss-forms-react]` `[react]` Update react to version 18
+* `[sitecore-jss-nextjs]` `[nextjs]` `[sitecore-jss-react]` `[sitecore-jss-forms]` `[react]` Update typescript to version 4.9
+
 ## 20.3.2
 
 ### 🐛 Bug Fixes

package.json

@@ -29,7 +29,7 @@
     "prettier": "^1.14.3",
     "typedoc": "^0.22.5",
     "typedoc-plugin-markdown": "^3.11.3",
-    "typescript": "~4.3.5"
+    "typescript": "~4.9.4"
   },
   "workspaces": [
     "packages/*",

packages/create-sitecore-jss/src/common/processes/transform.ts

@@ -10,6 +10,7 @@ import {
   openPackageJson,
   sortKeys,
   writeFileToPath,
+  isDevEnvironment,
 } from '../utils/helpers';
 import { diffLines, diffJson, Change } from 'diff';
 import { BaseArgs } from '../args/base';
@@ -192,6 +193,7 @@ export const transform = async (
   const ejsData: Data = {
     ...answers,
     helper: {
+      isDev: isDevEnvironment(answers.destination),
       getPascalCaseName: getPascalCaseName,
       getAppPrefix: getAppPrefix,
     },

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/Navigation.tsx

@@ -12,10 +12,8 @@ const Navigation = (): JSX.Element => {
   return (
     <div className="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom">
       <h5 className="my-0 mr-md-auto font-weight-normal">
-        <Link href="/">
-          <a className="text-dark">
-            <img src={`${publicUrl}/sc_logo.svg`} alt="Sitecore" />
-          </a>
+        <Link href="/" className="text-dark">
+          <img src={`${publicUrl}/sc_logo.svg`} alt="Sitecore" />
         </Link>
       </h5>
       <nav className="my-2 my-md-0 mr-md-3">
@@ -27,11 +25,11 @@ const Navigation = (): JSX.Element => {
         >
           {t('Documentation')}
         </a>
-        <Link href="/styleguide">
-          <a className="p-2 text-dark">{t('Styleguide')}</a>
+        <Link className="p-2 text-dark" href="/styleguide">
+          {t('Styleguide')}
         </Link>
-        <Link href="/graphql">
-          <a className="p-2 text-dark">{t('GraphQL')}</a>
+        <Link className="p-2 text-dark" href="/graphql">
+          {t('GraphQL')}
         </Link>
       </nav>
     </div>

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx

@@ -47,18 +47,18 @@ const StyleguideFieldUsageImage = (props: StyleguideFieldUsageImageProps): JSX.E
       E.g. we have used 'priority' to demonstrate how an image could be considered high priority and preload.
       Lazy loading is automatically disabled for images using priority.
       See here for all the features provided by next/image: https://nextjs.org/docs/api-reference/next/image
-      next/image generates responsive srcSet automatically based on layout. See https://nextjs.org/docs/api-reference/next/image#layout.
+      'fill' causes the next/image to fill the parent element instead of setting width and height. See https://nextjs.org/docs/api-reference/next/image#fill.
       IMPORTANT: The generated sizes should match your Sitecore server-side allowlist. See /sitecore/config/*.config (search for 'allowedMediaParams')
     */}
     <p>Srcset responsive image</p>
-    <NextImage
-      field={props.fields.sample2}
-      height="105"
-      width="200"
-      sizes="50vw"
-      layout="responsive"
-      priority
-    />
+    <div style={{ position: 'relative', height: 160, width: 300 }}>
+      <NextImage
+        field={props.fields.sample2}
+        sizes="(min-width: 960px) 300px, 100px"
+        fill
+        priority
+      />
+    </div>
   </StyleguideSpecimen>
 );
 

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Number.tsx

@@ -23,9 +23,11 @@ const StyleguideFieldUsageText = (props: StyleguideFieldUsageTextProps): JSX.Ele
 
       {/* Direct access to the value, which is a JS number, is also supported. */}
       <p>
-        JS value type: {typeof fieldValue}
-        <br />
-        JS value: {fieldValue}
+        <>
+          JS value type: {typeof fieldValue}
+          <br />
+          JS value: {fieldValue}
+        </>
       </p>
     </StyleguideSpecimen>
   );

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-IntegratedDemo.tsx

@@ -115,7 +115,7 @@ const GraphQLIntegratedDemo = (props: GraphQlIntegratedDemoProps): JSX.Element =
             {contextItem.children.results.map((child: Item) => (
               <li key={child.id}>
                 <NextLink href={child.url.path}>
-                  <a>{child.pageTitle.value}</a>
+                  {child.pageTitle.value}
                 </NextLink>
                 &nbsp; (editable title too! <Text field={child.pageTitle.jsonValue} />)
               </li>

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/styleguide/Styleguide-CustomRouteType.tsx

@@ -28,7 +28,7 @@ const StyleguideCustomRouteType = (): JSX.Element => {
       <RichText field={fields.content} />
 
       <Link href="/styleguide">
-        <a>Return to the Styleguide</a>
+        Return to the Styleguide
       </Link>
     </div>
   );

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Multilingual.tsx

@@ -32,11 +32,11 @@ const StyleguideMultilingual = (props: StyleguideMultilingualProps): JSX.Element
       <p>
         {/* In case if href already includes locale: https://nextjs.org/docs/advanced-features/i18n-routing#transition-between-locales */}
         <Link href="/en/styleguide" locale={false}>
-          <a>Show in English</a>
+          Show in English
         </Link>
         <br />
         <Link href="/styleguide" locale="<%- language %>">
-          <a>Show in <%- language %></a>
+          Show in <%- language %>
         </Link>
       </p>
 

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/styleguide/Styleguide-RouteFields.tsx

@@ -27,7 +27,7 @@ const StyleguideRouteFields = (props: StyleguideRouteFieldsProps): JSX.Element =
       </p>
       <p>
         <Link href="/styleguide/custom-route-type">
-          <a>Sample of using a custom route type</a>
+          Sample of using a custom route type
         </Link>
       </p>
     </StyleguideSpecimen>

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/next-config/plugins/disconnected.js

@@ -27,12 +27,11 @@ const disconnectedPlugin = (nextConfig = {}) => {
         },
       ];
     },
-
     webpack: (config, options) => {
       // Prevent webpack-5 from throwing error for sitecore-import.json when app first starts
       config.resolve.fallback = {
         'sitecore/manifest/sitecore-import.json': false,
-        ...config.resolve.fallback
+        ...config.resolve.fallback,
       };
 
       // Overload the Webpack config if it was already overloaded
@@ -41,7 +40,7 @@ const disconnectedPlugin = (nextConfig = {}) => {
       }
 
       return config;
-    }
+    },
   });
 };
 

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

@@ -31,11 +31,11 @@
   "dependencies": {
     "@sitecore-jss/sitecore-jss-nextjs": "^20.4.0-canary",
     "graphql": "~15.8.0",
-    "graphql-tag": "^2.11.0",
-    "next": "^12.2.4",
-    "next-localization": "^0.10.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "graphql-tag": "^2.12.6",
+    "next": "^13.1.6",
+    "next-localization": "^0.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.19.1",
@@ -47,8 +47,9 @@
     "@graphql-typed-document-node/core": "^3.1.0",
     "@sitecore-jss/sitecore-jss-cli": "^20.4.0-canary",
     "@types/node": "^14.6.4",
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
+    "@types/nprogress": "^0.2.0",
+    "@types/react": "^18.2.22",
+    "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
     "axios": "^0.21.1",
@@ -62,11 +63,10 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-yaml": "^0.2.0",
     "graphql-let": "^0.16.2",
-    "next-transpile-modules": "^9.0.0",
     "npm-run-all": "~4.1.5",
     "prettier": "^2.1.2",
-    "ts-node": "^9.0.0",
-    "typescript": "~4.3.5",
+    "ts-node": "^10.9.1",
+    "typescript": "~4.9.4",
     "yaml-loader": "^0.6.0"
   },
   "scripts": {

packages/create-sitecore-jss/src/templates/nextjs/src/Layout.tsx

@@ -22,7 +22,7 @@ const Layout = ({ layoutData }: LayoutProps): JSX.Element => {
   return (
     <>
       <Head>
-        <title>{route?.fields?.pageTitle?.value || 'Page'}</title>
+        <title>{route?.fields?.pageTitle?.value.toString() || 'Page'}</title>
         <link rel="icon" href={`${publicUrl}/favicon.ico`} />
       </Head>
 

packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/monorepo.js

@@ -1,15 +1,11 @@
-const withTM = require('next-transpile-modules')(['@sitecore-jss/sitecore-jss-nextjs'], {
-  resolveSymlinks: false,
-});
 const path = require('path');
 
 const CWD = process.cwd();
-
 /**
  * @param {import('next').NextConfig} nextConfig
  */
 const monorepoPlugin = (nextConfig = {}) => {
-  return withTM(Object.assign({}, nextConfig, {
+  return Object.assign({}, nextConfig, {
     webpack: (config, options) => {
       if (options.isServer) {
         config.externals = ['react', 'vertx', ...config.externals];
@@ -24,7 +20,7 @@ const monorepoPlugin = (nextConfig = {}) => {
 
       return config;
     }
-  }));
+  });
 };
 
 module.exports = monorepoPlugin;