{"id":36203,"date":"2024-10-25T07:00:00","date_gmt":"2024-10-25T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36203"},"modified":"2025-03-30T14:16:02","modified_gmt":"2025-03-30T21:16:02","slug":"how-to-optimize-video-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how-to-optimize-video-next-js","title":{"rendered":"How to Optimize Video in Next.js With Cloudinary"},"content":{"rendered":"

Users worldwide have varying internet speeds, data caps, and other restrictions, making it difficult to stream heavy content like videos. To ensure a smooth experience, videos must be compressed and optimized to load quickly without sacrificing quality.<\/p>\n

In this blog post, I\u2019ll show you how to create a custom video player in Next.js<\/a> while leveraging Cloudinary<\/a> for video optimization and delivery. We\u2019ll use Cloudinary to ensure that videos are served in a format that suits the user\u2019s device, reducing load times and improving performance. By the end, you\u2019ll have a fully functional and optimized video player integrated into your Next.js app with minimal effort.<\/p>\n

Set up the Project<\/h2>\n

To get started, I used the command npx create-next-app@latest<\/code> and followed the prompts.<\/p>\n

Once the project was ready, I added the next-cloudinary package by running:<\/p>\n

npm install next-cloudinary\n<\/code><\/span><\/pre>\n
After that, I set the NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME<\/code> environment variable in my .env.local<\/code> file so Cloudinary could adequately handle the image hosting.<\/p>\n
Create the Custom Video Player Component<\/h2>\n
To optimize video delivery in our Next.js app, I created a custom video player component using next-cloudinary. This allows us to use Cloudinary\u2019s optimization features while keeping the implementation simple.<\/p>\n
Here\u2019s the code for the custom VideoPlayer<\/code> component:<\/p>\n
\"use client\"<\/span>;\nimport<\/span> { CldVideoPlayer, CldVideoPlayerProps } from<\/span> \"next-cloudinary\"<\/span>;\nimport<\/span> \"next-cloudinary\/dist\/cld-video-player.css\"<\/span>;\n\nexport<\/span> default<\/span> function<\/span> VideoPlayer<\/span>(options: {\n  src: string;\n  width: string | number;\n  height: string | number;\n  variant?: \"primary\"<\/span> | \"background\"<\/span>;\n  className?: string;\n}<\/span>) <\/span>{\n  const<\/span> { src, width, height, variant = \"primary\"<\/span>, className = \"\"<\/span> } = options;\n\n  \/\/ See https:\/\/cloudinary.com\/glossary\/video-autoplay<\/span>\n  let<\/span> specialOptions: Partial<CldVideoPlayerProps> = {};\n  if<\/span> (variant === \"background\"<\/span>) {\n    specialOptions = {\n      autoplay<\/span>: true<\/span>,\n      muted<\/span>: true<\/span>,\n      loop<\/span>: true<\/span>,\n      controls<\/span>: false<\/span>,\n    };\n  }\n\n  return<\/span> (\n    <CldVideoPlayer<\/span>\n      src<\/span>={src}<\/span>\n      width<\/span>={width}<\/span>\n      height<\/span>={height}<\/span>\n      className<\/span>={<\/span>`${className<\/span>} ${\n        variant<\/span> === \"background\"<\/span> ? \"cursor-default<\/span>\" :<\/span> \"\"\n      }`}\n      transformation<\/span>={{<\/span>\n        fetch_format:<\/span> \"auto<\/span>\",\n        quality:<\/span> variant<\/span> === \"primary\"<\/span> ? \"auto:good<\/span>\" :<\/span> \"auto:low<\/span>\",\n        crop:<\/span> \"fill<\/span>\",\n      }}\n      {...specialOptions<\/span>}\n    \/><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This component utilizes Cloudinary\u2019s CldVideoPlayer<\/code> to handle video optimization automatically. The VideoPlayer<\/code> component accepts several props:<\/p>\n