Deploying React Router v7 Apps to Vercel: A Quick Guide
TLDR
React Router v7 apps currently face deployment issues on Vercel due to incomplete framework support. Quick fix: Use the official template:
npx create-react-router@latest --template remix-run/react-router-templates/vercel
The Context
With the recent merger of Remix and React Router, resulting in the release of React Router v7 (November 2024), developers are excited to try out the new framework capabilities. However, those attempting to deploy their applications to Vercel might encounter some unexpected challenges.
The Problem
When deploying a React Router v7 app to Vercel, you might notice that:
- Vercel detects the project as a Vite application
- Using the default Vite deployment presets results in failed deployments
- This is because Vercel hasn’t yet added full support for React Router v7’s new framework features
The Solution
The React Router team has anticipated this issue and provided official templates for various hosting platforms, including Vercel. These templates include the necessary configuration to ensure successful deployment.
To start a new project using the Vercel-compatible template:
npx create-react-router@latest --template remix-run/react-router-templates/vercelFor those interested in other platforms, similar templates are available for Cloudflare and Netlify in the official templates repository.
What’s Next?
The Vercel team has acknowledged this issue and is actively working on adding native support for React Router v7. You can track the progress in these discussions:
Until then, using the official template provides a reliable workaround for deploying your React Router v7 applications to Vercel.