Merge pull request #1414 from scroll-tech/upgrade-nextjs-15

Upgrade nextjs 15

Author: Holybasil

next.config.mjs

@@ -3,36 +3,61 @@
 // eslint-disable-next-line prettier/prettier
 import packageJson from "./package.json" with { type: "json" };
 import "./scripts/download-blog-posts.data.json.mjs"
+import createMDX from "@next/mdx"
+import rehypeRaw from "rehype-raw"
+import rehypeKatex from "rehype-katex"
+import remarkGfm from "remark-gfm"
+import remarkMath from "remark-math"
 
 // const { withSentryConfig } = require("@sentry/nextjs")
 
 const nextConfig = {
   env: {
     NEXT_PUBLIC_VERSION: packageJson.version,
-    NEXT_PUBLIC_FRONTENDS_URL: process.env.VERCEL_ENV === "production" ? "https://scroll.io" : process.env.VERCEL_BRANCH_URL?`https://${process.env.VERCEL_BRANCH_URL}`:"http://localhost:3000",
+    NEXT_PUBLIC_FRONTENDS_URL:
+      process.env.VERCEL_ENV === "production"
+        ? "https://scroll.io"
+        : process.env.VERCEL_BRANCH_URL
+          ? `https://${process.env.VERCEL_BRANCH_URL}`
+          : "http://localhost:3000",
   },
   images: {
     deviceSizes: [600, 900, 1200, 1536],
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "scroll-tech.github.io",
+        port: "",
+        pathname: "/token-list/data/**",
+      },
+      {
+        protocol: "https",
+        hostname: "scroll-eco-list.netlify.app",
+        port: "",
+        pathname: "/logos/**",
+      },
+    ],
   },
+  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
   // trailingSlash: true,
   async headers() {
     return [
       {
-        source: '/(.*)',
+        source: "/(.*)",
         headers: [
           {
-            key: 'X-Frame-Options',
-            value: 'DENY'
+            key: "X-Frame-Options",
+            value: "DENY",
           },
           {
-            key: 'Content-Security-Policy',
-            value: "frame-ancestors 'none'"
-          }
-        ]
-      }
+            key: "Content-Security-Policy",
+            value: "frame-ancestors 'none'",
+          },
+        ],
+      },
     ]
   },
-  
+
   async redirects() {
     return [
       {
@@ -56,7 +81,6 @@ const nextConfig = {
 
       { source: "/sticker-vote", destination: "/sticker-winners", permanent: true },
       // { source: "/airdrop-faq", destination: "https://scroll-faqs.gitbook.io/faqs", permanent: false},
-
     ]
   },
   async rewrites() {
@@ -67,22 +91,6 @@ const nextConfig = {
       }
     ]
   },
-  images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "scroll-tech.github.io",
-        port: "",
-        pathname: "/token-list/data/**",
-      },
-      {
-        protocol: "https",
-        hostname: "scroll-eco-list.netlify.app",
-        port: "",
-        pathname: "/logos/**",
-      },
-    ],
-  },
   // eslint-disable-next-line
   webpack: (config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {
     config.ignoreWarnings = [
@@ -131,11 +139,6 @@ const nextConfig = {
             },
           ],
         },
-        // .md
-        {
-          test: /\.md$/,
-          use: "raw-loader",
-        },
       ],
     )
 
@@ -171,7 +174,6 @@ const nextConfig = {
   //   automaticVercelMonitors: true,
   // },
 }
-export default nextConfig
 // Injected content via Sentry wizard below
 
 // module.exports = withSentryConfig(nextConfig, {
@@ -185,3 +187,14 @@ export default nextConfig
 //   project: process.env.SENTRY_PROJECT,
 //   authToken: process.env.SENTRY_AUTH_TOKEN,
 // })
