Update to nextjs15

next.config.js

@@ -4,9 +4,10 @@ const path = require('path');
 const nextConfig = {
   reactStrictMode: true,
   transpilePackages: ['lodash'],
-  webpack: (config) => {
-    config.resolve.alias['@'] = path.resolve(__dirname, 'src');
-    return config;
+  turbopack: {
+    resolveAlias: {
+      '@': path.resolve(__dirname, 'src')
+    }
   },
   images: {
     remotePatterns: [

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "node scripts/generate-sitemap-rss.mjs && next dev",
+    "dev": "node scripts/generate-sitemap-rss.mjs && next dev --turbopack",
     "build": "node scripts/generate-sitemap-rss.mjs && next build",
     "start": "next start",
     "lint": "next lint",
@@ -15,12 +15,12 @@
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@giscus/react": "^3.0.0",
-    "@headlessui/react": "^2.1.2",
-    "@next/third-parties": "^14.2.5",
-    "@react-spring/web": "^9.7.4",
-    "@react-three/drei": "^9.115.0",
-    "@react-three/fiber": "^8.17.10",
+    "@giscus/react": "^3.1.0",
+    "@headlessui/react": "^2.2.3",
+    "@next/third-parties": "15.3.2",
+    "@react-spring/web": "^10.0.0",
+    "@react-three/drei": "^10.0.8",
+    "@react-three/fiber": "^9.0.0",
     "@tailwindcss/typography": "^0.5.14",
     "@vercel/speed-insights": "^1.2.0",
     "cookies-next": "^4.3.0",
@@ -38,12 +38,12 @@
     "html2canvas": "^1.4.1",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.416.0",
-    "next": "14.2.21",
+    "next": "15.3.2",
     "node-fetch": "^3.3.2",
     "papaparse": "^5.4.1",
     "pizzip": "^3.1.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "reactflow": "^11.11.4",
     "rehype-highlight": "^7.0.0",
     "rehype-slug": "^6.0.0",
@@ -53,16 +53,18 @@
     "remark-rehype": "^11.1.0",
     "rss": "^1.2.2",
     "three": "^0.169.0",
+    "unist-util-visit": "^5.0.0",
     "web-vitals": "^4.2.2",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "xlsx-js-style": "^1.2.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.12",
     "eslint": "^8.57.0",
-    "eslint-config-next": "14.2.5",
+    "eslint-config-next": "15.3.2",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
@@ -73,5 +75,27 @@
     "singleQuote": false,
     "quoteProps": "preserve",
     "printWidth": 120
+  },
+  "overrides": {
+    "@react-spring/web": {
+      "react": "$react",
+      "react-dom": "$react-dom"
+    },
+    "@headlessui/react": {
+      "react": "$react",
+      "react-dom": "$react-dom"
+    },
+    "@giscus/react": {
+      "react": "$react",
+      "react-dom": "$react-dom"
+    },
+    "@react-three/drei": {
+      "react": "$react",
+      "react-dom": "$react-dom"
+    },
+    "@react-three/fiber": {
+      "react": "$react",
+      "react-dom": "$react-dom"
+    }
   }
-}
+}

src/app/[lang]/algorithms/astar/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.astar.title,
@@ -17,7 +23,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function AstarPage({ params: { lang } }) {
+export default async function AstarPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/astar`} />

src/app/[lang]/algorithms/bfs_path/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.bfs_path.title,
@@ -17,7 +23,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function BFSPathPage({ params: { lang } }) {
+export default async function BFSPathPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/bfs_path`} />

src/app/[lang]/algorithms/binarysearchtree/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.binarysearchtree.title,
@@ -17,7 +23,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function BinarySearchTreePage({ params: { lang } }) {
+export default async function BinarySearchTreePage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/binarysearchtree`} />

src/app/[lang]/algorithms/bloomfilter/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.bloomfilter.title,
@@ -17,7 +23,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function BloomFilterPage({ params: { lang } }) {
+export default async function BloomFilterPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/bloomfilter`} />

src/app/[lang]/algorithms/dijkstra/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function DijkstraPage({ params: { lang } }) {
+export default async function DijkstraPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/dijkstra`} />

src/app/[lang]/algorithms/dpcoin/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function DPCoinPage({ params: { lang } }) {
+export default async function DPCoinPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/dpcoin`} />

src/app/[lang]/algorithms/hanoitower/__tests__/hanoi.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor} from '@/app/test_utils';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import HanoiTower from '../content';
 
