[Next.js] Next 13 upgrade

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>

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>

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

@@ -51,14 +51,14 @@ const StyleguideFieldUsageImage = (props: StyleguideFieldUsageImageProps): JSX.E
       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/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,21 +27,6 @@ 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
-      };
-
-      // Overload the Webpack config if it was already overloaded
-      if (typeof nextConfig.webpack === 'function') {
-        return nextConfig.webpack(config, options);
-      }
-
-      return config;
-    }
   });
 };
 

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

@@ -7,6 +7,20 @@ const styleguidePlugin = (nextConfig = {}) => {
       ...nextConfig.i18n,
       locales: ['en', '<%- language %>'],
     },
+    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,
+      };
+
+      // Overload the Webpack config if it was already overloaded
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options);
+      }
+
+      return config;
+    },
   });
 };
 

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",

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;

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"
   },

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>
         );
       }