+
+const withMDX = createMDX({
+  // Add markdown plugins here, as desired
+  options: {
+    remarkPlugins: [remarkGfm, remarkMath],
+    rehypePlugins: [rehypeKatex, rehypeRaw],
+  },
+})
+
+// Merge MDX config with Next.js config
+export default withMDX(nextConfig)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scroll.io",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "private": false,
   "license": "MIT",
   "scripts": {
@@ -20,42 +20,46 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@ethereum-attestation-service/eas-sdk": "^1.5.0",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/lab": "^5.0.0-alpha.108",
-    "@mui/material": "^5.13.5",
-    "@mui/material-nextjs": "^5.15.5",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@mui/icons-material": "6",
+    "@mui/lab": "^6.0.0-beta.23",
+    "@mui/material": "6",
+    "@mui/material-nextjs": "6",
     "@next/third-parties": "^15.1.5",
+    "@next/mdx": "^15.1.5",
     "@rainbow-me/rainbowkit": "^2.1.2",
     "@sentry/nextjs": "^7.95.0",
     "@tanstack/react-query": "^5.55.3",
+    "@tanstack/react-virtual": "^3.11.2",
+    "@types/mdx": "^2.0.13",
     "@typescript-eslint/parser": "^8.4.0",
     "copy-to-clipboard": "^3.3.2",
     "dayjs": "^1.11.5",
     "ethers": "6.12.0",
-    "framer-motion": "^9.0.4",
     "immer": "^9.0.7",
     "lodash": "^4.17.21",
-    "next": "14.2.19",
+    "motion": "^11.18.1",
+    "next": "15.1.4",
     "notistack": "^3.0.1",
     "number-flip": "^1.2.3",
     "numbro": "^2.3.6",
     "path-to-regexp": "^6.2.1",
-    "react": "^18.2.0",
+    "react": "19.0.0",
     "react-awesome-reveal": "^4.2.5",
     "react-cool-img": "^1.2.12",
     "react-countdown": "^2.3.2",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "19.0.0",
     "react-fast-marquee": "^1.6.5",
     "react-mailchimp-subscribe": "^2.1.3",
-    "react-markdown": "^8.0.3",
+    "react-markdown": "^9.0.3",
     "react-use": "^17.4.0",
-    "react-virtualized": "^9.22.5",
-    "rehype-katex": "^6.0.2",
-    "rehype-raw": "^6.1.1",
+    "rehype-katex": "^7.0.1",
+    "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "squirrel-gill": "1.0.5",
     "swiper": "^10.1.0",
     "swr": "^2.1.3",
@@ -73,15 +77,15 @@
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "@types/lodash": "^4.14.186",
     "@types/node": "^20.10.6",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "19.0.4",
+    "@types/react-dom": "19.0.2",
     "@types/react-helmet": "^6.1.6",
     "@types/three": "^0.128.0",
     "@typescript-eslint/eslint-plugin": "^8.4.0",
     "autoprefixer": "^10.4.12",
     "cross-env": "^7.0.3",
     "eslint": "^8",
-    "eslint-config-next": "14.0.4",
+    "eslint-config-next": "15.1.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "husky": "^8.0.2",
@@ -96,5 +100,9 @@
   "engines": {
     "node": "22.x"
   },
-  "packageManager": "yarn@1.22.19"
+  "packageManager": "yarn@1.22.19",
+  "resolutions": {
+    "@types/react": "19.0.4",
+    "@types/react-dom": "19.0.2"
+  }
 }

src/apis/blog.ts

@@ -1,3 +1,3 @@
-export const blogOrigin = "https://scroll-blog-list.netlify.app"
-export const blogListUrl = blogOrigin + "/docs/"
-export const blogListLogoUrl = blogOrigin + "/covers/"
+export const blogOrigin = "https://blog.scroll.cat"
+
+export const fetchBlogDetailURL = (blogId: string) => `${blogOrigin}/api/post/${blogId}.md?title=1`

src/app/SCR-sSCR/Explaination/index.tsx

@@ -13,7 +13,7 @@ import SectionHeader from "@/components/SectionHeader"
 import data from "./data"
 
 const Explaination = () => {
-  const wrapperRef = useRef()
+  const wrapperRef = useRef<HTMLDivElement>(null)
 
   return (
     <ScrollExpandedBg sx={{ pt: ["6rem", "9.6rem"], pb: ["8rem", "14rem"] }} anchorEl={wrapperRef} fastScrollIn>

src/app/_canvas-and-badges/Badges/BadgeList/BadgeCard.tsx

@@ -86,10 +86,7 @@ const BadgeCard = props => {
             style={{ height: isMobile ? "6.4rem" : "8rem", aspectRatio: "1 / 1", borderRadius: "0.45rem" }}
           />
           <Typography
-            sx={[
-              { fontSize: ["1.8rem", "2rem"], lineHeight: "3.2rem", fontWeight: 600, maxWidth: "100%" },
-              theme => (theme as any).vars.singleLineEllipsis,
-            ]}
+            sx={[{ fontSize: ["1.8rem", "2rem"], lineHeight: "3.2rem", fontWeight: 600, maxWidth: "100%" }, theme => theme.singleLineEllipsis]}
           >
             {name}
           </Typography>