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 packages

Add easyCDN to your project with a single command

bash

npm install @easycdn/react @easycdn/server

Add the Dropzone component

Drop files directly in your React components

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)
      }}
    />
  )
}

Create server action

Persist uploaded files with server-side validation

'use server'
import { createClient } from '@easycdn/server'

export async function persistUpload(tempId: string) {
  const easyCDNServer = createClient({
    secretKey: process.env.EASYCDN_SECRET_KEY!
  })

  const { asset } = await easyCDNServer.persist({
    tempAssetId: tempId
  })

  return { asset }
}

Alternative: Direct upload

Upload files directly from your server

'use server'
import { createClient } from '@easycdn/server'

export async function uploadFile(filePath: string) {
  const easyCDNServer = createClient({
    secretKey: process.env.EASYCDN_SECRET_KEY!
  })

  const { asset } = await easyCDNServer.upload(filePath)

  return { asset }
}

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