Upgrade project to Next.js 15

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/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -3,41 +3,45 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@mdx-js/loader": "^2.3.0",
-    "@next/mdx": "^13.4.19",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-toast": "^1.1.4",
+    "@next/mdx": "15.3.4",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-toast": "^1.2.14",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "airtable": "^0.12.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "lucide-react": "^0.277.0",
-    "next": "^13.4.19",
+    "lucide-react": "^0.525.0",
+    "next": "15.3.4",
     "nodemailer": "^6.9.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "rehype-slug": "^6.0.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
     "yup": "^1.2.0"
   },
   "devDependencies": {
+    "@next/codemod": "15.3.4",
     "@types/mdx": "^2.0.7",
     "@types/node": "^20.6.0",
     "@types/nodemailer": "^6.4.10",
-    "@types/react": "^18.2.21",
+    "@types/react": "19.1.8",
     "autoprefixer": "^10.4.15",
     "eslint": "8.49.0",
-    "eslint-config-next": "13.4.19",
+    "eslint-config-next": "15.3.4",
     "postcss": "^8.4.29",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2"
+  },
+  "overrides": {
+    "@types/react": "19.1.8"
   }
 }

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

@@ -4,7 +4,8 @@ import StructuredData from "components/structured-data";
 import BlogCTA from "components/cta-footer";
 import { getPostData } from "./getPostData";
 
-export const generateMetadata = async ({ params }: { params: { slug: string } }) => {
+export const generateMetadata = async (props: { params: Promise<{ slug: string }> }) => {
+  const params = await props.params;
   try {
     const { metadata } = await getPostData(params);
 
@@ -25,13 +26,14 @@ export const generateMetadata = async ({ params }: { params: { slug: string } })
   }
 };
 
-export default async function ArticlePage({
-  params,
-}: {
-  params: {
-    slug: string;
-  };
-}) {
+export default async function ArticlePage(
+  props: {
+    params: Promise<{
+      slug: string;
+    }>;
+  }
+) {
+  const params = await props.params;
   try {
     const { Content, metadata } = await getPostData(params);
 

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

@@ -15,9 +15,10 @@ import CtaButtons from "components/cta-buttons";
 
 const ailmentsSortOrder = { common: 1, uncommon: 2, experimental: 3 };
 
-type Params = { params: { medication: string } };
+type Params = { params: Promise<{ medication: string }> };
 
-export async function generateMetadata({ params }: Params) {
+export async function generateMetadata(props: Params) {
+  const params = await props.params;
   const { title, description } = procedures.find((med) => med.slug === params.medication)?.seo ?? {
     title: "Procedure",
     description: "",
@@ -29,7 +30,13 @@ export async function generateMetadata({ params }: Params) {
   };
 }
 
-export default async function ProcedurePage({ params: { slug } }: { params: { slug: string } }) {
+export default async function ProcedurePage(props: { params: Promise<{ slug: string }> }) {
+  const params = await props.params;
+
+  const {
+    slug
+  } = params;
+
   const procedure = procedures.find((procedure) => procedure.slug === slug);
 
   const articles = (await Promise.all(slugs?.map((slug) => import(`markdown/${slug}.mdx`))))

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

@@ -12,7 +12,13 @@ import CtaFooter from "components/cta-footer";
 import StructuredData from "components/structured-data";
 import CtaButtons from "components/cta-buttons";
 
-export default async function ProcedurePage({ params: { slug } }: { params: { slug: string } }) {
+export default async function ProcedurePage(props: { params: Promise<{ slug: string }> }) {
+  const params = await props.params;
+
+  const {
+    slug
+  } = params;
+
   const product = products.find((product) => product.slug === slug);
 
   const articles = (await Promise.all(slugs?.map((slug) => import(`markdown/${slug}.mdx`))))

src/components/structured-data.tsx

@@ -1,4 +1,5 @@
 import Script from "next/script";
+import type { JSX } from "react";
 
 const SITE_NAME = "Ubuntu Med Spa";
 const DEFAULT_DESCRIPTION = "";

src/lib/createOpenGraphImage.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from "next/server";
+import { ImageResponse } from "next/og";
 import { classNames } from "lib/tailwind";
 import { DEFAULT_DESCRIPTION, DEFAULT_TITLE, ORIGIN } from "lib/seo";
 

src/lib/createTwitterImage.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from "next/server";
+import { ImageResponse } from "next/og";
 import { classNames } from "lib/tailwind";
 import { DEFAULT_DESCRIPTION, DEFAULT_TITLE, ORIGIN } from "lib/seo";
 import Image from "next/image";

src/mdx-components.tsx

@@ -1,4 +1,5 @@
 import type { MDXComponents } from "mdx/types";
+import type { JSX } from "react";
 
 export function Anchor(properties: JSX.IntrinsicElements["a"]) {
   return (