feat(site/blog): update to nextjs v15

site/blog/.gitignore

@@ -3,8 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
-.yarn/install-state.gz
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -24,9 +28,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
-# local env files
-.env*.local
+# env files (can opt-in for committing if needed)
+.env*
 
 # vercel
 .vercel

site/blog/app/(web)/code-snippets/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { Metadata, ResolvingMetadata } from "next";
+import { Metadata /** ResolvingMetadata */ } from "next";
 import Link from "next/link";
 
 // import { remark } from "remark";
@@ -21,12 +21,13 @@ import MDXContent from "./MDXContent";
 import "./styles.scss";
 
 type Props = {
-  params: { slug: string };
-  searchParams: { [key: string]: string | string[] | undefined };
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 };
 
 async function fetchCodeSnippet(params: Props["params"]) {
-  const post = getCodeSnippet(params.slug);
+  const slug = (await params).slug;
+  const post = getCodeSnippet(slug);
   // const markdown = await remark()
   //   .use(remarkToc, { maxDepth: 4 })
   //   .use(remarkGfm)
@@ -38,7 +39,7 @@ async function fetchCodeSnippet(params: Props["params"]) {
   //   .process(post.content || "");
 
   const posts = getAllCodeSnippets();
-  const idx = posts.findIndex((c) => c.slug === params.slug);
+  const idx = posts.findIndex((c) => c.slug === slug);
 
   const next = posts[idx + 1];
   const prev = posts[idx - 1];
@@ -60,10 +61,10 @@ export async function generateStaticParams() {
 }
 
 export async function generateMetadata(
-  { params, searchParams }: Props,
-  parent: ResolvingMetadata
+  props: Props
+  // parent: ResolvingMetadata
 ): Promise<Metadata> {
-  const { post } = await fetchCodeSnippet(params);
+  const { post } = await fetchCodeSnippet(props.params);
   return seo({
     title: post?.meta?.title || "",
     description: post?.meta?.description || post?.excerpt || "",
@@ -97,7 +98,7 @@ export default async ({ params }: Props) => {
           <time className="inline-flex items-center ml-2">
             <span className="i-heroicons:clock mr-1 w-4 h-4 text-brand" />
             阅读
-            {Math.ceil(post.meta?.readingTime?.minutes!)}
+            {Math.ceil(post.meta?.readingTime?.minutes ?? 0)}
             分钟
           </time>
         </div>

site/blog/app/(web)/lib/utils.ts

@@ -11,7 +11,7 @@ export function getGitLastUpdatedTimeStamp(filePath: string) {
     ).stdout.toString("utf-8");
 
     lastUpdated = timestamp ? new Date(parseInt(timestamp) * 1000) : new Date();
-  } catch (e) {
+  } catch {
     /* do not handle for now */
   }
   return lastUpdated;

site/blog/app/(web)/posts/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { Metadata, ResolvingMetadata } from "next";
+import { Metadata /* ResolvingMetadata */ } from "next";
 import Link from "next/link";
 
 // import { remark } from "remark";
@@ -21,12 +21,13 @@ import MDXContent from "./MDXContent";
 import "./styles.scss";
 
 type Props = {
-  params: { slug: string };
-  searchParams: { [key: string]: string | string[] | undefined };
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 };
 
 async function fetchPost(params: Props["params"]) {
-  const post = getPost(params.slug);
+  const slug = (await params).slug;
+  const post = getPost(slug);
   // const markdown = await remark()
   //   .use(remarkToc, { maxDepth: 4 })
   //   .use(remarkGfm)
@@ -38,7 +39,7 @@ async function fetchPost(params: Props["params"]) {
   //   .process(post.content || "");
 
   const posts = getAllPosts();
-  const idx = posts.findIndex((c) => c.slug === params.slug);
+  const idx = posts.findIndex((c) => c.slug === slug);
 
   const next = posts[idx + 1];
   const prev = posts[idx - 1];
@@ -60,18 +61,18 @@ export async function generateStaticParams() {
 }
 
 export async function generateMetadata(
-  { params, searchParams }: Props,
-  parent: ResolvingMetadata
+  props: Props
+  // parent: ResolvingMetadata
 ): Promise<Metadata> {
-  const { post } = await fetchPost(params);
+  const { post } = await fetchPost(props.params);
   return seo({
     title: post?.meta?.title || "",
     description: post?.meta?.description || post?.excerpt || "",
   });
 }
 
-export default async ({ params }: Props) => {
-  const { post, prev, next } = await fetchPost(params);
+export default async (props: Props) => {
+  const { post, prev, next } = await fetchPost(props.params);
 
   // const message = await new Promise<string>((resolve) => {
   //   console.log("in executing sleep!");
@@ -97,7 +98,7 @@ export default async ({ params }: Props) => {
           <time className="inline-flex items-center ml-2">
             <span className="i-heroicons:clock mr-1 w-4 h-4 text-brand" />
             阅读
-            {Math.ceil(post.meta?.readingTime?.minutes!)}
+            {Math.ceil(post.meta?.readingTime?.minutes ?? 0)}
             分钟
           </time>
         </div>

site/blog/app/(web)/projects/components/PicGallery.tsx

@@ -14,17 +14,16 @@ type PicGalleryProps = {
 
 export default function PicGallery({ id, images }: PicGalleryProps) {
   useEffect(() => {
-    let lightbox = new PhotoSwipeLightbox({
+    let lightbox: PhotoSwipeLightbox | null = new PhotoSwipeLightbox({
       gallery: "#" + id,
       children: "a",
       pswpModule: () => import("photoswipe"),
     });
     lightbox.init();
 
     return () => {
-      lightbox.destroy();
+      lightbox?.destroy();
 
-      // @ts-ignore
       lightbox = null;
     };
   }, [id]);

site/blog/app/(web)/projects/kupo-monitor/page.tsx

@@ -1,6 +1,5 @@
 import Footer from "@/app/(web)/components/Footer";
 import seo from "@/utils/seo";
-import Image from "next/image";
 
 import PicGallery from "../components/PicGallery";
 

site/blog/app/(web)/projects/luban/page.tsx

@@ -1,6 +1,5 @@
 import Footer from "@/app/(web)/components/Footer";
 import seo from "@/utils/seo";
-import Image from "next/image";
 
 import PicGallery from "../components/PicGallery";
 

site/blog/eslint.config.mjs

@@ -0,0 +1,23 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    rules: {
+      "import/no-anonymous-default-export": "off",
+      "react/display-name": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  },
+];
+
+export default eslintConfig;

site/blog/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

site/blog/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

site/blog/package.json

@@ -15,14 +15,14 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "gray-matter": "^4.0.3",
-    "next": "15.1.3",
+    "next": "^15.1.3",
     "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.4.4",
     "nextjs-toploader": "^3.7.15",
     "photoswipe": "^5.4.4",
     "plyr": "^3.7.8",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-use": "^17.6.0",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
@@ -43,9 +43,9 @@
     "@types/react-dom": "19.0.2",
     "@unocss/postcss": "^0.65.3",
     "@vercel/analytics": "^1.4.1",
-    "autoprefixer": "10.4.20",
-    "eslint": "9.17.0",
-    "eslint-config-next": "15.1.3",
+    "eslint": "^9.17.0",
+    "eslint-config-next": "^15.1.3",
+    "@eslint/eslintrc": "^3.2.0",
     "postcss": "8.4.49",
     "sass": "^1.83.1",
     "typescript": "5.7.2",