refactor: move /incident-status to app router

Move /incident-status handler to App Router. Allows us to use Vercel
Data Cache to cache the upstream fetch.

Author: charislam

apps/studio/pages/api/incident-status.ts …/studio/app/api/incident-status/route.tsapps/studio/pages/api/incident-status.ts renamed to apps/studio/app/api/incident-status/route.ts apps/studio/pages/api/incident-status.ts renamed to apps/studio/app/api/incident-status/route.ts

@@ -1,5 +1,5 @@
 import { IS_PLATFORM } from 'common'
-import { NextApiRequest, NextApiResponse } from 'next'
+import { NextResponse } from 'next/server'
 
 import { InternalServerError } from '@/lib/api/apiHelpers'
 import { getActiveIncidents, type IncidentCache } from '@/lib/api/incident-status'
@@ -42,22 +42,26 @@ async function fetchIncidentCache(incidentIds: Array<string>): Promise<Map<strin
   return cacheMap
 }
 
-async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (!IS_PLATFORM) {
-    return res.status(404).end()
-  }
+export async function OPTIONS() {
+  if (!IS_PLATFORM) return new Response(null, { status: 404 })
+  return new Response(null, {
+    status: 204,
+    headers: {
+      Allow: 'GET, HEAD, OPTIONS',
+    },
+  })
+}
 
-  const { method } = req
+export async function HEAD() {
+  if (!IS_PLATFORM) return new Response(null, { status: 404 })
+  return new Response(null, {
+    status: 200,
+    headers: { 'Cache-Control': CACHE_CONTROL_SETTINGS },
+  })
+}
 
-  if (method === 'HEAD') {
-    res.setHeader('Cache-Control', CACHE_CONTROL_SETTINGS)
-    return res.status(200).end()
-  }
-
-  if (method !== 'GET') {
-    res.setHeader('Allow', ['GET', 'HEAD'])
-    return res.status(405).json({ error: `Method ${method} Not Allowed` })
-  }
+export async function GET() {
+  if (!IS_PLATFORM) return new Response(null, { status: 404 })
 
   try {
     const allIncidents = await getActiveIncidents()
@@ -75,17 +79,18 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
       cache: cacheMap.get(incident.id) ?? null,
     }))
 
-    res.setHeader('Cache-Control', CACHE_CONTROL_SETTINGS)
-
-    return res.status(200).json(enrichedIncidents)
+    return NextResponse.json(enrichedIncidents, {
+      headers: { 'Cache-Control': CACHE_CONTROL_SETTINGS },
+    })
   } catch (error) {
     let errorCode = 500
+    const headers = new Headers()
 
     if (error instanceof InternalServerError) {
       if (typeof error.details?.status === 'number') errorCode = error.details.status
       if (errorCode === 420) errorCode = 429
       if (errorCode === 429 && typeof error.details?.retryAfter === 'string') {
-        res.setHeader('Retry-After', error.details.retryAfter)
+        headers.set('Retry-After', error.details.retryAfter)
       }
       console.error('Failed to fetch active StatusPage incidents: %O', {
         message: error.message,
@@ -95,8 +100,9 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
       console.error('Unexpected error fetching active StatusPage incidents: %O', error)
     }
 
-    return res.status(errorCode).json({ error: 'Unable to fetch incidents at this time' })
+    return NextResponse.json(
+      { error: 'Unable to fetch incidents at this time' },
+      { status: errorCode, headers }
+    )
   }
 }
-
-export default handler

apps/studio/lib/api/incident-status.ts

@@ -1,7 +1,6 @@
-import z from 'zod'
-
 import { IS_PLATFORM } from 'common'
 import { InternalServerError } from 'lib/api/apiHelpers'
+import z from 'zod'
 
 export type IncidentCache = {
   affected_regions: Array<string> | null
@@ -81,7 +80,7 @@ export async function getActiveIncidents(): Promise<IncidentInfo[]> {
       Accept: 'application/json',
       'Content-Type': 'application/json',
     },
-    cache: 'no-store',
+    next: { revalidate: 180 },
     signal: AbortSignal.timeout(30_000),
   })
   const responseText = await response.text()