This guide will help you smoothly migrate your Vercel project to EdgeOne Pages.
Preparations: Search Build Command and Output Directory
Start by finding your Vercel project's build command and output directory:
1. Log in to the dashboard and find the project to migrate.
2. Enter Settings (project setting) and select the General (common) tab.
3. In the Build and Development Settings (compilation and deployment setting) panel, record the following information:
3.1 Build Command
3.2 Output Directory
Example:
npm run build
Output Directory: build
This information will be used in project configuration.
2.Configuration Migration: Handle Redirects and Headers
If your project used a vercel.json file to configure redirects or custom headers, require migrating these configurations to the edgeone.json file in EdgeOne Pages.
Comparison example of both:
Configure the Vercel.json file.
{
"redirects":[
{
"source":"/articles",
"destination":"/blog",
"statusCode":301
}
],
"rewrites":[
{
"source":"/assets/*",
"destination":"/assets-new/:splat"
}
],
"headers":[
{
"source":"/(.*)",
"headers":[
{
"key":"X-Frame-Options",
"value":"DENY"
},
{
"key":"Cache-Control",
"value":"max-age=7200"
}
]
},
{
"source":"/assets/*",
"headers":[
{
"key":"Cache-Control",
"value":"max-age=31536000"
}
]
}
]
}
Corresponding edgeone.json configuration:
{
"redirects":[
{
"source":"/articles",
"destination":"/blog",
"statusCode":301
}
],
"rewrites":[
{
"source":"/assets/*",
"destination":"/assets-new/:splat"
}
],
"headers":[
{
"source":"/*",
"headers":[
{
"key":"X-Frame-Options",
"value":"DENY"
},
{
"key":"Cache-Control",
"value":"max-age=7200"
}
]
},
{
"source":"/assets/*",
"headers":[
{
"key":"Cache-Control",
"value":"max-age=31536000"
}
]
}
]
}
Note: The configuration syntax of EdgeOne Pages is very similar to Vercel, but may contain some minor differences. For detailed configuration options, refer to the edgeone.json document.
3.Function Migration: From Vercel to EdgeOne Pages
The two platforms have differences in syntax and usage. Here is a simple comparison example:
Vercel Functions Hello World:
exportconst dynamic ='force-dynamic';
exportfunctionPOST(request){
returnnewResponse(`Hello world`);
}
Pages Functions Hello World:
exportdefaultfunctiononRequestPost(context){
returnnewResponse(`Hello world`);
}
main difference:
Pages use onRequest series functions (such as onRequestPost) to handle different HTTP methods.
Pages Functions receive a context object, which contains request information and environment variables.
The response method is similar, both use Response object.
Note:
Pages and Functions support Node Functions and Edge Functions, with some differences in features such as context objects. You can select based on your requirements.
Migration suggestions
Change the export function to the onRequest series functions.
If you used Vercel-specific features, you may need to find other solutions. Contact us through the community.
By completing the above steps, you have successfully migrated your Vercel project to EdgeOne Pages. The two platforms have similarities in some aspects, but on a strong infrastructure, we have optimized Pages product features, such as intelligent refresh preheating, providing an out-of-the-box experience. In addition, Pages has fewer restrictions compared to competitors during the beta phase, offering more flexibility for developers. In terms of customer support, we provide more timely responses, committed to delivering a high-quality product experience for developers.
