feat: next 15 version update

Author: henrynoowah

package.json

@@ -3,30 +3,30 @@
   "version": "0.22.2",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@formatjs/intl-localematcher": "^0.5.4",
     "@heroicons/react": "^2.1.1",
-    "@splinetool/react-spline": "^2.2.6",
+    "@splinetool/react-spline": "^4.0.0",
     "@splinetool/runtime": "^1.2.8",
     "@supabase/supabase-js": "^2.43.1",
     "@uiw/react-md-editor": "^3.20.5",
     "eslint": "8.35.0",
-    "eslint-config-next": "13.2.3",
-    "framer-motion": "^11.0.3",
+    "eslint-config-next": "15.0.0",
+    "framer-motion": "^12.0.0-alpha.0",
     "lodash": "^4.17.21",
     "negotiator": "^0.6.3",
-    "next": "^14.2.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-markdown": "^8.0.5",
-    "rehype-raw": "^6.1.1",
+    "next": "15.0.0",
+    "react": "19.0.0-rc-65a56d0e-20241020",
+    "react-dom": "19.0.0-rc-65a56d0e-20241020",
+    "react-markdown": "^9.0.1",
+    "rehype-raw": "^7.0.0",
     "remark": "^14.0.2",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "remark-html": "^15.0.2",
     "swr": "^2.2.4",
     "tailwind-scrollbar-hide": "^1.1.7",
@@ -36,12 +36,16 @@
     "@types/lodash": "^4.14.202",
     "@types/negotiator": "^0.6.3",
     "@types/node": "18.14.6",
-    "@types/react": "^18.3.2",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]",
     "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
     "react-syntax-highlighter": "^15.5.0",
     "tailwindcss": "^3.4.3"
+  },
+  "resolutions": {
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]"
   }
 }

src/app/[locale]/_components/MainContainer.tsx

@@ -3,20 +3,21 @@
 import { NavItem } from '@/app/[locale]/_components/NavItem'
 import { NavModal } from '@/app/[locale]/_components/NavModal'
 import ChatBox from '@/components/common/chats/ChatBox'
-import LoadingCircle from '@/components/common/loadings/LoadingCircle'
+// import LoadingCircle from '@/components/common/loadings/LoadingCircle'
 import { useDictionary } from '@/context/dictionary-provider'
 import { ChatBubbleLeftEllipsisIcon, DocumentIcon } from '@heroicons/react/24/solid'
 import { Application, SPEObject } from '@splinetool/runtime'
 import { motion } from 'framer-motion'
-import dynamic from 'next/dynamic'
+// import dynamic from 'next/dynamic'
 import { useParams } from 'next/navigation'
 import { useRef, useState } from 'react'
 import LocaleToggle from './LocaleToggle'
+import Spline from '@splinetool/react-spline'
 
-const Spline = dynamic(() => import('@splinetool/react-spline'), {
-  ssr: false,
-  loading: () => <LoadingCircle />
-})
+// const Spline = dynamic(() => import('@splinetool/react-spline'), {
+//   ssr: false,
+//   loading: () => <LoadingCircle />
+// })
 
 const SPLINE_SCENE = 'https://prod.spline.design/W83XdmrQbaQnPMlJ/scene.splinecode'
 const SPLINE_BOT_ID = '7a1937ee-e0ec-4da1-bca9-10b1ff105490'
