feat: ✨ Update Typescript, React, Next for security updates

next.config.js

@@ -1,21 +1,37 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  eslint: {
-    dirs: ['src'],
-  },
-
   reactStrictMode: true,
-  swcMinify: true,
 
   images: {
-    domains: [
-      'storage.googleapis.com',
-      'storage.tally.so',
-      'images.unsplash.com',
-      'fairdataihub.org',
-      'ucarecdn.com',
-      'i.imgur.com',
-      'eyeact.b-cdn.net',
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'storage.googleapis.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'storage.tally.so',
+      },
+      {
+        protocol: 'https',
+        hostname: 'images.unsplash.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'fairdataihub.org',
+      },
+      {
+        protocol: 'https',
+        hostname: 'ucarecdn.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'i.imgur.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'eyeact.b-cdn.net',
+      },
     ],
   },
 

package.json

@@ -4,8 +4,8 @@
   "private": false,
   "typings": "index.d.ts",
   "scripts": {
-    "dev": "next dev",
-    "build": "next build && rm -rf ./.next/cache",
+    "dev": "next dev --webpack",
+    "build": "next build --webpack && rm -rf ./.next/cache",
     "start": "next start",
     "lint": "eslint --ignore-path .gitignore \"./**/*.+(ts|js|tsx)\"",
     "lint:fix": "eslint src --fix && yarn format",
@@ -37,14 +37,14 @@
     "d3": "^7.9.0",
     "dayjs": "^1.11.9",
     "formik": "^2.2.9",
-    "framer-motion": "^8.0.2",
+    "framer-motion": "^12.40.0",
     "gray-matter": "^4.0.3",
     "html-react-parser": "^3.0.4",
     "motion": "^11.15.0",
-    "next": "14.2.34",
+    "next": "16.2.7",
     "plaiceholder": "^2.5.0",
-    "react": "18",
-    "react-dom": "18",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-icons": "^4.6.0",
     "react-lottie-player": "^2.1.0",
     "react-toastify": "^9.1.1",
@@ -73,17 +73,18 @@
     "@svgr/webpack": "^6.5.1",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.8",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^13.4.0",
     "@types/d3": "^7.4.3",
     "@types/jest": "^29.2.3",
     "@types/mocha": "^10.0.1",
-    "@types/react": "^18.0.25",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.26.0",
-    "eslint-config-next": "^14.2.23",
+    "eslint-config-next": "16.2.7",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-simple-import-sort": "^7.0.0",
@@ -98,7 +99,7 @@
     "run-script-os": "^1.1.6",
     "tailwindcss": "^3.2.2",
     "tailwindcss-debug-screens": "^2.2.1",
-    "typescript": "^4.8.4"
+    "typescript": "5.8.3"
   },
   "config": {
     "commitizen": {

src/constant/env.ts

@@ -2,6 +2,5 @@ export const isProd = process.env.NODE_ENV === 'production';
 
 export const isLocal = process.env.NODE_ENV === 'development';
 
-export const showLogger = isLocal
-  ? true
-  : process.env.NEXT_PUBLIC_SHOW_LOGGER === 'true' ?? false;
+export const showLogger =
+  isLocal || process.env.NEXT_PUBLIC_SHOW_LOGGER === 'true';

src/utils/framer.ts

@@ -1,4 +1,6 @@
-export const FramerContainer = {
+import type { Variants } from 'framer-motion';
+
+export const FramerContainer: Variants = {
   hidden: { opacity: 0 },
   show: {
     opacity: 1,
@@ -9,12 +11,12 @@ export const FramerContainer = {
   },
 };
 
-export const FadeFramerItem = {
+export const FadeFramerItem: Variants = {
   hidden: { opacity: 0, translateY: 100 },
   show: { opacity: 1, translateY: 0 },
 };
 
-export const WidthFramerContainer = {
+export const WidthFramerContainer: Variants = {
   hidden: { opacity: 0 },
   show: {
     opacity: 1,
@@ -25,7 +27,7 @@ export const WidthFramerContainer = {
   },
 };
 
-export const WidthFramerItem = {
+export const WidthFramerItem: Variants = {
   hidden: { width: 0, opacity: 0 },
   show: { width: 'auto', opacity: 1 },
 };

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -9,18 +9,17 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
-    "baseUrl": ".",
+    "jsx": "react-jsx",
     "paths": {
       "@/*": ["./src/*"],
       "~/*": ["./public/*"]
     },
     "incremental": true,
-    "types": ["node", "jest", "mocha", "@testing-library/jest-dom"],
-    "typeRoots": ["./src/types"],
+    "baseUrl": ".",
+    "types": ["node", "jest", "mocha"],
     "plugins": [
       {
         "name": "next"
@@ -34,6 +33,5 @@
     ".next/types/**/*.ts",
     "src/pages/api/contact.ts"
   ],
-  "exclude": ["node_modules"],
-  "moduleResolution": ["node_modules", ".next", "node"]
+  "exclude": ["node_modules"]
 }