wei · shubhamkhan · Oct 25, 2024 · Oct 26, 2024 · Oct 26, 2024 · Oct 29, 2024
diff --git a/.changeset/few-ducks-hammer.md b/.changeset/few-ducks-hammer.md
@@ -0,0 +1,5 @@
+---
+"socialify": minor
+---
+
+Upgrade Next.js to v15, React to v19, and update related dependencies
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "license": "MIT",
   "repository": "https://github.com/wei/socialify.git",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "debug": "NODE_OPTIONS='--inspect' next",
     "build": "next build",
     "test": "jest",
@@ -22,7 +22,7 @@
     "prepare": "is-ci || husky"
   },
   "dependencies": {
-    "@changesets/cli": "^2.27.8",
+    "@changesets/cli": "^2.27.9",
     "@resvg/resvg-wasm": "^2.6.2",
     "autoprefixer": "^10.4.20",
     "badgen": "^3.2.3",
@@ -31,31 +31,31 @@
     "daisyui": "^2.46.1",
     "hero-patterns": "^2.1.0",
     "is-ci": "^3.0.1",
-    "next": "^14.2.8",
-    "postcss": "^8.4.45",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-error-boundary": "^4.0.13",
+    "next": "^15.0.1",
+    "postcss": "^8.4.47",
+    "react": "19.0.0-rc-69d4b800-20241021",
+    "react-dom": "19.0.0-rc-69d4b800-20241021",
+    "react-error-boundary": "^4.1.2",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
     "satori": "^0.10.14",
     "simple-icons": "^11.13.0",
     "styled-jsx": "^5.1.6",
-    "tailwindcss": "^3.4.10",
-    "typescript": "~5.5.4",
-    "use-debounce": "^10.0.3",
+    "tailwindcss": "^3.4.14",
+    "typescript": "~5.6.3",
+    "use-debounce": "^10.0.4",
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.8.3",
+    "@biomejs/biome": "^1.9.4",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
-    "@types/jest": "^29.5.12",
-    "@types/react": "18.3.5",
+    "@types/jest": "^29.5.14",
+    "@types/react": "18.3.12",
     "graphql": "^16.9.0",
     "graphql-compiler": "^1.7.0",
-    "husky": "^9.1.5",
+    "husky": "^9.1.6",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0"
@@ -71,5 +71,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  }  
 }
diff --git a/pages/404.tsx b/pages/404.tsx
@@ -10,4 +10,10 @@ const HomePage = () => {
   )
 }
 
+export const metadata = {
+  title: '404 - Page Not Found',
+  description:
+    'This page could not be found. Please check the URL or return to the homepage.',
+}
+
 export default HomePage
diff --git a/pages/[_owner]/[_name].tsx b/pages/[_owner]/[_name].tsx
@@ -1,7 +1,11 @@
 import MainRenderer from '../../src/components/mainRenderer'
 
 const RepoPage = () => {
-  return <MainRenderer />
+  return (
+    <>
+      <MainRenderer />
+    </>
+  )
 }
 
 export default RepoPage
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,4 +1,4 @@
-import App from 'next/app'
+import { AppProps } from 'next/app'
 import Head from 'next/head'
 import Script from 'next/script'
 import { Toaster } from 'react-hot-toast'
@@ -41,43 +41,39 @@ const GoogleTagManager = () => {
   )
 }
 
-export default class MyApp extends App {
-  public render() {
-    const { Component, pageProps } = this.props
-
-    return (
-      <>
-        <Head>
-          <meta
-            name="viewport"
-            content="width=device-width,initial-scale=1,minimal-ui,maximum-scale=1,user-scalable=no"
-          />
-          <meta name="theme-color" content="#000000" />
-          <meta
-            name="description"
-            content="💞 Socialify your project. 🌐 Share with the world!"
-          />
-          <meta
-            property="og:image"
-            content={`${HOST_PREFIX}/assets/socialify.png`}
-          />
-          <meta property="og:image:type" content="image/png" />
-          <meta property="og:image:width" content="1280" />
-          <meta property="og:image:height" content="640" />
-          <link rel="apple-touch-icon" href="/assets/logo192.png" />
-          <link rel="manifest" href="/manifest.json" />
-          <title>GitHub Socialify</title>
-          {GoogleTagManager()}
-        </Head>
-        <div className="flex flex-col min-h-screen bg-gradient-to-r from-[#231e43] via-[#191630] to-[#15103e]">
-          <HeaderElement />
-          <div className="flex-1 flex">
-            <Component {...pageProps} />
-          </div>
-          <FooterElement />
-          <Toaster />
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Head>
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,minimal-ui,maximum-scale=1,user-scalable=no"
+        />
+        <meta name="theme-color" content="#000000" />
+        <meta
+          name="description"
+          content="💞 Socialify your project. 🌐 Share with the world!"
+        />
+        <meta
+          property="og:image"
+          content={`${HOST_PREFIX}/assets/socialify.png`}
+        />
+        <meta property="og:image:type" content="image/png" />
+        <meta property="og:image:width" content="1280" />
+        <meta property="og:image:height" content="640" />
+        <link rel="apple-touch-icon" href="/assets/logo192.png" />
+        <link rel="manifest" href="/manifest.json" />
+        <title>GitHub Socialify</title>
+        {GoogleTagManager()}
+      </Head>
+      <div className="flex flex-col min-h-screen bg-gradient-to-r from-[#231e43] via-[#191630] to-[#15103e]">
+        <HeaderElement />
+        <div className="flex-1 flex">
+          <Component {...pageProps} />
         </div>
-      </>
-    )
-  }
+        <FooterElement />
+        <Toaster />
+      </div>
+    </>
+  )
 }
