Using Vercel's Edge Network with Legacy Sites During Migration
When migrating legacy sites to Next.js on Vercel, you need to be careful about how you configure CDNs. Here's how to approach this:
Important Considerations
First, it's important to understand that Vercel already includes its own Edge Network (CDN) for all deployments. Placing another CDN in front of Vercel requires caution 12.
Vercel's documentation specifically notes: "While sometimes necessary, proceed with caution when you place another CDN in front of Vercel" 2. This is because Vercel's Edge Network handles deployment updates by purging its cache globally, and an additional CDN layer can interfere with this process.
Step-by-Step Migration Process
Set up your Next.js project on Vercel
- Create and deploy your Next.js application on Vercel
- This establishes your destination environment
Configure your legacy site's DNS
- Keep your legacy site's DNS pointing to your original servers initially
Use a reverse proxy approach
- Rather than placing Vercel behind your legacy CDN, consider using a reverse proxy
- Configure your server to forward specific paths to Vercel while serving legacy content
Gradual migration with path-based routing
- Migrate one section/path at a time
- Configure your proxy to route those specific paths to Vercel
For Next.js assets configuration
- If needed, you can use
assetPrefixin your Next.js configuration to specify where static assets are served from 3 - This is useful if you need to serve Next.js assets from a different domain during migration
- If needed, you can use
Testing and verification
- Test thoroughly before switching DNS
- Verify both legacy and new content are accessible
DNS cutover
- Once migration is complete, update DNS to point directly to Vercel
- Remove any proxy configuration
This approach allows for a gradual migration without downtime while leveraging Vercel's Edge Network appropriately.
186d ago
Using Vercel as a Reverse Proxy for Legacy Sites
Yes, you can use Vercel as a reverse proxy for your legacy sites while incrementally migrating to Next.js. This is a supported and recommended approach for zero-downtime migrations 12.
Step-by-Step Process
Deploy a Next.js project to Vercel
- Create a basic Next.js project that will serve as your proxy and future application
- Deploy it to Vercel
Configure rewrites to proxy requests to your legacy site
- Vercel supports rewrites that can proxy requests to external domains 1
- You can set this up in your
next.config.js:
module.exports = {
async rewrites() {
return [
// Proxy all requests to your legacy site by default
{
source: '/:path*',
destination: 'https://your-legacy-site.com/:path*',
},
// As you migrate sections, add more specific rewrites
// that will be matched first
{
source: '/new-section/:path*',
// This will be handled by your Next.js app
destination: '/new-section/:path*',
},
]
},
}Point your domain to Vercel
- Update your DNS settings to point to Vercel
- Vercel will now handle all requests and proxy them to your legacy site as needed
Incrementally migrate sections
- Start building new sections/pages in your Next.js app
- As each section is ready, update your rewrites configuration to serve that section from Next.js instead of proxying to the legacy site
- This allows for "incremental adoption" as mentioned in the Vercel documentation 2
Handle cookies and authentication
- If your legacy site uses cookies for authentication, you'll need to ensure they're properly shared
- Consider using middleware in Next.js to handle authentication state
Test thoroughly
- Test both the proxied legacy content and new Next.js content
- Verify that all functionality works as expected
This approach allows you to gradually migrate your site to Next.js while using Vercel as the primary entry point, providing a seamless experience for users during the transition 12.
186d ago