Fixes to align with Next 15 changes

Author: oBusk

src/app/[...parts]/page.tsx

@@ -1,4 +1,6 @@
+import { type Metadata } from "next";
 import { redirect } from "next/navigation";
+import { type JSX } from "react";
 import { type ViewType } from "react-diff-view";
 import { createSimplePackageSpec } from "^/lib/createSimplePackageSpec";
 import { DEFAULT_DIFF_FILES_GLOB } from "^/lib/default-diff-files";
@@ -15,11 +17,14 @@ import PackagephobiaDiff from "./_page/PackagephobiaDiff";
 import { type DIFF_TYPE_PARAM_NAME } from "./_page/paramNames";
 
 export interface DiffPageProps {
-    params: { parts: string | string[] };
-    searchParams: QueryParams & { [DIFF_TYPE_PARAM_NAME]: ViewType };
+    params: Promise<{ parts: string | string[] }>;
+    searchParams: Promise<QueryParams & { [DIFF_TYPE_PARAM_NAME]: ViewType }>;
 }
 
-export function generateMetadata({ params: { parts } }: DiffPageProps) {
+export async function generateMetadata({
+    params,
+}: DiffPageProps): Promise<Metadata> {
+    const { parts } = await params;
     const specs = splitParts(decodeParts(parts));
 
     const [a, b] = specs.map((spec) => createSimplePackageSpec(spec));
@@ -31,18 +36,19 @@ export function generateMetadata({ params: { parts } }: DiffPageProps) {
 }
 
 const DiffPage = async ({
-    params: { parts },
+    params,
     searchParams,
 }: DiffPageProps): Promise<JSX.Element> => {
-    const { diffFiles, ...optionsQuery } = searchParams;
+    const { parts } = await params;
+    const { diffFiles, ...optionsQuery } = await searchParams;
 
     const specsOrVersions = splitParts(decodeParts(parts));
     const { redirect: redirectTarget, canonicalSpecs } =
         await destination(specsOrVersions);
 
     if (redirectTarget !== false) {
         const specsStr = specsToDiff(canonicalSpecs);
-        const searchStr = Object.entries(searchParams)
+        const searchStr = Object.entries(await searchParams)
             .map(([key, value]) => `${key}=${value}`)
             .join("&");
 

src/app/api/[...parts]/route.ts

@@ -11,10 +11,12 @@ enum STATUS_CODES {
     PERMANENT_REDIRECT = 308,
 }
 
-export async function GET(
-    req: NextRequest,
-    { params: { parts } }: { params: { parts: string[] } },
-) {
+export interface DiffApiContext {
+    params: Promise<{ parts: string | string[] }>;
+}
+
+export async function GET(req: NextRequest, { params }: DiffApiContext) {
+    const { parts } = await params;
     const { searchParams } = new URL(req.url);
     const options = Object.fromEntries(searchParams);
 

src/app/layout.tsx

@@ -7,7 +7,7 @@ import Footer from "./_layout/Footer";
 import Header from "./_layout/Header";
 import "./globals.css";
 
-export const metadata = {
+export const metadata: Metadata = {
     applicationName: "npm-diff.app",
     title: {
         default: "npm-diff.app 📦🔃",
@@ -20,7 +20,7 @@ export const metadata = {
         address: false,
         telephone: false,
     },
-} satisfies Metadata;
+};
 
 export const viewport = {
     themeColor: "#3f444e",

src/lib/suspense.tsx

@@ -13,12 +13,15 @@ export default function suspense<T>(
     WrappedComponent: ComponentType<T>,
     fallback: FunctionComponent<T> | ReactNode = <></>,
 ): FunctionComponent<T & { key: string }> {
-    const C = ({ key, ...props }: T & { key: string }): ReactElement => (
+    const C = async ({
+        key,
+        ...props
+    }: T & { key: string }): Promise<ReactElement> => (
         <SuspenseComp
             key={key}
             fallback={
                 typeof fallback === "function"
-                    ? fallback(props as any)
+                    ? await fallback(props as any)
                     : fallback
             }
         >

src/lib/utils/useThrottle.ts

@@ -6,7 +6,7 @@ import { useUnmount } from "react-use";
 // Once this issue is closed, we should be able to remove this file
 const useThrottle = <T>(value: T, ms: number = 200) => {
     const [state, setState] = useState<T>(value);
-    const timeout = useRef<ReturnType<typeof setTimeout>>();
+    const timeout = useRef<ReturnType<typeof setTimeout>>(undefined);
     const nextValue = useRef(null) as any;
     const hasNextValue = useRef(0) as any;