⬆️ Upgrade to Next.js v16

next.config.mjs

@@ -1,10 +1,4 @@
 import createMDX from "@next/mdx";
-import rehypeSlug from "rehype-slug";
-import remarkEmoji from "remark-emoji";
-import remarkPrism from "remark-prism";
-import rehypeToc from "@jsdevtools/rehype-toc";
-import remarkFrontmatter from "remark-frontmatter";
-import rehypeAutolinkHeadings from "rehype-autolink-headings";
 
 /** @type {import("next").NextConfig} */
 const nextConfig = {
@@ -23,20 +17,8 @@ const nextConfig = {
 
 const withMDX = createMDX({
   options: {
-    remarkPlugins: [remarkFrontmatter, remarkEmoji, remarkPrism],
-    rehypePlugins: [
-      rehypeSlug,
-      rehypeAutolinkHeadings,
-      [
-        rehypeToc,
-        {
-          customizeTOC: tableOfContents => {
-            // quick and dirty solution to not display the ToC in the about page
-            return tableOfContents.children?.[0]?.children?.[0]?.data?.hookArgs?.[0]?.properties?.id !== "about-me";
-          },
-        },
-      ],
-    ],
+    remarkPlugins: ["remark-frontmatter", "remark-emoji", "remark-prism"],
+    rehypePlugins: ["rehype-slug", "rehype-autolink-headings", ["@jsdevtools/rehype-toc"]],
   },
 });
 

package.json

@@ -21,15 +21,15 @@
     "@vercel/analytics": "1.6.1",
     "chalk": "5.6.2",
     "clsx": "2.1.1",
-    "next": "15.5.9",
+    "next": "16.0.10",
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },
   "devDependencies": {
     "@jsdevtools/rehype-toc": "3.0.2",
     "@mdx-js/loader": "3.1.1",
     "@mdx-js/react": "3.1.1",
-    "@next/mdx": "15.5.9",
+    "@next/mdx": "16.0.10",
     "@octokit/rest": "22.0.1",
     "@tailwindcss/postcss": "4.1.18",
     "@types/jest": "30.0.0",
@@ -41,7 +41,7 @@
     "cross-env": "10.1.0",
     "debug": "4.4.3",
     "eslint": "9.39.2",
-    "eslint-config-next": "15.5.9",
+    "eslint-config-next": "16.0.10",
     "eslint-config-prettier": "10.1.8",
     "gray-matter": "4.0.3",
     "jest": "30.2.0",

src/pages/_app.tsx

@@ -25,6 +25,7 @@ const CustomApp = ({ Component, pageProps, router }: AppProps) => {
           className={clsx(
             "grow overflow-auto px-2 pt-2 md:px-0",
             category === "about" || (category === "blog" && !inPostsList) ? "blog-post-container" : "",
+            category === "about" ? "hide-toc" : "",
           )}
         >
           <Component {...pageProps} />

src/styles/globals.css

@@ -173,4 +173,10 @@
   #root {
     @apply font-sans text-white antialiased;
   }
+
+  .hide-toc {
+    .toc {
+      @apply hidden;
+    }
+  }
 }

tsconfig.json

@@ -17,7 +17,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -35,7 +35,8 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"