Integrate easyCDN in Minutes
Adding powerful content delivery capabilities to your application has never been easier. Follow our simple integration steps to get started with easyCDN today.
Install the easyCDN packages via npm or yarn
npm install @easycdn/server @easycdn/reactAdd the EasyCDN dropzone component to your React.js / Next.js application
'use client'
import { Dropzone } from '@easycdn/react'
export default function MyPage() {
return (
<Dropzone
publicKey={process.env.NEXT_PUBLIC_EASYCDN_PUBLIC_KEY!}
onUploadComplete={async ({ tempId, previewUrl }) => {
const { asset } = await persistUpload(tempId)
// do something with previewUrl or asset.url if desired
}}
/>
)
}Create a server action (Next.js) to persist uploaded assets
'use server'
import { createClient } from '@easycdn/server'
// NOTE: only execute this on the server, passing your Secret Key
const easyCdnServer = createClient({
secretKey: process.env.EASYCDN_SECRET_KEY!,
})
export async function persistUpload(tempId: string) {
// NOTE: preview is present only if the asset is an image and the project setting for creating a preview is enabled
const { asset, preview } = await easyCdnServer.persistAsset({ tempAssetId: tempId })
// NOTE: you can use the asset / preview to store in your database
return { asset, preview }
}Your Public and Secret Keys are accessible in the Developers section of your dashboard. Keep your Secret Key secure and never expose it in client-side code.