Upgrade NextJS to v13

.github/workflows/deploy.js.yml

@@ -12,10 +12,10 @@ jobs:
     steps:
       - name: Checkout 🛎️
         uses: actions/[email protected]
-      - name: Use Node.js 14.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v2
         with:
-          node-version: '14.x'
+          node-version: '18.x'
       - name: Installing packages
         run: yarn install
       - name: Build my App

.github/workflows/node.js.yml

@@ -15,10 +15,10 @@ jobs:
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v2
         with:
-          node-version: 14.x
+          node-version: 18.x
       - name: Installing packages
         run: yarn install
       - name: Linting code

next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -22,10 +22,11 @@
     "@reduxjs/toolkit": "^1.6.0",
     "classnames": "^2.3.1",
     "downshift": "^6.1.3",
+    "eslint-config-next": "13",
     "figma-js": "^1.13.0",
-    "next": "^10.0.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "next": "13",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-lazy-load-image-component": "^1.5.1",
     "react-modal": "^3.13.1",
     "react-redux": "^7.2.4",
@@ -67,8 +68,8 @@
     "stylelint-prettier": "^1.1.2",
     "text-to-svg": "^3.1.5",
     "ts-jest": "^27.0.2",
-    "ts-node-dev": "^1.1.6",
-    "typescript": "^4.2.4"
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^4.5.2"
   },
   "jest-junit": {
     "suiteName": "health-icons",

src/components/TopBar.tsx

@@ -5,23 +5,19 @@ export function TopBar() {
   return (
     <nav className={styles.topBar}>
       <div className={styles.topbarTitle}>
-        <Link href="/">
-          <a className={styles.title}>Health icons</a>
+        <Link href="/" className={styles.title}>
+          Health icons
         </Link>
       </div>
       <ul className={styles.topbarLinks}>
         <li>
-          <Link href="/about">
-            <a className={styles.link}>
-              <img src="/ui/information-line.svg" alt="" /> About
-            </a>
+          <Link href="/about" className={styles.link}>
+            <img src="/ui/information-line.svg" alt="" /> About
           </Link>
         </li>
         <li>
-          <Link href="/request-icon">
-            <a className={styles.link}>
-              <img src="/ui/question-line.svg" alt="" /> Request an icon
-            </a>
+          <Link href="/request-icon" className={styles.link}>
+            <img src="/ui/question-line.svg" alt="" /> Request an icon
           </Link>
         </li>
         <li>

src/scripts/importMetaData.ts

@@ -3,7 +3,7 @@ import * as Figma from 'figma-js';
 import { promises as fs } from 'fs';
 import startCase from 'lodash.startcase';
 import path from 'path';
-import cliProgress from 'cli-progress';
+// import cliProgress from 'cli-progress';
 
 if (!config.figma.filename || !config.figma.personalAccessToken) {
   throw new Error(

tsconfig.json

@@ -16,7 +16,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
   "include": [
     "next-env.d.ts",