Upgrade to Next.js 15 and React 19, replace deprecated @vercel/kv

app/actions/publish.ts

@@ -2,7 +2,7 @@
 
 import { Duration, ms } from '@/lib/duration'
 import { Sandbox } from '@e2b/code-interpreter'
-import { kv } from '@vercel/kv'
+import { getKv } from '@/lib/kv'
 import { customAlphabet } from 'nanoid'
 
 const nanoid = customAlphabet('1234567890abcdef', 7)
@@ -37,7 +37,7 @@ export async function publish(
 
   if (process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN) {
     const id = nanoid()
-    await kv.set(`fragment:${id}`, url, { px: expiration })
+    await getKv().set(`fragment:${id}`, url, { px: expiration })
 
     return {
       url: process.env.NEXT_PUBLIC_SITE_URL

app/providers.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { ThemeProvider as NextThemesProvider } from 'next-themes'
-import { type ThemeProviderProps } from 'next-themes/dist/types'
+import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from 'next-themes'
 import posthog from 'posthog-js'
 import { PostHogProvider as PostHogProviderJS } from 'posthog-js/react'
 

components/auth.tsx

@@ -559,7 +559,7 @@ function Auth({
   magicLink = false,
   onSignUpValidate,
   metadata,
-}: AuthProps): JSX.Element | null {
+}: AuthProps): React.JSX.Element | null {
   const [authView, setAuthView] = useState<ViewType>(view)
   const {
     loading,

lib/kv.ts

@@ -0,0 +1,15 @@
+import { Redis } from '@upstash/redis'
+
+// Replaces the deprecated @vercel/kv client. Reads the same KV_REST_API_URL /
+// KV_REST_API_TOKEN variables, and is only created when both are set.
+let client: Redis | undefined
+
+export function getKv(): Redis {
+  if (!client) {
+    client = new Redis({
+      url: process.env.KV_REST_API_URL!,
+      token: process.env.KV_REST_API_TOKEN!,
+    })
+  }
+  return client
+}

lib/ratelimit.ts

@@ -1,6 +1,6 @@
 import { Duration } from './duration'
 import { Ratelimit } from '@upstash/ratelimit'
-import { kv } from '@vercel/kv'
+import { getKv } from '@/lib/kv'
 
 export default async function ratelimit(
   key: string | null,
@@ -9,7 +9,7 @@ export default async function ratelimit(
 ) {
   if (process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN) {
     const ratelimit = new Ratelimit({
-      redis: kv,
+      redis: getKv(),
       limiter: Ratelimit.slidingWindow(maxRequests, window),
     })
 

middleware.ts

@@ -1,11 +1,11 @@
-import { kv } from '@vercel/kv'
+import { getKv } from '@/lib/kv'
 import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
 
 export async function middleware(req: NextRequest) {
   if (process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN) {
     const id = req.nextUrl.pathname.split('/').pop()
-    const url = await kv.get(`fragment:${id}`)
+    const url = await getKv().get(`fragment:${id}`)
 
     if (url) {
       return NextResponse.redirect(url as string)