Why does /studio/desk give 404 on refresh but /studio redirects correctly?

This is a common issue when hosting Sanity Studio as a single-page application (SPA) under a subpath like /studio. The problem is related to how your web server handles direct requests to nested Studio routes.

Why This Happens

When you navigate to /studio and then click through to /studio/desk, the Studio's client-side router handles the navigation smoothly. However, when you refresh the page at /studio/desk, your web server receives a direct HTTP request for that path. Since Sanity Studio is a SPA, all routes under /studio/* need to be served by the same index.html file so the client-side router can take over. Without proper server configuration, the server looks for a file at /studio/desk, doesn't find one, and returns a 404.

The Solution

You need to configure your hosting platform to treat all requests under /studio/* as SPA routes. The exact configuration depends on your hosting platform:

For Vercel, create or update vercel.json in your project root:

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

For Netlify, add to your netlify.toml or _redirects file:

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

For Apache, use .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^studio/index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^studio/ /studio/index.html [L]
</IfModule>

For Nginx:

location /studio {
  try_files $uri $uri/ /studio/index.html;
}

Important Configuration Note

If you're embedding Studio at a subpath like /studio, make sure your Studio CLI configuration is properly set up. In modern Sanity Studio (v3+), you configure the base path in sanity.cli.js or sanity.cli.ts:

export default {
  api: {
    projectId: 'your-project-id',
    dataset: 'production'
  },
  basePath: '/studio'
}

This tells the Sanity CLI where to build and serve the files during development and ensures the correct paths are used in production when you run sanity build.

What to Avoid

Don't use a catch-all rewrite that redirects all routes to a single index file, as this will break any other routes in your application (like your Next.js pages, API routes, or static assets).

The key is ensuring that only requests under /studio/* are rewritten to the Studio's entry point, allowing the rest of your application to function normally.