@@ -20,12 +21,22 @@ describe('HanoiTower Component', () => {
   });
 
   test('changes number of disks when selected', async () => {
+    const user = userEvent.setup();
     render(<HanoiTower />);
-    fireEvent.click(screen.getByRole('button', { name: '6' }));
-    fireEvent.click(screen.getByRole('option', { name: '4' }));
+    
+    const listboxButton = screen.getByRole('button', { name: '6' });
+    await user.click(listboxButton);
+
+    const option3 = await screen.findByRole('option', { name: '3' }); 
+    expect(option3).toBeVisible();
+
+    const option4 = await screen.findByRole('option', { name: '4' });
+    await user.click(option4);
+
     await waitFor(() => {
       const updatedDisks = screen.getAllByTestId('hanoi-disk');
       expect(updatedDisks.length).toBe(4);
+      expect(screen.getByRole('button', { name: '4' })).toBeInTheDocument();
     });
   });
 
@@ -125,7 +136,6 @@ describe('HanoiTower Component', () => {
       firstTower = screen.getByTestId('tower-0');
       secondTower = screen.getByTestId('tower-1');
 
-      // expect(firstTower.querySelectorAll('[data-testid="hanoi-disk"]')).toHaveLength(5);
       const disksOnSecondTower = secondTower.querySelectorAll('[data-testid="hanoi-disk"]');
       expect(disksOnSecondTower).toHaveLength(1);
     });

src/app/[lang]/algorithms/hanoitower/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.hanoitower.title,
@@ -17,7 +23,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function HanoiTowerPage({ params: { lang } }) {
+export default async function HanoiTowerPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/hanoitower`} />

src/app/[lang]/algorithms/hashring/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.hashring.title,
@@ -17,7 +23,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function HashRingPage({ params: { lang } }) {
+export default async function HashRingPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/hashring`} />

src/app/[lang]/algorithms/hashtable/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.hashtable.title,
@@ -17,7 +23,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function HashTablePage({ params: { lang } }) {
+export default async function HashTablePage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/hashtable`} />

src/app/[lang]/algorithms/heap/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.heap.title,
@@ -17,7 +23,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function HeapPage({ params: { lang } }) {
+export default async function HeapPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/heap`} />

src/app/[lang]/algorithms/jumphash/page.js

@@ -4,7 +4,13 @@ import { PageMeta } from "@/app/components/Meta";
 import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.jumphash.title,
@@ -16,7 +22,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function JumpHashPage({ params: { lang } }) {
+export default async function JumpHashPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/jumphash`} />

src/app/[lang]/algorithms/linkedlist/page.js

@@ -4,7 +4,13 @@ import { PageMeta } from "@/app/components/Meta";
 import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.linkedlist.title,
@@ -16,7 +22,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function LinkedListPage({ params: { lang } }) {
+export default async function LinkedListPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/linkedlist`} />

src/app/[lang]/algorithms/page.js

