Upgrade to Next.js 15 and Update ESLint Configuration

eslint.config.mjs

@@ -0,0 +1,107 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import _import from "eslint-plugin-import";
+import react from "eslint-plugin-react";
+import reactMemo from "eslint-plugin-react-memo";
+import reactHooks from "eslint-plugin-react-hooks";
+import { fixupPluginRules } from "@eslint/compat";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [{
+    ignores: ["*/public", "*/node_modules/*", "*/.next/*", "*/dist/*"],
+}, ...compat.extends(
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@next/next/recommended",
+    "prettier",
+), {
+    plugins: {
+        "@typescript-eslint": typescriptEslint,
+        "simple-import-sort": simpleImportSort,
+        import: fixupPluginRules(_import),
+        react,
+        "react-memo": reactMemo,
+        "react-hooks": fixupPluginRules(reactHooks),
+    },
+
+    languageOptions: {
+        parser: tsParser,
+        ecmaVersion: 2020,
+        sourceType: "module",
+
+        parserOptions: {
+            ecmaFeatures: {
+                jsx: true,
+            },
+        },
+    },
+
+    settings: {
+        react: {
+            pragma: "React",
+            version: "detect",
+        },
+    },
+
+    rules: {
+        "react/display-name": "off",
+        "react-memo/require-usememo": "off",
+        "react-memo/require-memo": "error",
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "error",
+        "@typescript-eslint/explicit-function-return-type": "off",
+
+        "@typescript-eslint/member-ordering": ["warn", {
+            interfaces: ["signature", "method", "constructor", "field"],
+            typeLiterals: ["signature", "method", "constructor", "field"],
+        }],
+
+        "import/first": "error",
+        "import/newline-after-import": "error",
+        "import/no-duplicates": "error",
+        "import/order": "off",
+        "no-irregular-whitespace": "off",
+
+        "@typescript-eslint/no-unused-vars": ["warn", {
+            argsIgnorePattern: "^_",
+        }],
+
+        "object-curly-spacing": ["error", "never"],
+        "react/jsx-curly-brace-presence": [2, "never"],
+        "react/jsx-no-duplicate-props": "error",
+        "react/jsx-sort-props": "error",
+        "react/react-in-jsx-scope": "off",
+        "react/no-unescaped-entities": "off",
+        "simple-import-sort/exports": "error",
+        "simple-import-sort/imports": "error",
+        "sort-imports": "off",
+        "jsx-a11y/no-onchange": "off",
+        "jsx-a11y/no-autofocus": "off",
+        "@next/next/no-img-element": "off",
+    },
+}, {
+    files: ["**/*.tsx"],
+
+    rules: {
+        "react/prop-types": "off",
+    },
+}, {
+    files: ["**/*.js"],
+
+    rules: {
+        "@typescript-eslint/no-var-requires": "off",
+    },
+}];

next-env.d.ts

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

next.config.js

