Upgrade to next 15

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"]
+  "extends": ["next/core-web-vitals", "prettier"],
+  "plugins": ["eslint-plugin-react-compiler"],
+  "rules": {
+    "react-compiler/react-compiler": "warn"
+  }
 }

app/(markdown)/[id]/page.tsx

@@ -2,21 +2,27 @@ import type { Metadata } from "next";
 import { getReactElementFromMarkdown } from "lib/markdown";
 import { getSectionById } from "lib/section";
 
-export async function generateMetadata({
-  params: { id },
-}: {
-  params: { id: string };
+export async function generateMetadata(props: {
+  params: Promise<{ id: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
+
+  const { id } = params;
+
   const post = await getSectionById(id);
 
   return {
     title: post.title,
   };
 }
 
-const OtherPage: React.FC<{ params: { id: string } }> = async ({
-  params: { id },
-}) => {
+const OtherPage: React.FC<{ params: Promise<{ id: string }> }> = async (
+  props,
+) => {
+  const params = await props.params;
+
+  const { id } = params;
+
   const post = await getSectionById(id);
   const element = await getReactElementFromMarkdown(post.content);
 

app/(markdown)/posts/[id]/page.tsx

@@ -3,11 +3,13 @@ import Date from "components/Date";
 import { getReactElementFromMarkdown } from "lib/markdown";
 import { getPostById, getPostIds } from "lib/post";
 
-export async function generateMetadata({
-  params: { id },
-}: {
-  params: { id: string };
+export async function generateMetadata(props: {
+  params: Promise<{ id: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
+
+  const { id } = params;
+
   const post = await getPostById(id);
 
   return {
@@ -16,9 +18,13 @@ export async function generateMetadata({
   };
 }
 
-const PostPage: React.FC<{ params: { id: string } }> = async ({
-  params: { id },
-}) => {
+const PostPage: React.FC<{ params: Promise<{ id: string }> }> = async (
+  props,
+) => {
+  const params = await props.params;
+
+  const { id } = params;
+
   const post = await getPostById(id);
   const element = await getReactElementFromMarkdown(post.content);
 

next.config.mjs

@@ -2,6 +2,9 @@
 const nextConfig = {
   output: "standalone",
   compress: false,
+  experimental: {
+    reactCompiler: true,
+  },
 };
 
 export default nextConfig;

package.json

@@ -2,44 +2,46 @@
   "name": "blog",
   "version": "1.0.0",
   "private": true,
-  "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1",
+  "packageManager": "pnpm@9.12.2+sha512.22721b3a11f81661ae1ec68ce1a7b879425a1ca5b991c975b074ac220b187ce56c708fe5db69f4c962c989452eee76c82877f4ee80f474cebd61ee13461b6228",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@primer/css": "21.3.6",
+    "@primer/css": "21.4.0",
     "@types/fs-extra": "11.0.4",
-    "@types/node": "22.5.1",
-    "@types/react": "18.3.4",
-    "@types/react-dom": "18.3.0",
+    "@types/node": "22.7.6",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
     "autoprefixer": "10.4.20",
+    "babel-plugin-react-compiler": "0.0.0-experimental-fa06e2c-20241016",
     "dayjs": "1.11.13",
-    "eslint": "8.57.0",
-    "eslint-config-next": "14.2.7",
+    "eslint": "9.12.0",
+    "eslint-config-next": "15.0.0-canary.196",
     "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-fa06e2c-20241016",
     "fs-extra": "11.2.0",
     "gray-matter": "4.0.3",
     "highlight.js": "11.10.0",
     "is-absolute-url": "4.0.1",
     "lowlight": "3.1.0",
-    "next": "14.2.7",
-    "postcss": "8.4.41",
+    "next": "15.0.0-canary.196",
+    "postcss": "8.4.47",
     "prettier": "3.3.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0-rc-cd22717c-20241013",
+    "react-dom": "19.0.0-rc-cd22717c-20241013",
     "rehype-highlight": "7.0.0",
     "rehype-img-size": "1.0.1",
     "rehype-react": "8.0.0",
     "rehype-slug": "6.0.0",
     "remark-breaks": "4.0.0",
     "remark-parse": "11.0.0",
-    "remark-rehype": "11.1.0",
+    "remark-rehype": "11.1.1",
     "sharp": "0.33.5",
-    "tailwindcss": "3.4.10",
-    "typescript": "5.5.4",
+    "tailwindcss": "3.4.14",
+    "typescript": "5.6.3",
     "unified": "11.0.5"
   }
 }