{"id":28096,"date":"2021-06-02T08:54:57","date_gmt":"2021-06-02T08:54:57","guid":{"rendered":"http:\/\/How-To-Convert-Video-to-GIF-in-Next.js-With-Cloudinary"},"modified":"2025-03-08T13:42:47","modified_gmt":"2025-03-08T21:42:47","slug":"how-to-convert-video-to-gif-in-next-js-with-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-convert-video-to-gif-in-next-js-with-cloudinary\/","title":{"rendered":"How To Convert Video to GIF in Next.js"},"content":{"rendered":"

In this media jam, we will discuss how to build a Video to GIF converter in Next.js using Cloudinary. We will use Next.js API routes to upload the video to Cloudinary and then fetch the converted GIF. We will also see how to build a download button to download the GIF and a clear button to delete the video from Cloudinary.<\/p>\n

If you want to jump right into the code, check out the GitHub Repo here<\/a>.<\/p>\n

CodeSandbox<\/h2>\n<\/div>\n\n\n
\n <\/iframe>\n <\/div>\n\n\n

Setup<\/h2>\n

You will create the initial Next.js app using the create-next-app<\/code> template. Run the following commands in your terminal.<\/p>\n

npx create-next-app video-2-gif\ncd video-2-gif\nnpm run dev\n<\/code><\/span><\/pre>\n
The last command, npm run dev<\/code>, will start the development server on http:\/\/localhost:3000\/<\/a>. You can stop the development server by hitting CTRL+C<\/strong> in the terminal.<\/p>\n
You will use Cloudinary node.js server-side SDK<\/a> in the API routes to upload and delete the video from Cloudinary. You will also need to install cloudinary-react<\/code> to display GIF to the users, react-dropzone<\/code> for drag & drop operation, and axios<\/code> to make the requests to the API routes from the frontend.<\/p>\n
Run the following command to install the required libraries.<\/p>\n
npm install cloudinary cloudinary-react react-dropzone axios\n<\/code><\/span><\/pre>\n
To store your Cloudinary API Keys securely, create a .env<\/code> file in your root directory by running the following command.<\/p>\n
touch<\/span> .env<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Head over to your Cloudinary dashboard and copy the API Keys.<\/p>\n
\"Cloudinary<\/p>\n
Paste the API keys in the .env<\/code> file<\/p>\n
NEXT_PUBLIC_CLOUDINARY_CLOUD=''<\/span>\nCLOUDINARY_API_KEY=''<\/span>\nCLOUDINARY_API_SECRET=''<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
How to Upload Videos to Cloudinary<\/h2>\n
In this section, we will discuss how to upload the videos to Cloudinary using the react-dropzone<\/code> library and FileReader<\/code> API.<\/p>\n
The first step is to create a dropzone in your app that only accepts videos and then read the selected video using the FileReader<\/code> API.<\/p>\n
Update the pages\/index.js<\/code> file with the following code.<\/p>\n
import<\/span> React, { useState } from<\/span> \"react\"<\/span>;\nimport<\/span> Head from<\/span> \"next\/head\"<\/span>;\nimport<\/span> { useDropzone } from<\/span> \"react-dropzone\"<\/span>;\nimport<\/span> styles from<\/span> \"..\/styles\/Home.module.css\"<\/span>;\nimport<\/span> axios from<\/span> \"axios\"<\/span>;\nimport<\/span> { Transformation, Image } from<\/span> \"cloudinary-react\"<\/span>;\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n  const<\/span> [uploadVideo, setUploadVideo] = useState(\"\"<\/span>);\n  const<\/span> [publicId, setPublicId] = useState(\"\"<\/span>);\n  const<\/span> [fileName, setFileName] = useState(\"\"<\/span>);\n  const<\/span> [progress, setProgress] = useState(\"\"<\/span>);\n\n  const<\/span> { getRootProps, getInputProps } = useDropzone({\n    accept<\/span>: \"video\/*\"<\/span>,\n    multiple<\/span>: false<\/span>,\n    onDrop<\/span>: (acceptedFiles<\/span>) =><\/span> {\n      const<\/span> file = acceptedFiles[0<\/span>];\n      setFileName(file.name);\n\n      const<\/span> reader = new<\/span> FileReader();\n      reader.readAsDataURL(file);\n      reader.onload = ()<\/span> =><\/span> {\n        setUploadVideo(reader.result);\n      };\n\n      reader.onerror = ()<\/span> =><\/span> {\n        console<\/span>.error(\"Error has Occured\"<\/span>);\n      };\n    },\n  });\n\n  const<\/span> convert = async<\/span> () => {\n    setProgress(\"Converting Video to GIF\"<\/span>);\n    console<\/span>.log(uploadVideo)\n  };\n\n  return<\/span> (\n    <div<\/span> className<\/span>={styles.container}<\/span>><\/span>\n      <Head<\/span>><\/span>\n        <title<\/span>><\/span>Video 2 GIF Converter<\/title<\/span>><\/span>\n        <link<\/span> rel<\/span>=\"icon\"<\/span> href<\/span>=\"\/favicon.ico\"<\/span> \/><\/span>\n      <\/Head<\/span>><\/span>\n\n      <main<\/span> className<\/span>={styles.main}<\/span>><\/span>\n        <h1<\/span> className<\/span>={styles.title}<\/span>><\/span>Video 2 GIF Converter<\/h1<\/span>><\/span>\n\n        <div<\/span> className<\/span>={styles.card}<\/span> {...getRootProps<\/span>()}><\/span>\n          <input<\/span> {...getInputProps<\/span>()} \/><\/span>\n          {fileName ? (\n            <div<\/span>><\/span>\n              <p<\/span>><\/span>Selected Video: {fileName}.<\/p<\/span>><\/span> <p<\/span>><\/span>{progress}<\/p<\/span>><\/span>\n            <\/div<\/span>><\/span>\n          ) : (\n            <p<\/span>><\/span>Drag 'n' drop some files here, or click to select files<\/p<\/span>><\/span>\n          )}\n        <\/div<\/span>><\/span>\n\n        <div<\/span> className<\/span>={styles.grid}<\/span>><\/span>\n          <button<\/span> className<\/span>={styles.btn}<\/span> onClick<\/span>={convert}<\/span>><\/span>Convert<\/button<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/main<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the above code, you start by importing all the packages and then initialize four different states using the useState()<\/code> hook.<\/p>\n
In this tutorial, we will not discuss the styling of the app. You can copy-paste the CSS used to style the app in the styles\/Home.module.css<\/code> file from here<\/a>.<\/p>\n