[Next.js] Next 13 upgrade (#1324)

* [Next.js] Next 13 upgrade * Add comment * Update yarn.lock * Provide Image 'alt' as an empty string * Add changes according to review comments
Sitecore · Feb 7, 2023 · f6f0f68 · f6f0f68
1 parent 80218f6
commit f6f0f68
Show file tree

Hide file tree

Showing 21 changed files with 304 additions and 202 deletions.
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide-tracking/src/Navigation.tsx b/packages/create-sitecore-jss/src/templates/nextjs-styleguide-tracking/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 me-md-auto fw-normal">
-        <Link href="/">
-          <a className="text-dark">
-            <img src={`${publicUrl}/sc_logo.svg`} alt="Sitecore" />
-          </a>
+        <Link className="text-dark" href="/">
+          <img src={`${publicUrl}/sc_logo.svg`} alt="Sitecore" />
         </Link>
       </h5>
       <nav className="my-2 my-md-0 me-md-3">
@@ -27,14 +25,14 @@ 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>
-        <Link href="/tracking">
-          <a className="p-2 text-dark">{t('Tracking')}</a>
+        <Link className="p-2 text-dark" href="/tracking">
+          {t('Tracking')}
         </Link>
       </nav>
     </div>

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/Navigation.tsx b/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 me-md-auto fw-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 me-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>

diff --git a/...jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx b/...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>
 );
 

diff --git a/...ore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-IntegratedDemo.tsx b/...ore-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>

diff --git a/.../src/templates/nextjs-styleguide/src/components/styleguide/Styleguide-CustomRouteType.tsx b/.../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>
   );

diff --git a/...jss/src/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Multilingual.tsx b/...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>
 

diff --git a/...-jss/src/templates/nextjs-styleguide/src/components/styleguide/Styleguide-RouteFields.tsx b/...-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>

diff --git a/...-sitecore-jss/src/templates/nextjs-styleguide/src/lib/next-config/plugins/disconnected.js b/...-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;
-    }
+    },
   });
 };
 

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/package.json b/packages/create-sitecore-jss/src/templates/nextjs/package.json
@@ -32,7 +32,7 @@
     "@sitecore-jss/sitecore-jss-nextjs": "^21.1.0-canary",
     "graphql": "~15.8.0",
     "graphql-tag": "^2.12.6",
-    "next": "^12.3.4",
+    "next": "^13.1.6",
     "next-localization": "^0.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -63,7 +63,6 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-yaml": "^0.5.0",
     "graphql-let": "^0.18.6",
-    "next-transpile-modules": "^10.0.0",
     "npm-run-all": "~4.1.5",
     "prettier": "^2.8.3",
     "ts-node": "^10.9.1",

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/monorepo.js b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/monorepo.js
@@ -1,30 +1,21 @@
-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];
       }
 
-      config.resolve.alias['react'] = path.resolve(CWD, '.', 'node_modules', 'react');
-
       // Overload the Webpack config if it was already overloaded
       if (typeof nextConfig.webpack === 'function') {
         return nextConfig.webpack(config, options);
       }
 
       return config;
     }
-  }));
+  });
 };
 
 module.exports = monorepoPlugin;
diff --git a/packages/sitecore-jss-nextjs/package.json b/packages/sitecore-jss-nextjs/package.json
@@ -54,7 +54,7 @@
     "eslint-plugin-react": "^7.32.1",
     "jsdom": "^21.1.0",
     "mocha": "^10.2.0",
-    "next": "^12.3.4",
+    "next": "^13.1.6",
     "nock": "^13.3.0",
     "nyc": "^15.1.0",
     "react": "^18.2.0",
@@ -65,7 +65,7 @@
     "typescript": "~4.9.4"
   },
   "peerDependencies": {
-    "next": "^12.3.4",
+    "next": "^13.1.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/packages/sitecore-jss-nextjs/src/components/Link.tsx b/packages/sitecore-jss-nextjs/src/components/Link.tsx
@@ -44,17 +44,14 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
             href={{ pathname: href, query: querystring, hash: anchor }}
             key="link"
             locale={false}
+            title={value.title}
+            target={value.target}
+            className={value.class}
+            {...htmlLinkProps}
+            ref={ref}
           >
-            <a
-              title={value.title}
-              target={value.target}
-              className={value.class}
-              {...htmlLinkProps}
-              ref={ref}
-            >
-              {text}
-              {children}
-            </a>
+            {text}
+            {children}
           </NextLink>
         );
       }