@@ -29,10 +30,11 @@ const MainContainer = () => {
   const navList = [
     {
       name: t.navigation.posts.title,
-      href: '/posts',
+      href: 'https://velog.io/@henrynoowah/posts',
       icon: <DocumentIcon className="text-light" />,
       desc: t.navigation.posts.description,
-      locale: params.locale as string
+      locale: params.locale as string,
+      external: true
     },
     // {
     //   name: 'works',
@@ -79,14 +81,14 @@ const MainContainer = () => {
     }
   }
 
-  const botRef = useRef<SPEObject>()
-  const splineRef = useRef<Application>()
+  const botRef = useRef<SPEObject>(null)
+  const splineRef = useRef<Application>(null)
 
   const onLoad = (spline: Application) => {
     splineRef.current = spline
     const botObj = spline.findObjectByName(SPLINE_BOT_ID)
     botObj?.emitEvent('mouseDown')
-    botRef.current = botObj
+    if (botObj) botRef.current = botObj
   }
 
   const toggleChat = () => {

src/app/[locale]/layout.tsx

@@ -31,10 +31,16 @@ export async function generateStaticParams() {
 
 interface Params {
   children: React.ReactNode
-  params: { locale: Locale }
+  params: Promise<{ locale: Locale }>
 }
 
-const RootLayout = ({ children, params }: Params) => {
+const RootLayout = async (props: Params) => {
+  const params = await props.params;
+
+  const {
+    children
+  } = props;
+
   return (
     <html lang={params.locale}>
       <head>

src/app/[locale]/page.tsx

@@ -7,12 +7,13 @@ import MainContainer from './_components/MainContainer'
 const inter = Inter({ variable: '--font-inter', subsets: ['latin'] })
 
 interface Params {
-  params: {
+  params: Promise<{
     locale: Locale
-  }
+  }>
 }
 
-const Home = async ({ params }: Params) => {
+const Home = async (props: Params) => {
+  const params = await props.params
   const dictionary = await getDictionary(params.locale)
   return (
     <main className={inter.variable}>

src/app/[locale]/posts/[slug]/page.tsx

@@ -8,14 +8,16 @@ const getData = async (slug: string): Promise<any> => {
   return await getPost(slug)
 }
 
-export const generateMetadata = async ({ params }: any): Promise<Metadata> => {
+export const generateMetadata = async (props: any): Promise<Metadata> => {
+  const params = await props.params;
   const post = await getPost(params.slug)
   return {
     title: post?.title
   }
 }
 
-const PostDetailPage = async ({ params }: any) => {
+const PostDetailPage = async (props: any) => {
+  const params = await props.params;
   const slug = decodeURIComponent(params.slug)
   const post = await getData(slug)
   return (

src/app/[locale]/posts/layout.tsx

@@ -13,19 +13,24 @@ import { ReactNode } from 'react'
 
 interface Params {
   children: ReactNode
-  params: { locale: Locale }
+  params: Promise<{ locale: Locale }>
 }
 
-const PostsLayouts = async ({ children, params }: Params) => {
+const PostsLayouts = async (props: Params) => {
+  const params = await props.params
+
+  const { children } = props
+
   const t = await getDictionary(params.locale)
   console.log(t)
 
   const navOption: Array<{ label: string; href: string; locale: Locale; external?: boolean }> = [
     { label: t.navigation.home.title, href: '/', locale: params.locale },
     {
       label: t.navigation.posts.title,
-      href: '/posts',
-      locale: params.locale
+      href: 'https://velog.io/@henrynoowah/posts',
+      locale: params.locale,
+      external: true
     },
     {
       label: t.navigation.github.title,

src/components/common/layouts/header/Header.tsx

@@ -5,7 +5,6 @@ import packageData from 'package.json'
 import { Suspense } from 'react'
 import Nav_mobile from './Nav_mobile'
 import ShowSearchButton from './ShowSearchButton'
-import { useParams } from 'next/navigation'
 const ThemeToggle = dynamic(() => import('../../themeToggle/ThemeToggle'))
 
 const HEADER_HEIGHT = 72

src/components/common/markdowns/index.tsx

@@ -1,45 +1,41 @@
 import '@uiw/react-markdown-preview/markdown.css'
 import ReactMarkdown from 'react-markdown'
-import { SpecialComponents } from 'react-markdown/lib/ast-to-react'
-import { NormalComponents } from 'react-markdown/lib/complex-types'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import rehypeRaw from 'rehype-raw'
-import remarkGfm from 'remark-gfm'
 
 import '@uiw/react-markdown-preview/markdown.css'
 import '@uiw/react-md-editor/markdown-editor.css'
+import remarkGfm from 'remark-gfm'
 
 interface Params {
   markdown?: string
 }
 
-type MarkDownComponents = Partial<Omit<NormalComponents, keyof SpecialComponents> & SpecialComponents>
-
-const markdownComponents: MarkDownComponents = {
-  h1: ({ node, ...props }) => (
+const markdownComponents = {
+  h1: ({ node, ...props }: any) => (
     <h1 className="text-primary dark:text-light font-bold text-2xl py-6" {...props}>
       {props.children}
     </h1>
   ),
-  h2: ({ node, ...props }) => (
+  h2: ({ node, ...props }: any) => (
     <h2 className="text-primary dark:text-light font-bold text-xl py-6" {...props}>
       {props.children}
     </h2>
   ),
-  h3: ({ node, ...props }) => <h3 className="text-primary dark:text-light font-bold text-lg py-6" {...props} />,
-  h4: ({ node, ...props }) => <h4 className="text-primary dark:text-light font-bold text-md" {...props} />,
-  h5: ({ node, ...props }) => <h5 className="text-primary dark:text-light font-bold text-md" {...props} />,
-  h6: ({ node, ...props }) => <h5 className="text-primary/60 font-bold text-md" {...props} />,
-  p: ({ node, ...props }) => (
+  h3: ({ node, ...props }: any) => <h3 className="text-primary dark:text-light font-bold text-lg py-6" {...props} />,
+  h4: ({ node, ...props }: any) => <h4 className="text-primary dark:text-light font-bold text-md" {...props} />,
+  h5: ({ node, ...props }: any) => <h5 className="text-primary dark:text-light font-bold text-md" {...props} />,
+  h6: ({ node, ...props }: any) => <h5 className="text-primary/60 font-bold text-md" {...props} />,
+  p: ({ node, ...props }: any) => (
     <p className="text-dark dark:text-light text-md leading-[1.7rem] whitespace-pre-line py-2" {...props} />
   ),
-  ul: ({ node, ...props }) => {
+  ul: ({ node, ...props }: any) => {
     const { ordered: _, ...rest } = props
     return <ul className="list-disc text-md leading-6 ps-4 md:ps-8" {...rest} />
   },
-  ol: ({ node, ...props }) => <ol className="list-decimal ps-4 text-md leading-8" {...props} />,
-  li: ({ node, ...props }) => {
+  ol: ({ node, ...props }: any) => <ol className="list-decimal ps-4 text-md leading-8" {...props} />,
+  li: ({ node, ...props }: any) => {
     const { ordered: _, ...rest } = props
     return (
       <li
@@ -53,11 +49,11 @@ const markdownComponents: MarkDownComponents = {
       </li>
     )
   },
-  hr: ({ node, ...props }) => <hr className="my-6 border-primary/60" {...props} />,
-  a: ({ node, ...props }) => (
+  hr: ({ node, ...props }: any) => <hr className="my-6 border-primary/60" {...props} />,
+  a: ({ node, ...props }: any) => (
     <a target="_blank" className="text-primary dark:text-secondary underline underline-offset-1" {...props} />
   ),
-  input: ({ node, ...props }) => {
+  input: ({ node, ...props }: any) => {
     if (props.type === 'checkbox') {
       const { checked: _, ...rest } = props
       return (
@@ -72,15 +68,15 @@ const markdownComponents: MarkDownComponents = {
       return <input {...props} />
     }
   },
-  blockquote: ({ node, ...props }) => (
+  blockquote: ({ node, ...props }: any) => (
     <blockquote
       className="bg-primary/10 text-primary ps-4 py-1 border-l-[0.2rem] border-primary border-solid [&>p]:leading-8"
       {...props}
     >
       {props.children}
     </blockquote>
   ),
-  code: ({ node, inline, className, children, ...props }) => {
+  code: ({ node, inline, className, children, ...props }: any) => {
     const match = /language-(\w+)/.exec(className || '')
     const codeBlock = String(children).replace(/\n$/, ' ')
     return !inline ? (
@@ -103,32 +99,32 @@ const markdownComponents: MarkDownComponents = {
       </code>
     )
   },
-  table: ({ node, className, children, ...props }) => (
+  table: ({ node, className, children, ...props }: any) => (
     <div className="w-full overflow-auto ring-1 ring-inset dark:ring-light/10">
       <table className="w-full text-dark dark:text-light ring-inset rounded-md" {...props}>
         {children}
       </table>
     </div>
   ),
-  thead: ({ node, className, children, ...props }) => (
+  thead: ({ node, className, children, ...props }: any) => (
     <thead className="w-full border-b-1 border-solid border-light/10" {...props}>
       {children}
     </thead>
   ),
-  tr: ({ node, className, children, isHeader, ...props }) => (
+  tr: ({ node, className, children, isHeader, ...props }: any) => (
     <tr
       className="w-fit [&>*]:text-md [&>*]:border [&>*]:border-solid [&>*]:border-light [&>*]:border-collapse [&>th]:whitespace-pre-line [&>th]:p-2 [&>td]:whitespace-pre-line [&>td]:p-2"
       {...props}
     >
       {children}
     </tr>
   ),
-  tbody: ({ node, className, children, ...props }) => (
+  tbody: ({ node, className, children, ...props }: any) => (
     <tbody className="w-full [&>*]:border [&>*]:border-solid [&>*]:border-light [&>*]:border-collapse" {...props}>
       {children}
     </tbody>
   ),
-  img: ({ node, className, children, ...props }) => (
+  img: ({ node, className, children, ...props }: any) => (
     // eslint-disable-next-line @next/next/no-img-element
     <img {...props} alt="" className="w-full overflow-hidden rounded-md ring-1 ring-primary/60 shadow-md my-4" />
   )
@@ -141,7 +137,7 @@ export const MarkdowRenderer = ({ markdown }: Params) => {
         fontSize: '1rem'
       }}
     >
-      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} components={markdownComponents}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} components={markdownComponents as any}>
         {markdown ?? ''}
       </ReactMarkdown>
     </div>