Convert from JSX to TSX

app/api/web-vitals/route.ts

@@ -1,20 +1,52 @@
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import fs from "fs";
 import path from "path";
 
 const WEB_VITALS_DIR = path.join(process.cwd(), ".next", "web-vitals");
 
+interface WebVitalData {
+  metric: string;
+  data: {
+    value: number;
+    rating: string;
+  };
+  url: string;
+  userAgent: string;
+  timestamp: string;
+  receivedAt: string;
+}
+
+interface WebVitalMetrics {
+  [metric: string]: {
+    count: number;
+    average: number;
+    min: number;
+    max: number;
+    goodCount: number;
+    needsImprovementCount: number;
+    poorCount: number;
+    lastUpdated: string;
+  };
+}
+
 // Ensure web-vitals directory exists
 if (!fs.existsSync(WEB_VITALS_DIR)) {
   fs.mkdirSync(WEB_VITALS_DIR, { recursive: true });
 }
 
-export async function POST(request) {
+export async function POST(request: NextRequest) {
   try {
-    const { metric, data, url, userAgent, timestamp } = await request.json();
+    const body = await request.json();
+    const { metric, data, url, userAgent, timestamp } = body as {
+      metric: string;
+      data: { value: number; rating: string };
+      url: string;
+      userAgent: string;
+      timestamp: string;
+    };
 
     // Store the metric data
-    const vitalsData = {
+    const vitalsData: WebVitalData = {
       metric,
       data,
       url,
@@ -25,13 +57,15 @@ export async function POST(request) {
 
     // Save to file (in production, you would save to a database)
     const filePath = path.join(WEB_VITALS_DIR, `${metric}.json`);
-    let existingData = [];
+    let existingData: WebVitalData[] = [];
 
     if (fs.existsSync(filePath)) {
       try {
-        existingData = JSON.parse(fs.readFileSync(filePath, "utf8"));
+        const fileContent = fs.readFileSync(filePath, "utf8");
+        existingData = JSON.parse(fileContent) as WebVitalData[];
       } catch (error) {
-        console.warn("Could not parse existing vitals data:", error.message);
+        const err = error as Error;
+        console.warn("Could not parse existing vitals data:", err.message);
       }
     }
 
@@ -61,7 +95,7 @@ export async function POST(request) {
 
 export async function GET() {
   try {
-    const metrics = {};
+    const metrics: WebVitalMetrics = {};
 
     if (fs.existsSync(WEB_VITALS_DIR)) {
       const files = fs.readdirSync(WEB_VITALS_DIR);
@@ -69,9 +103,11 @@ export async function GET() {
       files.forEach((file) => {
         if (file.endsWith(".json")) {
           const metric = file.replace(".json", "");
-          const data = JSON.parse(
-            fs.readFileSync(path.join(WEB_VITALS_DIR, file), "utf8"),
+          const fileContent = fs.readFileSync(
+            path.join(WEB_VITALS_DIR, file),
+            "utf8",
           );
+          const data = JSON.parse(fileContent) as WebVitalData[];
 
           if (data.length > 0) {
             const values = data
@@ -96,7 +132,7 @@ export async function GET() {
                 (r) => r === "needs-improvement",
               ).length,
               poorCount: ratings.filter((r) => r === "poor").length,
-              lastUpdated: data[data.length - 1]?.receivedAt,
+              lastUpdated: data[data.length - 1]?.receivedAt || "",
             };
           }
         }