Sanity preview API returns 404 on Vercel but works locally

This is a classic Next.js deployment issue that catches a lot of people! The problem is almost certainly that you're using next export (static export) in your build configuration, which disables all API routes including /api/preview.js.

When you run next export, Next.js generates a completely static site with no server-side functionality. API routes require a Node.js server to run, so they simply won't exist in the exported build. This works on localhost because next dev always runs a server, but fails on Vercel when you're doing a static export.

To fix this:

1. Remove next export from your build process. Check your package.json build script and make sure it's just next build, not next build && next export

2. Don't set output: 'export' in your next.config.js - this does the same thing as next export

3. Deploy as a hybrid Next.js app on Vercel (the default). Vercel fully supports Next.js API routes out of the box when you're not forcing a static export

Your CORS settings are fine - that's not the issue here. The API route literally doesn't exist in your deployed build because static exports strip them out, as mentioned in the Next.js documentation on static exports.

Modern alternative: If you're using preview mode for Sanity content, consider using Draft Mode (the newer Next.js 13+ approach) or Sanity's Live Content API which provides real-time previews without requiring API routes at all. The Live Content API works with static sites and integrates directly with Next.js through framework loaders.

But for your immediate issue: check your Vercel build output and configuration for anything related to static export and remove it. Your API routes will work once Next.js is deployed as a proper hybrid app rather than a static export.