fix: migrate the codebase from Next.js 14 to Next.js 15

app/(auth)/admin/multi-logs/[slug]/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, use } from "react";
 import { useRouter } from "next/navigation";
 import dynamic from "next/dynamic";
 import { Input } from "@/components/ui/input";
@@ -10,7 +10,8 @@ const MarkdownEditor = dynamic(() => import("@uiw/react-md-editor"), {
   ssr: false
 });
 
-const EditPage = ({ params }: { params: { slug: string } }) => {
+const EditPage = (props: { params: Promise<{ slug: string }> }) => {
+  const params = use(props.params);
   const router = useRouter();
   const { slug } = params;
   const { toast } = useToast();

app/(root)/blog/[slug]/page.tsx

@@ -49,11 +49,10 @@ interface BlogSlugArticle {
 
 export const dynamic = "force-static";
 
-export async function generateMetadata({
-  params
-}: {
-  params: { slug: string };
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
   const data = await getData(params.slug);
 
   if (!data) {
@@ -145,11 +144,10 @@ const customPortableTextComponents: PortableTextComponents = {
   }
 };
 
-export default async function BlogSlugArticle({
-  params
-}: {
-  params: { slug: string };
+export default async function BlogSlugArticle(props: {
+  params: Promise<{ slug: string }>;
 }) {
+  const params = await props.params;
   const data: BlogSlugArticle = await getData(params.slug);
 
   if (!data) {

app/(root)/blog/page/[id]/page.tsx

@@ -38,7 +38,8 @@ export const metadata: Metadata = {
   }
 };
 
-const BlogPage = async ({ params }: { params: { id: string } }) => {
+const BlogPage = async (props: { params: Promise<{ id: string }> }) => {
+  const params = await props.params;
   // Optionally, you can fetch some initial data here if needed.
   let id = parseInt(params.id);
   if (isNaN(id)) id = 1;

app/(root)/changelog/[slug]/layout.tsx

@@ -7,11 +7,10 @@ interface Page {
 }
 
 // baseURL [ENV]
-export async function generateMetadata({
-  params
-}: {
-  params: { slug: "string" };
+export async function generateMetadata(props: {
+  params: Promise<{ slug: "string" }>;
 }) {
+  const params = await props.params;
   let page: Page = {
     title: "unknown mod",
     content: "unknown mod"

app/(root)/changelog/[slug]/page.tsx

@@ -12,7 +12,8 @@ interface Page {
 
 export const dynamic = "force-static";
 
-const Page = async ({ params }: { params: { slug: string } }) => {
+const Page = async (props: { params: Promise<{ slug: string }> }) => {
+  const params = await props.params;
   const { slug } = params;
   let page: Page | null = null;
   let isNotFound = false;

app/(root)/unsubscribe/page.tsx

@@ -1,15 +1,14 @@
 "use client";
 import Newsletter from "@/components/shared/Newsletter";
-import React, { useState } from "react";
+import React, { useState, use } from "react";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/components/ui/use-toast";
 import HCaptcha from "@hcaptcha/react-hcaptcha";
 
-const UnsubscribePage = ({
-  searchParams
-}: {
-  searchParams: { id: string | undefined };
+const UnsubscribePage = (props: {
+  searchParams: Promise<{ id: string | undefined }>;
 }) => {
+  const searchParams = use(props.searchParams);
   const { toast } = useToast();
   const [loading, setLoading] = useState(false);
   const [showCaptcha, setShowCaptcha] = useState(false);

app/api/delete/downloads/[id]/route.ts

@@ -6,8 +6,9 @@ import { revalidatePath } from "next/cache";
 
 export async function DELETE(
   request: Request,
-  { params }: { params: { id: string } }
+  props: { params: Promise<{ id: string }> }
 ) {
+  const params = await props.params;
   const { id } = params;
 
   try {

app/api/delete/logs/[id]/route.ts

@@ -6,8 +6,9 @@ import { revalidatePath } from "next/cache";
 
 export async function DELETE(
   request: Request,
-  { params }: { params: { id: string } }
+  props: { params: Promise<{ id: string }> }
 ) {
+  const params = await props.params;
   const { id } = params;
 
   try {

app/api/delete/mods/[id]/route.ts

@@ -6,8 +6,9 @@ import { revalidatePath } from "next/cache";
 
 export async function DELETE(
   request: Request,
-  { params }: { params: { id: string } }
+  props: { params: Promise<{ id: string }> }
 ) {
+  const params = await props.params;
   const { id } = params;
 
   try {

app/api/delete/vulnerability/[id]/route.ts

@@ -5,8 +5,9 @@ import { revalidatePath } from "next/cache";
 
 export async function DELETE(
   request: Request,
-  { params }: { params: { id: string } }
+  props: { params: Promise<{ id: string }> }
 ) {
+  const params = await props.params;
   const { id } = params;
 
   if (!id) {

app/api/mdx/pages/[slug]/route.ts

@@ -4,8 +4,9 @@ import { revalidatePath } from "next/cache";
 
 export const GET = async (
   req: NextRequest,
-  { params }: { params: { slug: string } }
+  props: { params: Promise<{ slug: string }> }
 ) => {
+  const params = await props.params;
   const client = await clientPromise;
   const db = client.db(process.env.MONGODB_DB);
   const { slug } = params;
@@ -25,8 +26,9 @@ export const GET = async (
 
 export const PUT = async (
   req: NextRequest,
-  { params }: { params: { slug: string } }
+  props: { params: Promise<{ slug: string }> }
 ) => {
+  const params = await props.params;
   const client = await clientPromise;
   const db = client.db(process.env.MONGODB_DB);
   const { slug } = params;
@@ -78,8 +80,9 @@ export const PUT = async (
 
 export const DELETE = async (
   req: NextRequest,
-  { params }: { params: { slug: string } }
+  props: { params: Promise<{ slug: string }> }
 ) => {
+  const params = await props.params;
   const client = await clientPromise;
   const db = client.db(process.env.MONGODB_DB);
   const { slug } = params;

app/api/update/mods/[id]/route.ts

@@ -7,8 +7,9 @@ export const dynamic = "force-dynamic";
 
 export async function PUT(
   request: Request,
-  { params }: { params: { id: string } }
+  props: { params: Promise<{ id: string }> }
 ) {
+  const params = await props.params;
   const { id } = params;
   const body = await request.json();
   const { fileName, version, downloadLink, fileSize } = body;

tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,24 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "lib/Hoc/withAuth.jsx" , "**/*.mdx", "pages/_app.tsx", "hashedpass.s", "app/(root)/contact"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "lib/Hoc/withAuth.jsx",
+    "**/*.mdx",
+    "pages/_app.tsx",
+    "hashedpass.s",
+    "app/(root)/contact"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }