Migrating from Netlify to EdgeOne Pages

This guide will help you smoothly migrate your Netlify project to EdgeOne Pages.
﻿
1.Preparations: Finding the Build Command and Publish Directory
First, we need to find the build command and output directory of your Netlify project:
1. Log in to the dashboard and find the project to migrate.
2. Enter Site configuration, select the Build & deploy option.
3. In the Build settings section, note the values of Build command and Publish directory.
﻿
﻿
﻿
﻿
﻿
﻿
﻿
For example:
Build command: npm run build
Publish directory: .next
﻿
This information will be used in the project configuration.
﻿
2.Configuring Migration: Handling Redirects and Headers
If your project uses _redirects and _headers files or configures redirects and custom headers in the netlify.toml file, you need to migrate these configurations to the edgeone.json file of EdgeOne Pages.
﻿
Before migration, we need to understand your existing Netlify configuration and convert it into a format that Pages can understand.
﻿
Here is a comparison example:
﻿
Netlify's netlify.toml Configuration:
[build]
  command = "npm run build"
  publish = "build"
﻿
[[redirects]]
  from = "/articles"
  to = "/blogs"
  status = 301
﻿
[[headers]]
  source = "/*"
﻿
  [[headers.headers]]
    key = "X-Frame-Options"
    value = "DENY"
﻿
  [[headers.headers]]
    key = "Cache-Control"
    value = "max-age=7200"
﻿
[[headers]]
  source = "/assets/*"
﻿
  [[headers.headers]]
    key = "Cache-Control"
    value = "max-age=31536000"
In this example, we can see the configuration of build commands, publish directory, redirect rules, and custom headers.
﻿
In EdgeOne Pages, we need to create an edgeone.json file to include these configurations:
{
  "buildCommand": "npm run build",
  "outputDirectory": "build",
  "redirects": [
    {
      "source": "/articles",
      "destination": "/blog",
      "statusCode": 301
    }
  ],
  "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"
        }
      ]
    }
  ]
}
Detailed configuration options can be found in the edgeone.json documentation.
﻿
Migrating Functions: From Netlify to EdgeOne Pages
There are some differences in syntax and usage between the two platforms. Here is a simple comparison example:
﻿
Netlify edge function example:
export default async (request, context) => {
  return new Response("Hello, World!", {
    headers: { "content-type": "text/html" },
  });
};
﻿
Edgeone pages function example:
export function onRequest(context) {
  return new Response("Hello, World!", {
    headers: { "content-type": "text/html" },
  });
}
﻿
main differences:
1. function definition:
1.1 netlify uses default exported asynchronous functions.
1.2 Pages uses named onRequest functions (or onRequestGet, onRequestPost, etc.)
2. Parameters:
2.1 netlify functions receive request and context as separate parameters.
2.2 Pages functions receive a context object containing request
3. response method:
3.1 both use the response object to return responses, which is similar.
4. runtime environment:
4.1 netlify edge functions use the deno runtime.
4.2 pages functions are implemented based on edgeone edge functions, providing a serverless code execution environment on edgeone edge nodes.
﻿
Migration suggestions:
change the default exported function to a named onrequest function:
// Netlify
export default async (request, context) => {
  // function body
};
﻿
// EdgeOne Pages
export function onRequest(context) {
  // function body
}
adjust parameter usage:
// Netlify
const { geo } = context;
﻿
// EdgeOne Pages
const { request } = context;
const geo = request.eo.geo;
keep the usage of the response object, this part basically does not need to change.
Check and adjust any Deno-specific API usage. Pages Functions may not support some Deno-specific features, find alternatives, and contact us through the community.
File naming may need to be adjusted. Netlify uses .js, .ts, or .edge.js extensions, while Pages currently supports .js, .ts, .cjs, .jsx, .tsx.
﻿
For detailed function usage, refer to the Pages Functions documentation.
﻿
4.Project Deployment: Creating a New Project on EdgeOne Pages
After preparation work is completed, create and deploy the project on Pages:
1. Log in to the Tencent Cloud console, enter the Pages service.
2. Click "Create Project", select your GitHub repository.
3. In the project configuration, enter the previously recorded build command and publish directory.
4. Click the "Start Deployment" button, and Pages will automatically build and deploy your project.
﻿
5.Domain Configuration: Adding a Custom Domain
There are some differences between Netlify and Pages in domain configuration:
1. add domain in Pages:
1.1 In the console, add the same custom domain for your project.
2. Update DNS records:
2.1 If you use Netlify DNS, need to transfer the domain to another DNS provider.
2.2 If using external DNS, just update the existing records:
2.2.1 Change A records or ALIAS records to CNAME records.
2.2.2 point CNAME record to the domain provided by Pages.
3. Verify DNS settings:
3.1 Use dig or online DNS query tools to confirm that DNS changes have taken effect.
4. Wait for HTTPS certificate configuration:
4.1 Pages will automatically configure HTTPS certificates for your domain.
﻿
For the detailed domain addition process, refer to the Domain Management Documentation.
﻿
By completing the above steps, you have successfully migrated the Netlify project to EdgeOne Pages. The two platforms have similarities in some aspects, but on a strong infrastructure, we have optimized for the features of the Pages product, such as intelligent refresh preheating, to provide an out-of-the-box experience. Additionally, Pages has fewer restrictions compared to competitors during the public beta, providing more flexibility for developers. In terms of customer support, we provide more timely responses, committed to providing developers with a high-quality product experience.
﻿
If you encounter any issues during migration, please refer to the EdgeOne Pages Documentation.
﻿
1.Preparations: Finding the Build Command and Publish Directory
2.Configuring Migration: Handling Redirects and Headers
Migrating Functions: From Netlify to EdgeOne Pages
4.Project Deployment: Creating a New Project on EdgeOne Pages
5.Domain Configuration: Adding a Custom Domain