@@ -21,7 +21,6 @@ const nextConfig = {
   poweredByHeader: false,
   productionBrowserSourceMaps: false,
   reactStrictMode: true,
-  swcMinify: true,
   trailingSlash: false,
   images: {
     remotePatterns: [

package.json

@@ -7,58 +7,60 @@
     "clean": "rm -rf build-tsc .next",
     "compile": "yarn run -T tsc --build --verbose",
     "dev": "yarn compile && yarn next dev",
+    "format": "prettier --write .",
     "lint": "yarn run -T prettier --write './src/**/*.{js,jsx,json,ts,tsx}' && eslint './src/**/*.{js,jsx,ts,tsx}' --fix --max-warnings=0",
+    "lint:fix": "next lint --fix",
+    "sitemap": "yarn next-sitemap",
     "start": "yarn next start",
-    "sitemap": "yarn next-sitemap"
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.16",
-    "@heroicons/react": "^2.0.18",
-    "autoprefixer": "10.4.16",
-    "classnames": "^2.3.2",
-    "next": "^14.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "ts-pattern": "^5.0.4"
+    "@headlessui/react": "^2.2.0",
+    "@heroicons/react": "^2.2.0",
+    "classnames": "^2.5.1",
+    "next": "^15.0.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sharp": "^0.33.5",
+    "ts-pattern": "^5.5.0"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.0.3",
-    "@tailwindcss/forms": "^0.5.4",
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/node": "^20.4.5",
-    "@types/react": "^18.2.18",
-    "@types/tailwindcss": "^3.1.0",
-    "@types/webpack-env": "^1.18.1",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
-    "cssnano": "^6.0.1",
-    "eslint": "^8.46.0",
-    "eslint-config-next": "^14.0.3",
+    "@eslint/compat": "^1.2.3",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.15.0",
+    "@next/eslint-plugin-next": "^15.0.3",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/classnames": "^2.3.4",
+    "@types/node": "^22.9.3",
+    "@types/react": "^18.3.12",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "autoprefixer": "10.4.20",
+    "cssnano": "^7.0.6",
+    "eslint": "^9.15.0",
+    "eslint-config-next": "^15.0.3",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-module-resolver": "^1.5.0",
     "eslint-plugin-monorepo": "^0.3.2",
-    "eslint-plugin-react": "^7.33.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-memo": "^0.0.3",
-    "eslint-plugin-react-native": "^4.0.0",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
-    "postcss": "^8.4.27",
-    "postcss-preset-env": "^9.1.0",
-    "prettier": "^3.0.0",
-    "prettier-plugin-tailwindcss": "^0.5.7",
-    "sass": "^1.64.2",
-    "sort-package-json": "^2.5.1",
-    "stylelint": "^15.10.2",
-    "stylelint-config-recommended": "^13.0.0",
-    "stylelint-order": "^6.0.3",
-    "stylelint-prettier": "^4.0.2",
-    "tailwindcss": "^3.3.3",
-    "typescript": "5.3.2"
-  },
-  "resolutions": {
-    "autoprefixer": "10.4.5"
+    "postcss": "^8.4.49",
+    "postcss-preset-env": "^10.1.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "sass": "^1.81.0",
+    "sort-package-json": "^2.12.0",
+    "stylelint": "^16.10.0",
+    "stylelint-config-recommended": "^14.0.1",
+    "stylelint-order": "^6.0.4",
+    "stylelint-prettier": "^5.0.2",
+    "tailwindcss": "^3.4.15",
+    "typescript": "5.6.3"
   }
 }

src/components/Sections/Header.tsx

@@ -17,7 +17,9 @@ const Header: FC = memo(() => {
   );
 
   const intersectionHandler = useCallback((section: SectionId | null) => {
-    section && setCurrentSection(section);
+    if (section) {
+      setCurrentSection(section);
+    }
   }, []);
 
   useNavObserver(navSections.map(section => `#${section}`).join(','), intersectionHandler);
@@ -85,7 +87,7 @@ const MobileNav: FC<{navSections: SectionId[]; currentSection: SectionId | null}
               leave="transition-opacity ease-linear duration-300"
               leaveFrom="opacity-100"
               leaveTo="opacity-0">
-              <Dialog.Overlay className="fixed inset-0 bg-stone-900 bg-opacity-75" />
+              <div className="fixed inset-0 bg-stone-900 bg-opacity-75" />
             </Transition.Child>
             <Transition.Child
               as={Fragment}

src/components/Sections/Resume/TimelineItem.tsx

@@ -1,6 +1,6 @@
 import {FC, memo} from 'react';
 
-import {TimelineItem} from '../../../data/dataDef';
+import {type TimelineItem} from '../../../data/dataDef';
 
 const TimelineItem: FC<{item: TimelineItem}> = memo(({item}) => {
   const {title, date, location, content} = item;

src/components/Sections/Testimonials.tsx

@@ -3,7 +3,7 @@ import {FC, memo, UIEventHandler, useCallback, useEffect, useMemo, useRef, useSt
 
 import {isApple, isMobile} from '../../config';
 import {SectionId, testimonial} from '../../data/data';
-import {Testimonial} from '../../data/dataDef';
+import {type Testimonial} from '../../data/dataDef';
 import useInterval from '../../hooks/useInterval';
 import useWindow from '../../hooks/useWindow';
 import QuoteIcon from '../Icon/QuoteIcon';
@@ -102,7 +102,9 @@ const Testimonials: FC = memo(() => {
                     )}
                     disabled={isActive}
                     key={`select-button-${index}`}
-                    onClick={setTestimonial(index)}></button>
+                    onClick={setTestimonial(index)}
+                    title="Select testimonial">
+                    </button>
                 );
               })}
             </div>
@@ -123,7 +125,7 @@ const Testimonial: FC<{testimonial: Testimonial; isActive: boolean}> = memo(
       {image ? (
         <div className="relative h-14 w-14 shrink-0 sm:h-16 sm:w-16">
           <QuoteIcon className="absolute -left-2 -top-2 h-4 w-4 stroke-black text-white" />
-          <img className="h-full w-full rounded-full" src={image} />
+          <img title="Testimonal image" className="h-full w-full rounded-full" src={image} />
         </div>
       ) : (
         <QuoteIcon className="h-5 w-5 shrink-0 text-white sm:h-8 sm:w-8" />

src/hooks/useWindow.ts

@@ -23,7 +23,6 @@ const useWindow = (): WindowSize => {
     window.addEventListener('resize', handleSize);
     handleSize();
     return () => window.removeEventListener('resize', handleSize);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return windowSize;