Quick Start Guide

Integrate easyCDN into your application in minutes. Follow the steps below to get started. The Quick Start Guide is adjusted for a Next.js application.

Install the easyCDN packages via npm or yarn

bash

npm install @easycdn/server @easycdn/react

Add the easyCDN dropzone component to your React.js / Next.js application

tsx

'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

tsx

'use server'

import { createClient } from '@easycdn/server'

// 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) {
  // 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.persist({ tempAssetId: tempId })

  // you can use the asset / preview to store in your database
  return { asset, preview }
}

API Keys

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.

Go to your Dashboard

Introduction

Dropzone Demo