Fix build issues

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "^15.5.9",
+    "@next/mdx": "^16.1.1",
     "@types/mdx": "^2.0.13",
     "gray-matter": "^4.0.3",
     "next": "16.1.1",

pnpm-lock.yaml

@@ -15,8 +15,8 @@ importers:
         specifier: ^3.1.1
         version: 3.1.1(@types/react@19.2.7)(react@19.2.3)
       '@next/mdx':
-        specifier: ^15.5.9
-        version: 15.5.9(@mdx-js/loader@3.1.1)(@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.3))
+        specifier: ^16.1.1
+        version: 16.1.1(@mdx-js/loader@3.1.1)(@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.3))
       '@types/mdx':
         specifier: ^2.0.13
         version: 2.0.13
@@ -312,8 +312,8 @@ packages:
   '@next/eslint-plugin-next@15.5.3':
     resolution: {integrity: sha512-SdhaKdko6dpsSr0DldkESItVrnPYB1NS2NpShCSX5lc7SSQmLZt5Mug6t2xbiuVWEVDLZSuIAoQyYVBYp0dR5g==}
 
-  '@next/mdx@15.5.9':
-    resolution: {integrity: sha512-qG9GUKUMpnyD5vU+wNGFNsVDxuSdmYDaCEsScPNPIiplzfNSS7VZk1G2yQ2tgXz6KjFncdaqJPuDehFqFy/gjQ==}
+  '@next/mdx@16.1.1':
+    resolution: {integrity: sha512-XvlZ28/K7kXb1vgTeZWHjjfxDx9BVz/s1bbVlsFOvPfYuSVRmlUkhaiyJTA/7mm9OdpeC57+uHR6k1fUcn5AaA==}
     peerDependencies:
       '@mdx-js/loader': '>=0.15.0'
       '@mdx-js/react': '>=0.15.0'
@@ -2441,7 +2441,7 @@ snapshots:
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/mdx@15.5.9(@mdx-js/loader@3.1.1)(@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.3))':
+  '@next/mdx@16.1.1(@mdx-js/loader@3.1.1)(@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.3))':
     dependencies:
       source-map: 0.7.6
     optionalDependencies:

src/app/stories/[slug]/page.tsx

@@ -4,9 +4,9 @@ import { loadStories } from "@/utils/mdxLoader";
 import { formatReadingTime } from "@/utils/readingTime";
 
 interface StoryPageProps {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
 import fs from "fs";
@@ -28,7 +28,8 @@ export async function generateStaticParams() {
 export async function generateMetadata({
   params,
 }: StoryPageProps): Promise<Metadata> {
-  const story = await getStoryBySlug(params.slug);
+  const { slug } = await params;
+  const story = await getStoryBySlug(slug);
 
   if (!story) {
     return {
@@ -42,7 +43,7 @@ export async function generateMetadata({
     openGraph: {
       title: `${story.title} | Mainasara Tsowa`,
       description: story.excerpt,
-      url: `https://mainasara.dev/stories/${params.slug}`,
+      url: `https://mainasara.dev/stories/${slug}`,
     },
     twitter: {
       title: `${story.title} | Mainasara Tsowa`,
@@ -59,7 +60,8 @@ async function getStoryBySlug(slug: string) {
 }
 
 export default async function StoryPage({ params }: StoryPageProps) {
-  const story = await getStoryBySlug(params.slug);
+  const { slug } = await params;
+  const story = await getStoryBySlug(slug);
 
   if (!story) {
     notFound();

src/app/thoughts/[slug]/page.tsx

@@ -4,9 +4,9 @@ import { loadThoughts } from "@/utils/mdxLoader";
 import { formatReadingTime } from "@/utils/readingTime";
 
 interface ThoughtPageProps {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
 import fs from "fs";
@@ -29,7 +29,8 @@ export async function generateStaticParams() {
 export async function generateMetadata({
   params,
 }: ThoughtPageProps): Promise<Metadata> {
-  const thought = await getThoughtBySlug(params.slug);
+  const { slug } = await params;
+  const thought = await getThoughtBySlug(slug);
 
   if (!thought) {
     return {
@@ -43,7 +44,7 @@ export async function generateMetadata({
     openGraph: {
       title: `${thought.title} | Mainasara Tsowa`,
       description: thought.excerpt,
-      url: `https://mainasara.dev/thoughts/${params.slug}`,
+      url: `https://mainasara.dev/thoughts/${slug}`,
     },
     twitter: {
       title: `${thought.title} | Mainasara Tsowa`,
@@ -60,7 +61,8 @@ async function getThoughtBySlug(slug: string) {
 }
 
 export default async function ThoughtPage({ params }: ThoughtPageProps) {
-  const thought = await getThoughtBySlug(params.slug);
+  const { slug } = await params;
+  const thought = await getThoughtBySlug(slug);
 
   if (!thought) {
     notFound();

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }