Sanity Studio 404 error on hard refresh with Netlify deployment

This is a classic routing issue when embedding Sanity Studio in a Next.js app on Netlify. The problem is that Netlify needs to know how to handle the Studio's client-side routing, especially for routes like /studio/desk.

The issue you're experiencing is that your current _redirects and netlify.toml configurations aren't quite right for an embedded Studio setup. Based on a similar issue that was resolved, here's what you need to do:

If you're using the catch-all route pattern (like app/studio/[[...index]]/page.tsx or pages/studio/[[...index]].tsx), you need to ensure Netlify redirects all /studio/* paths to the Studio's index file.

Try updating your netlify.toml to:

[[redirects]]
  from = "/studio/*"
  to = "/studio"
  status = 200

Or if you prefer using _redirects file in your Next.js project root:

/studio/*  /studio  200

The key difference from what you have is that you need to redirect /studio/* specifically to /studio (not to /), and you should remove the generic catch-all redirect that's routing everything to /index.html.

If you have a vercel.json file in your project (even though you're deploying to Netlify), it might be interfering. Make sure it's not there, or if you need it for Vercel previews, ensure it has the correct configuration:

{
  "rewrites": [
    { "source": "/studio/(.*)", "destination": "/studio/index.html" }
  ]
}

The problem occurs because when you hard refresh at /studio/desk, Netlify tries to find that exact file path on the server, which doesn't exist. The redirect tells Netlify to serve the Studio's index file for all Studio routes, allowing the client-side routing to take over and handle the /desk route properly.

After making these changes, redeploy your site to Netlify and the 404 errors on refresh should be resolved!