diff --git a/pages/api/font.ts b/pages/api/font.ts
@@ -5,6 +5,7 @@ import { FontDetector, languageFontMap } from '../../common/font'
 
 export const config = {
   runtime: 'edge',
+  fetchCache: 'default-cache',
 }
 
 const detector = new FontDetector()
@@ -37,14 +38,18 @@ function encodeFontInfoAsArrayBuffer(code: string, fontData: ArrayBuffer) {
 }
 
 export default async function loadGoogleFont(req: NextRequest) {
-  if (req.nextUrl.pathname !== '/api/font') return
+  if (req.nextUrl.pathname !== '/api/font') {
+    return new Response(null, { status: 400 })
+  }
 
   const { searchParams } = new URL(req.url)
 
   const fonts = searchParams.getAll('fonts')
   const text = searchParams.get('text')
 
-  if (!fonts || fonts.length === 0 || !text) return
+  if (!fonts || fonts.length === 0 || !text) {
+    return new Response('Missing fonts or text parameters', { status: 400 })
+  }
 
   const textByFont = await detector.detect(text, fonts)
 
@@ -93,21 +98,19 @@ async function fetchFont(
     text
   )}`
 
-  const css = await (
-    await fetch(API, {
-      headers: {
-        // Make sure it returns TTF.
-        'User-Agent':
-          'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1',
-      },
-    })
-  ).text()
+  const css = await fetch(API, {
+    headers: {
+      // Make sure it returns TTF.
+      'User-Agent':
+        'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1',
+    },
+  }).then((res) => res.text())
 
   const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)
 
   if (!resource) return null
 
-  const res = await fetch(resource[1])
+  const res = await fetch(resource[1], { cache: 'force-cache' })
 
   return res.arrayBuffer()
 }
diff --git a/pages/api/image.ts b/pages/api/image.ts
@@ -15,4 +15,6 @@ export const config = {
   runtime: 'edge',
 }
 
+export const fetchCasche = 'defult-cache'
+
 export default imageEndpoint
diff --git a/pages/api/png.ts b/pages/api/png.ts
@@ -41,4 +41,6 @@ export const config = {
   runtime: 'edge',
 }
 
+export const fetchCache = 'default-cache'
+
 export default pngEndpoint
diff --git a/pages/api/stats.svg.ts b/pages/api/stats.svg.ts
@@ -47,4 +47,6 @@ export const config = {
   runtime: 'edge',
 }
 
+export const fetchCache = 'default-cache'
+
 export default statsSvgEndpoint
diff --git a/pages/api/stats.ts b/pages/api/stats.ts
@@ -40,4 +40,6 @@ export const config = {
   runtime: 'edge',
 }
 
+export const fetchCache = 'default-cache'
+
 export default statsEndpoint
diff --git a/pages/api/svg.ts b/pages/api/svg.ts
@@ -43,4 +43,6 @@ export const config = {
   runtime: 'edge',
 }
 
+export const fetchCache = 'default-cache'
+
 export default svgEndpoint
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,7 +1,11 @@
 import Repo from '../src/components/repo/repo'
 
 const HomePage = () => {
-  return <Repo />
+  return (
+    <>
+      <Repo />
+    </>
+  )
 }
 
 export default HomePage
diff --git a/src/components/configuration/checkBoxWrapper.tsx b/src/components/configuration/checkBoxWrapper.tsx
@@ -27,6 +27,7 @@ const CheckBoxWrapper = ({
           onChange={(e) => {
             handleChange({ state: e.target.checked }, keyName)
           }}
+          aria-labelledby={title}
         />
         <span className="label-text">{title}</span>
       </label>

diff --git a/src/components/mainRenderer.tsx b/src/components/mainRenderer.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { MdErrorOutline } from 'react-icons/md'
 
 import {
@@ -19,12 +19,12 @@ const MainRenderer = () => {
 
   const [, owner, name] = path.split('/')
 
-  const [{ error, props }, setProps] = React.useState<Props>({
+  const [{ error, props }, setProps] = useState<Props>({
     error: null,
     props: undefined,
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (owner && owner.charAt(0) !== '[') {
       getRepoDetails(owner, name)
         .then((props) => setProps({ error: null, props }))

diff --git a/src/components/mainWrapper.tsx b/src/components/mainWrapper.tsx
@@ -23,7 +23,7 @@ const MainWrapper = ({ response }: MainWrapperProps) => {
   }
 
   useEffect(() => {
-    if (!response || !response.repository) {
+    if (!response?.repository) {
       router.push('/')
       toast.error('Please enter a valid GitHub repository.')
     }