@@ -3,7 +3,13 @@ import ProjectGrid from "@/app/components/ProjectGrid";
 import { getDictionary } from "@/app/dictionaries";
 import { PageMeta } from "@/app/components/Meta";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
 
   return PageMeta({
@@ -16,7 +22,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default async function Algorithms({ params: { lang } }) {
+export default async function Algorithms(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
 
   return (

src/app/[lang]/algorithms/ratelimit/page.js

@@ -4,7 +4,13 @@ import { PageMeta } from "@/app/components/Meta";
 import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.ratelimit.title,
@@ -16,7 +22,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function RateLimiterPage({ params: { lang } }) {
+export default async function RateLimiterPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/ratelimit/`} />

src/app/[lang]/algorithms/skiplist/page.js

@@ -4,7 +4,13 @@ import { PageMeta } from "@/app/components/Meta";
 import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.skiplist.title,
@@ -16,7 +22,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function StackPage({ params: { lang } }) {
+export default async function StackPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/skiplist`} />

src/app/[lang]/algorithms/stack/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.stack.title,
@@ -17,7 +23,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function StackPage({ params: { lang } }) {
+export default async function StackPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/stack`} />

src/app/[lang]/algorithms/tokenbucket/page.js

@@ -4,7 +4,13 @@ import { PageMeta } from "@/app/components/Meta";
 import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.tokenbucket.title,
@@ -16,7 +22,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function TokenBucketPage({ params: { lang } }) {
+export default async function TokenBucketPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/tokenbucket`} />

src/app/[lang]/algorithms/trie/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.trie.title,
@@ -17,7 +23,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function TriePage({ params: { lang } }) {
+export default async function TriePage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/algorithms/trie`} />

src/app/[lang]/blog/[slug]/page.js

@@ -6,7 +6,14 @@ import TableOfContents from "@/app/components/TableOfContents";
 import CommonComments from "@/app/components/GiscusComments";
 import { SideAdComponent } from "@/app/components/AdComponent";
 
-export default async function BlogPostPage({ params: { lang, slug } }) {
+export default async function BlogPostPage(props) {
+  const params = await props.params;
+
+  const {
+    lang,
+    slug
+  } = params;
+
   const post = await getPostContent(slug, lang);
 
   if (!post) {
@@ -77,7 +84,8 @@ export default async function BlogPostPage({ params: { lang, slug } }) {
   );
 }
 
-export async function generateMetadata({ params }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
   const { lang, slug } = params;
   const post = await getPostContent(slug, lang);
 

src/app/[lang]/blog/page.js

@@ -5,7 +5,13 @@ import { BlogIndex } from "@/app/components/BlogIndex";
 import { getDictionary } from '@/app/dictionaries';
 import { PageMeta } from "@/app/components/Meta";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
 
   return PageMeta({
@@ -44,7 +50,13 @@ async function getPostMetadata(lang) {
   return postsMetadata.filter(Boolean).sort((a, b) => new Date(b.date) - new Date(a.date));
 }
 
-export default async function BlogIndexPage({ params: { lang } }) {
+export default async function BlogIndexPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const posts = await getPostMetadata(lang);
   return <BlogIndex posts={posts} lang={lang} />;
 }

src/app/[lang]/games/2048/page.js

@@ -4,7 +4,13 @@ import { PageMeta } from "@/app/components/Meta";
 import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -25,7 +31,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function Game2048Page({ params: { lang } }) {
+export default async function Game2048Page(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/games/2048`} />

src/app/[lang]/games/chess/page.js

@@ -4,7 +4,13 @@ import { PageMeta } from "@/app/components/Meta";
 import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -25,7 +31,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function ChessPage({ params: { lang } }) {
+export default async function ChessPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/games/chess`} />

src/app/[lang]/games/cube/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from '@/app/components/BlogMarkdown';
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function CubePage({ params: { lang } }) {
+export default async function CubePage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/games/cube`} />

src/app/[lang]/games/gomoku/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from '@/app/components/BlogMarkdown';
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function GomokuPage({ params: { lang } }) {
+export default async function GomokuPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/games/gomoku`} />

src/app/[lang]/games/maze/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function MazePage({ params: { lang } }) {
+export default async function MazePage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/games/maze`} />

src/app/[lang]/games/minesweeper/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function MinesweeperPage({ params: { lang } }) {
+export default async function MinesweeperPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/games/minesweeper`} />

src/app/[lang]/games/page.js

@@ -3,7 +3,13 @@ import ProjectGrid from "@/app/components/ProjectGrid";
 import { getDictionary } from "@/app/dictionaries";
 import { PageMeta } from "@/app/components/Meta";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
 
   return PageMeta({
@@ -16,7 +22,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default async function Games({ params: { lang } }) {
+export default async function Games(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
 
   return (

src/app/[lang]/games/sliding/page.js

@@ -5,7 +5,13 @@ import PageHeader from '@/app/components/PageHeader';
 import CommonComments from '@/app/components/GiscusComments';
 import BlogMarkdown from '@/app/components/BlogMarkdown';
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function SlidingPuzzlePage({ params: { lang } }) {
+export default async function SlidingPuzzlePage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/games/sliding`} />

src/app/[lang]/games/snake/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function SnakePage({ params: { lang } }) {
+export default async function SnakePage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/games/snake`} />

src/app/[lang]/games/sokoban/more/page.js

@@ -43,7 +43,13 @@ function deduplicateAndSortLevels(levels) {
   });
 }
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -64,7 +70,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function SokobanGalleryPage({ params: { lang } }) {
+export default async function SokobanGalleryPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const levels = deduplicateAndSortLevels([...levelsData.levels, ...extraLevelsData]);
   return (
     <>

src/app/[lang]/games/sokoban/page.js

@@ -6,7 +6,13 @@ import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 import levelsData from "./levels.json";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -27,7 +33,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function SokobanPage({ params: { lang } }) {
+export default async function SokobanPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/games/sokoban`} />

src/app/[lang]/games/sudoku/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from '@/app/components/BlogMarkdown';
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function SudokuPage({ params: { lang } }) {
+export default async function SudokuPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/games/sudoku`} />

src/app/[lang]/games/tangram/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from '@/app/components/BlogMarkdown';
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function TetrisPage({ params: { lang } }) {
+export default async function TetrisPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/games/tangram`} />

src/app/[lang]/games/tetris/page.js

@@ -4,7 +4,13 @@ import { PageMeta } from "@/app/components/Meta";
 import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -25,7 +31,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function TetrisPage({ params: { lang } }) {
+export default async function TetrisPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/games/tetris`} />

src/app/[lang]/layout.js

@@ -15,7 +15,18 @@ export function generateStaticParams() {
   return SUPPORTED_LANGUAGES.map(lang => ({ lang }));
 }
 
-export default async function Layout({ children, params: { lang, slug = [] } }) {
+export default async function Layout(props) {
+  const params = await props.params;
+
+  const {
+    lang,
+    slug = []
+  } = params;
+
+  const {
+    children
+  } = props;
+
   const dict = await getDictionary(lang);
   const pathname = `/${lang}/${slug.join('/')}`;
 
@@ -30,15 +41,17 @@ export default async function Layout({ children, params: { lang, slug = [] } })
           title={`RSS Feed for AI Gallery`}
           href={`https://gallery.selfboot.cn/${rssFileName}`}
         />
-        <Script id="check-device-and-load-ads" strategy="beforeInteractive">
+        <Script id="check-device-and-load-ads" strategy="afterInteractive">
           {`
-            if (window.innerWidth >= 768) {
-              const script = document.createElement('script');
-              script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7746897490519544";
-              script.async = true;
-              script.crossOrigin = "anonymous";
-              document.head.appendChild(script);
-            }
+            (function() {
+              if (typeof window !== 'undefined' && window.innerWidth >= 768) {
+                const script = document.createElement('script');
+                script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7746897490519544";
+                script.async = true;
+                script.crossOrigin = "anonymous";
+                document.head.appendChild(script);
+              }
+            })();
           `}
         </Script>
         <Script

src/app/[lang]/page.js

@@ -1,7 +1,13 @@
 import { getDictionary } from "@/app/dictionaries";
 import { PageMeta } from "@/app/components/Meta";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.index.title,
@@ -13,9 +19,16 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default async function Home({ params: { lang } }) {
+export default async function Home(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return (
-    <></> // redriect now
+    // redriect now
+    <></>
   );
 }

src/app/[lang]/tools/awards/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from '@/app/components/BlogMarkdown';
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.gendocx.title,
@@ -17,7 +23,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function GenDocxPage({ params: { lang } }) {
+export default async function GenDocxPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/tools/awards`} />

src/app/[lang]/tools/chartrace/dynamic/[chartId]/page.js

@@ -63,7 +63,14 @@ async function fetchChartData(dataFile, config) {
   }
 }
 
-export async function generateMetadata({ params: { chartId, lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    chartId,
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   const chartConfig = dynamicChartConfigs.find((c) => c.id === chartId);
 
@@ -79,7 +86,8 @@ export async function generateMetadata({ params: { chartId, lang } }) {
   }
 }
 
-export default async function DynamicChartPage({ params }) {
+export default async function DynamicChartPage(props) {
+  const params = await props.params;
   const { chartId, lang } = params;
   const config = dynamicChartConfigs.find((c) => c.id === chartId);
 

src/app/[lang]/tools/chartrace/dynamic/page.js

@@ -2,7 +2,13 @@ import { getDictionary } from "@/app/dictionaries";
 import { PageMeta } from "@/app/components/Meta";
 import DynamicChartsContent from './content';
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
 
   return PageMeta({
@@ -15,7 +21,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default async function DynamicChartsPage({ params: { lang } }) {
+export default async function DynamicChartsPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
 
   return <DynamicChartsContent initialDict={dict} lang={lang} />;

src/app/[lang]/tools/chartrace/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from '@/app/components/BlogMarkdown';
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return PageMeta({
     title: dict.seo.chartrace.title,
@@ -17,7 +23,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default function ChartRacePage({ params: { lang } }) {
+export default async function ChartRacePage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/tools/chartrace`} />

src/app/[lang]/tools/gendocx/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from '@/app/components/BlogMarkdown';
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function GenDocxPage({ params: { lang } }) {
+export default async function GenDocxPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/tools/gendocx`} />

src/app/[lang]/tools/gendocx/temp/[id]/page.js

@@ -6,7 +6,14 @@ import PageHeader from "@/app/components/PageHeader";
 import TemplateDocx from "./content";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang, id } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang,
+    id
+  } = params;
+
   const template = documentTemplates.find((template) => template.id === id);
   if (!template) return notFound();
 
@@ -38,7 +45,14 @@ export async function generateStaticParams() {
   );
 }
 
-export default function TemplatePage({ params: { lang, id } }) {
+export default async function TemplatePage(props) {
+  const params = await props.params;
+
+  const {
+    lang,
+    id
+  } = params;
+
   const template = documentTemplates.find((template) => template.id === id);
   if (!template) return notFound();
 

src/app/[lang]/tools/gendocx/temp/page.js

@@ -3,7 +3,13 @@ import TemplateList from "./content";
 import { PageMeta } from "@/app/components/Meta";
 import PageHeader from "@/app/components/PageHeader";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -24,7 +30,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function TemplatesPage({ params: { lang } }) {
+export default async function TemplatesPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/tools/gendocx/temp`} title="gendocx_templates" />

src/app/[lang]/tools/loanrate/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from '@/app/components/BlogMarkdown';
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function GenDocxPage({ params: { lang } }) {
+export default async function GenDocxPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/tools/loanrate`} />

src/app/[lang]/tools/page.js

@@ -3,7 +3,13 @@ import ProjectGrid from "@/app/components/ProjectGrid";
 import { getDictionary } from "@/app/dictionaries";
 import { PageMeta } from "@/app/components/Meta";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
 
   return PageMeta({
@@ -16,7 +22,13 @@ export async function generateMetadata({ params: { lang } }) {
   });
 }
 
-export default async function Tools({ params: { lang } }) {
+export default async function Tools(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
 
   return (

src/app/[lang]/tools/retire/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from "@/app/components/BlogMarkdown";
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function GenDocxPage({ params: { lang } }) {
+export default async function GenDocxPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/tools/retire`} />

src/app/[lang]/tools/subtitles/page.js

@@ -5,7 +5,13 @@ import PageHeader from "@/app/components/PageHeader";
 import CommonComments from "@/app/components/GiscusComments";
 import BlogMarkdown from '@/app/components/BlogMarkdown';
 
-export async function generateMetadata({ params: { lang } }) {
+export async function generateMetadata(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   const dict = await getDictionary(lang);
   return {
     ...PageMeta({
@@ -26,7 +32,13 @@ export async function generateMetadata({ params: { lang } }) {
   };
 }
 
-export default function SubtitlesPage({ params: { lang } }) {
+export default async function SubtitlesPage(props) {
+  const params = await props.params;
+
+  const {
+    lang
+  } = params;
+
   return (
     <>
       <PageHeader lang={lang} pathname={`/${lang}/tools/subtitles`} />

src/app/globals.css

@@ -1,8 +1,8 @@
+@import 'github-markdown-css/github-markdown-light.css';
+@import 'highlight.js/styles/github.css';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import 'github-markdown-css/github-markdown-light.css';
-@import 'highlight.js/styles/github.css';
 
 @layer base {
     :where(.markdown-body) {