refactor: update to nextjs15

app/blog/[...slug]/page.tsx

@@ -21,11 +21,12 @@ const layouts = {
   PostBanner,
 }
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { slug: string[] }
-}): Promise<Metadata | undefined> {
+export async function generateMetadata(
+  props: {
+    params: Promise<{ slug: string[] }>
+  },
+): Promise<Metadata | undefined> {
+  const params = await props.params
   const slug = decodeURI(params.slug.join('/'))
   const post = allBlogs.find(p => p.slug === slug)
   const authorList = post?.authors || ['default']
@@ -78,7 +79,8 @@ export async function generateStaticParams() {
   return allBlogs.map(p => ({ slug: p.slug.split('/').map(name => decodeURI(name)) }))
 }
 
-export default async function Page({ params }: { params: { slug: string[] } }) {
+export default async function Page({ params: promiseParams }: { params: Promise<{ slug: string[] }> }) {
+  const params = await promiseParams
   const slug = decodeURI(params.slug.join('/'))
   // Filter out drafts in production
   const sortedCoreContents = allCoreContent(sortPosts(allBlogs))

app/blog/page/[page]/page.tsx

@@ -11,7 +11,8 @@ export async function generateStaticParams() {
   return paths
 }
 
-export default function Page({ params }: { params: { page: string } }) {
+export default async function Page({ params: promiseParams }: { params: Promise<{ page: string }> }) {
+  const params = await promiseParams
   const posts = allCoreContent(sortPosts(allBlogs))
   const pageNumber = Number.parseInt(params.page as string)
   const initialDisplayPosts = posts.slice(

app/tag-data.json

@@ -1 +1,5 @@
-{ "svg": 1, "rust": 3, "frontend": 1 }
+{
+  "svg": 1,
+  "rust": 3,
+  "frontend": 1
+}

app/tags/[tag]/page.tsx

@@ -8,7 +8,8 @@ import { slug } from 'github-slugger'
 import { notFound } from 'next/navigation'
 import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer'
 
-export async function generateMetadata({ params }: { params: { tag: string } }): Promise<Metadata> {
+export async function generateMetadata(props: { params: Promise<{ tag: string }> }): Promise<Metadata> {
+  const params = await props.params
   const tag = decodeURI(params.tag)
   return genPageMetadata({
     title: tag,
@@ -31,7 +32,8 @@ export async function generateStaticParams() {
   return paths
 }
 
-export default function TagPage({ params }: { params: { tag: string } }) {
+export default async function TagPage({ params: promiseParams }: { params: Promise<{ tag: string }> }) {
+  const params = await promiseParams
   const tag = decodeURI(params.tag)
   // Capitalize first letter and convert space to dash
   const title = tag[0].toUpperCase() + tag.split(' ').join('-').slice(1)

components/BackgroundWrapper.tsx

@@ -1,6 +1,8 @@
 'use client'
 
 import { Sphere } from '@react-three/drei'
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-expect-error
 import { Canvas, useFrame } from '@react-three/fiber'
 import { motion } from 'framer-motion'
 import dynamic from 'next/dynamic'
@@ -20,13 +22,17 @@ const PointCircle = React.memo(() => {
   })
 
   return (
+  // eslint-disable-next-line ts/ban-ts-comment
+  // @ts-expect-error
     <group ref={ref}>
       {pointsInner.map(point => (
         <Point key={point.idx} position={point.position} color={point.color} />
       ))}
       {pointsOuter.map(point => (
         <Point key={point.idx} position={point.position} color={point.color} />
       ))}
+      {/* eslint-disable-next-line ts/ban-ts-comment */}
+      {/* @ts-expect-error */}
     </group>
   )
 })
@@ -48,6 +54,8 @@ const Circle = React.memo(() => {
 function Point({ position, color }) {
   return (
     <Sphere position={position} args={[0.1, 10, 10]}>
+      {/* eslint-disable-next-line ts/ban-ts-comment */}
+      {/* @ts-expect-error */}
       <meshStandardMaterial
         emissive={color}
         emissiveIntensity={0.5}
@@ -66,6 +74,8 @@ export default function BackgroundWrapper({ children }: { children: React.ReactN
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 3, ease: 'easeInOut' }}
+        // eslint-disable-next-line ts/ban-ts-comment
+        // @ts-expect-error
         className="!absolute inset-0"
       >
         <Circle />

components/Cursor.tsx

@@ -20,6 +20,8 @@ export default function Cursor() {
 
   return (
     <motion.div
+      // eslint-disable-next-line ts/ban-ts-comment
+      // @ts-expect-error
       className="fixed z-[999] size-12 rounded-full border border-black dark:border-white"
       animate={{ x: position.x + 10, y: position.y + 10 }}
     >

components/Reveal.tsx

@@ -12,6 +12,8 @@ interface RevealProps {
 export default function Reveal({ children, width = '100%' }: RevealProps) {
   const ref = useRef(null)
 
+  // eslint-disable-next-line ts/ban-ts-comment
+  // @ts-expect-error
   const isInView = useInView(ref, { once: true })
 
   const mainControls = useAnimation()

contentlayer.config.ts

@@ -77,7 +77,7 @@ function createTagCount(allBlogs) {
       })
     }
   })
-  writeFileSync('./app/tag-data.json', JSON.stringify(tagCount))
+  writeFileSync('./app/tag-data.json', `${JSON.stringify(tagCount, null, 2)}\n`)
 }
 
 function createSearchIndex(allBlogs) {

next.config.js

@@ -68,7 +68,7 @@ module.exports = () => {
     output,
     basePath,
     reactStrictMode: true,
-    swcMinify: true,
+    // swcMinify: true,
     pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
     eslint: {
       dirs: ['app', 'components', 'layouts', 'scripts'],

package.json

@@ -5,7 +5,7 @@
   "packageManager": "[email protected]",
   "scripts": {
     "start": "next dev",
-    "dev": "cross-env INIT_CWD=$PWD next dev",
+    "dev": "cross-env INIT_CWD=$PWD next dev --turbopack",
     "build": "cross-env INIT_CWD=$PWD next build && cross-env NODE_OPTIONS='--experimental-json-modules' node ./scripts/postbuild.mjs",
     "serve": "next start",
     "analyze": "cross-env ANALYZE=true next build",
@@ -15,9 +15,9 @@
   },
   "dependencies": {
     "@headlessui/react": "2.1.10",
-    "@next/bundle-analyzer": "14.2.15",
+    "@next/bundle-analyzer": "15.0.1",
     "@react-three/drei": "^9.114.6",
-    "@react-three/fiber": "^8.17.10",
+    "@react-three/fiber": "9.0.0-beta.1",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
     "autoprefixer": "^10.4.20",
@@ -29,14 +29,15 @@
     "gray-matter": "^4.0.3",
     "hast-util-from-html-isomorphic": "^2.0.0",
     "image-size": "1.1.1",
-    "next": "14.2.15",
+    "katex": "^0.16.11",
+    "next": "15.0.1",
     "next-contentlayer2": "0.5.1",
     "next-themes": "^0.3.0",
     "next-view-transitions": "^0.3.2",
     "pliny": "0.3.2",
     "postcss": "^8.4.47",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0-rc-cd22717c-20241013",
+    "react-dom": "19.0.0-rc-cd22717c-20241013",
     "reading-time": "1.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-citation": "^2.2.0",
@@ -56,12 +57,12 @@
     "@eslint-react/eslint-plugin": "^1.15.0",
     "@svgr/webpack": "^8.1.0",
     "@types/mdx": "^2.0.13",
-    "@types/react": "^18.3.11",
-    "@typescript-eslint/eslint-plugin": "^8.10.0",
-    "@typescript-eslint/parser": "^8.10.0",
+    "@types/react": "npm:[email protected]",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/parser": "^8.11.0",
     "cross-env": "^7.0.3",
     "eslint": "^9.13.0",
-    "eslint-config-next": "14.2.15",
+    "eslint-config-next": "15.0.1",
     "eslint-plugin-format": "^0.1.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.13",
@@ -70,6 +71,11 @@
     "simple-git-hooks": "^2.11.1",
     "typescript": "^5.6.3"
   },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "npm:[email protected]"
+    }
+  },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"
   },