{"id":38489,"date":"2025-09-11T07:11:00","date_gmt":"2025-09-11T14:11:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=38489"},"modified":"2025-12-15T23:40:38","modified_gmt":"2025-12-16T07:40:38","slug":"smart-video-embed-service-next-js-hono","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/smart-video-embed-service-next-js-hono","title":{"rendered":"Build a Smart Video Embed Service With Next.js, Hono, and Cloudinary"},"content":{"rendered":"

GitHub Repository<\/strong><\/a> | Live Demo<\/strong><\/a><\/p>\n

Imagine giving your users or clients a polished dashboard where they can simply upload a video and instantly get a powerful, customizable player to embed on any website, no coding required. This is the promise of a \u201csmart\u201d video embed as a service. Instead of manually wrestling with video tags and complex player configurations, you provide a seamless, self-service experience.<\/p>\n

This platform provides a drop-in <iframe><\/code> or <script><\/code> widget that renders Cloudinary\u2019s high-performance, adaptive video player. It\u2019s all powered by a modern, full-stack setup: a beautiful Next.js<\/strong> dashboard, a lightning-fast Hono<\/strong> edge API, and Cloudinary<\/strong> for all the heavy lifting of video storage, optimization, and delivery.<\/p>\n

In this tutorial, you\u2019ll build a complete video platform that:<\/p>\n

    \n
  1. \n

    Provides a polished Next.js dashboard<\/strong> with Shadcn\/UI for uploading and managing a video library.<\/p>\n<\/li>\n

  2. \n

    Uses a fast, server-side Hono API<\/strong> to securely fetch the list of video assets from your Cloudinary account.<\/p>\n<\/li>\n

  3. \n

    Features a customization page<\/strong> with a real-time <iframe><\/code> preview where users can adjust player dimensions and accent colors.<\/p>\n<\/li>\n

  4. \n

    Generates multiple, production-ready embed codes<\/strong> (URL, iFrame, and Javascript) for maximum flexibility.<\/p>\n<\/li>\n<\/ol>\n

    Let\u2019s dive in!<\/p>\n

    Project Setup and Cloudinary Configuration<\/h2>\n

    Before we write any application code, we need to lay the foundation. This involves scaffolding our Next.js + Hono project, installing our core dependencies, and configuring our Cloudinary account to allow for secure, client-side uploads.<\/p>\n

    1. Scaffold the Next.js + Hono App<\/h3>\n

    We\u2019ll start with the official Vercel template for a seamless Next.js and Hono integration.<\/p>\n

    npx<\/span>  create-next-app<\/span>@latest<\/span>  my-video-service  --example  https:<\/span>\/\/github.com\/honojs\/hono-nextjs-template\n\ncd  my-video-service\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
    2. Install Dependencies and Initialize UI<\/h3>\n
    Next, install the Cloudinary SDK and the libraries for our UI: next-themes<\/code> for dark mode and lucide-react<\/code> for icons.<\/p>\n
    npm  install  cloudinary  next-themes  lucide-react\n<\/code><\/span><\/pre>\n
    Now, let\u2019s set up Shadcn\/UI<\/strong>, which will provide our beautiful, accessible components.<\/p>\n
    npx<\/span>  shadcn<\/span>@latest<\/span>  init\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
    Follow the command-line prompts, the default options are fine. After initialization, add the components we\u2019ll use throughout the project:<\/p>\n
    npx<\/span>  shadcn<\/span>@latest<\/span>  add  table  dropdown-menu  dialog  textarea  card  button  sheet  skeleton  tabs  label  input  separator\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
    3. Create a Cloudinary Unsigned Upload Preset<\/h3>\n
    For our app to allow users to upload videos directly from their browser, we need an Unsigned Upload Preset<\/strong>. This is a special rule in Cloudinary that defines how to handle incoming files without requiring a secure signature from our server for every single upload.<\/p>\n
      \n
    1. \n
      Log in to your Cloudinary account<\/a>.<\/p>\n<\/li>\n
    2. \n
      Navigate to Settings<\/strong> > Upload<\/strong> tab.<\/p>\n<\/li>\n
    3. \n
      Scroll down to Upload presets<\/strong> and click Add upload preset<\/strong>.<\/p>\n<\/li>\n
    4. \n
      Change the Signing Mode<\/strong> from Signed<\/code> to Unsigned<\/code><\/strong>. This is the most important step.<\/p>\n<\/li>\n
    5. \n
      Give it a memorable name (e.g., smart-video-uploads<\/code>).<\/p>\n<\/li>\n
    6. \n
      Click Save<\/strong> and copy the preset\u2019s name.<\/p>\n<\/li>\n<\/ol>\n
      4. Configure Environment Variables<\/h3>\n
      Create a file named .env.local<\/code> in the root of your project and add your Cloudinary credentials.<\/p>\n
      # Get these from your Cloudinary Dashboard homepage<\/span>\n\nNEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\"your_cloud_name\"<\/span>\nCLOUDINARY_API_KEY=\"your_api_key\"<\/span>\nCLOUDINARY_API_SECRET=\"your_api_secret\"<\/span>\n\n# The name of the unsigned upload preset you just created<\/span>\nNEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=\"smart-video-uploads\"<\/span>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
      \n
      Important<\/strong>: Never commit your .env.local file to version control, as it contains your secret keys.<\/p>\n<\/blockquote>\n
      Building the API Layer With Hono<\/h2>\n
      To display a list of existing videos, our dashboard needs to securely ask Cloudinary for the data. We can\u2019t do this from the user\u2019s browser, as it would expose our secret API key. Instead, we\u2019ll create a server-side API endpoint using Hono<\/strong> to act as a secure proxy.<\/p>\n
      1. Create a Secure, Server-Side Cloudinary Client<\/h3>\n
      First, we need a helper file that configures the Cloudinary Node.js SDK using our private API_KEY<\/code> and API_SECRET<\/code>. This keeps our configuration in one place and separates it from our application logic.<\/p>\n
      Create a new file at lib\/cloudinary\/server.ts<\/code>:<\/p>\n
      \/\/ lib\/cloudinary\/server.ts<\/span>\n\nimport<\/span> { v2 as<\/span> cloudinary } from<\/span> \"cloudinary\"<\/span>;\n\n\/\/ Configure the SDK with your server-side credentials<\/span>\ncloudinary.config({\n  cloud_name<\/span>: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,\n  api_key<\/span>: process.env.CLOUDINARY_API_KEY,\n  api_secret<\/span>: process.env.CLOUDINARY_API_SECRET,\n});\n\nexport<\/span> { cloudinary };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
      This configured cloudinary<\/code> instance has the power to use the Admin API for tasks like searching, deleting, or tagging assets.<\/p>\n
      2. Create the \/videos<\/code> Endpoint<\/h3>\n
      Now, let\u2019s edit our Hono API file at app\/api\/[[...route]]\/route.ts<\/code> to create the GET \/videos<\/code> route. This endpoint uses our secure client to perform a search and return the results as JSON.<\/p>\n
      The core of this endpoint is the Cloudinary Search API call:<\/p>\n
      \/\/ app\/api\/[[...route]]\/route.ts (snippet)<\/span>\n\napp.get(\"\/videos\"<\/span>, async<\/span> (c) => {\n  const<\/span> results = await<\/span> cloudinary.search\n    .expression(\"resource_type:video AND folder=smart-video-uploads\"<\/span>)\n    .sort_by(\"created_at\"<\/span>, \"desc\"<\/span>)\n    .max_results(50<\/span>)\n    .execute();\n\n  return<\/span> c.json(results.resources);\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
      Let\u2019s break down the Cloudinary Search<\/strong> part in more detail:<\/p>\n