Update nextjs to the latest version (#73)

* Update nextjs to the latest version

* Fixes after upgrading to nextjs 14

* ci: fix lint check and remove duplicate job

* style: ignore package.json, run fmt

* chore: absolute import

* ci: ignore lickfile diff

* ci: ignore lockfile diff

* fix: react does not recognize the  prop

to resolve, we pin react to an older version until a fix is out: vercel/next.js#65161

---------

Co-authored-by: Matt Solomon <[email protected]>

Author: fvictorio

.github/workflows/ci.yml

@@ -32,18 +32,5 @@ jobs:
       - name: Check linting and formatting
         run: bun check
 
-  chain-list:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
-
-      - name: Install dependencies
-        run: bun install
-
-      - name: Generate list of chains for the UI
-        run: bun prepare-chain-data
-
-      # When this fails, run `bun prepare-chain-data` locally and commit the changes
       - name: Ensure no diff
-        run: git diff --exit-code script/data
+        run: git diff --exit-code -- ':!bun.lockb'

biome.jsonc

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
 	"files": {
-		"ignore": ["archive/**/*", ".next/**/*"]
+		"ignore": ["archive/**/*", ".next/**/*", "package.json"]
 	},
 	"organizeImports": {
 		"enabled": true

bun.lockb

@@ -1,49 +1,49 @@
 {
-	"name": "evm-diff",
-	"version": "0.1.0",
-	"private": true,
-	"scripts": {
-		"dev": "bun prepare-chain-data && NEXT_PUBLIC_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) next dev",
-		"build": "NEXT_PUBLIC_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) next build",
-		"start": "bun prepare-chain-data && NEXT_PUBLIC_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) next start",
-		"lint": "next lint --fix && tsc --noEmit && bunx @biomejs/biome lint --apply .",
-		"fmt": "bunx @biomejs/biome format --write .",
-		"check": "bun prepare-chain-data && bun lint && bun fmt",
-		"fetch-data": "bash script/main.sh",
-		"prepare-chain-data": "bash script/prepare-chain-data.sh"
-	},
-	"dependencies": {
-		"@headlessui/react": "^1.7.16",
-		"@heroicons/react": "^2.0.17",
-		"@vercel/analytics": "^1.0.1",
-		"@vercel/og": "^0.5.10",
-		"@wagmi/chains": "^0.3.1",
-		"next": "^13.4.12",
-		"next-themes": "^0.2.1",
-		"react": "18.2.0",
-		"react-diff-viewer-continued": "^3.4.0",
-		"react-dom": "18.2.0",
-		"react-markdown": "^8.0.7",
-		"sharp": "^0.33.4",
-		"viem": "^1.5.0"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "^1.7.2",
-		"@tailwindcss/forms": "^0.5.3",
-		"@types/bun": "^1.1.0",
-		"@types/node": "18.16.3",
-		"@types/react": "18.2.5",
-		"@types/react-dom": "18.2.3",
-		"@typescript-eslint/eslint-plugin": "^6.1.0",
-		"@typescript-eslint/parser": "^6.1.0",
-		"abitype": "^0.9.6",
-		"autoprefixer": "10.4.14",
-		"clipboardy": "^3.0.0",
-		"eslint": "8.39.0",
-		"eslint-config-next": "13.4.12",
-		"eslint-plugin-react": "^7.32.2",
-		"postcss": "8.4.31",
-		"tailwindcss": "3.3.2",
-		"typescript": "5.0.4"
-	}
+  "name": "evm-diff",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "bun prepare-chain-data && NEXT_PUBLIC_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) next dev",
+    "build": "NEXT_PUBLIC_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) next build",
+    "start": "bun prepare-chain-data && NEXT_PUBLIC_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) next start",
+    "lint": "next lint --fix && tsc --noEmit && bunx @biomejs/biome lint --apply .",
+    "fmt": "bunx @biomejs/biome format --write .",
+    "check": "bun prepare-chain-data && bun lint && bun fmt",
+    "fetch-data": "bash script/main.sh",
+    "prepare-chain-data": "bash script/prepare-chain-data.sh"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.7.16",
+    "@heroicons/react": "^2.0.17",
+    "@vercel/analytics": "^1.0.1",
+    "@vercel/og": "^0.5.10",
+    "@wagmi/chains": "^0.3.1",
+    "next": "^14.2.3",
+    "next-themes": "^0.2.1",
+    "react": "18.2.0",
+    "react-diff-viewer-continued": "^3.4.0",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^8.0.7",
+    "sharp": "^0.33.4",
+    "viem": "^1.5.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.7.2",
+    "@tailwindcss/forms": "^0.5.3",
+    "@types/bun": "^1.1.0",
+    "@types/node": "18.16.3",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
+    "abitype": "^0.9.6",
+    "autoprefixer": "10.4.14",
+    "clipboardy": "^3.0.0",
+    "eslint": "8.39.0",
+    "eslint-config-next": "^14.2.3",
+    "eslint-plugin-react": "^7.32.2",
+    "postcss": "8.4.31",
+    "tailwindcss": "3.3.2",
+    "typescript": "5.0.4"
+  }
 }

package.json

@@ -1,8 +1,8 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useTheme } from 'next-themes';
-import logoDark from 'public/logo-dark.png';
-import logoLight from 'public/logo-light.png';
+import logoDark from '@/../public/logo-dark.png';
+import logoLight from '@/../public/logo-light.png';
 import { COMPANY_NAME, GITHUB_URL, TWITTER_URL } from '@/lib/constants';
 import { ExternalLink } from './ExternalLink';
 import { ThemeSwitcher } from '@/components/layout/ThemeSwitcher';

src/components/layout/Header.tsx

@@ -8,8 +8,8 @@ export const config = {
 
 export default async function handler(_request: NextRequest) {
 	const getLogoImageData = async () => {
-		return await fetch(new URL('public/logo-dark-tight.png', import.meta.url)).then((res) =>
-			res.arrayBuffer(),
+		return await fetch(new URL('public/logo-dark-tight.png', new URL(import.meta.url))).then(
+			(res) => res.arrayBuffer(),
 		);
 	};