{"id":36402,"date":"2024-12-04T07:00:00","date_gmt":"2024-12-04T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36402"},"modified":"2024-12-05T11:11:35","modified_gmt":"2024-12-05T19:11:35","slug":"clip-videos-social-media-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/clip-videos-social-media-next-js","title":{"rendered":"Clip Long-Form Videos to Social Media Platforms in Next.js"},"content":{"rendered":"\n

Video dominates social media feeds, and the demand keeps on growing. Between 2022 and 2023, a survey<\/a> from SocialInsider revealed Instagram Reels<\/a> had a year-over-year growth rate of 57.4%. From user-generated content<\/a> <\/a>(UGC)<\/a> to paid ads, our social media feeds are full of video content. <\/p>\n\n\n\n

Turn your long-form videos into digestible clips that fit the format requirements of these platforms with Next.js and Cloudinary. This blog post will teach you how to build a video snipping tool with Next.js, using Cloudinary’s trim and resize features to easily customize your videos.<\/p>\n\n\n\n

Before we start, you should have a basic understanding of TypeScript or JavaScript and a free <\/a>Cloudinary account<\/a>. You can also find the complete code implementation in this GitHub repository<\/a>.<\/p>\n\n\n\n

Set Up the Next.js App<\/h2>\n\n\n\n

To set up the Next.js project, clone the starter project<\/a>. This starter project contains the styles for the app so you can focus on building the core functionality. Clone the repo using the command below:<\/p>\n\n\n

<code<\/span>><\/span>git clone https:\/\/github.com\/folucode\/video-snipping-tool-starter.git\u00a0<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, install the Cloudinary packages in the project directory using the command below. The @cloudinary\/react<\/code> package provides React components that make it easy to work directly with Cloudinary’s media features in your React or NextJS project. In contrast, the @cloudinary\/url-gen<\/code> package allows you to dynamically generate URLs for images and videos with transformations using Cloudinary’s API.<\/p>\n\n\n
<code<\/span>><\/span>npm install @cloudinary\/react @cloudinary\/url-gen<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Set Up Environment Variables<\/h2>\n\n\n\n
In the project\u2019s root directory, add a new file, .env.local, and paste the code below in that file. This file will contain your Cloudinary cloud name. Your cloud name is what you will use to access your Cloudinary account programatically.<\/p>\n\n\n
<code<\/span>><\/span>NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=<CLOUDINARY_CLOUD_NAME<\/span>><\/span><\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"
Cloudinary developer dashboard<\/figcaption><\/figure>\n\n\n\n
After adding your cloud name to the .env.local<\/code> file, in the following section you will build the core functionality of the app.<\/p>\n\n\n\n
Build the App Functionality<\/h2>\n\n\n\n
Before you proceed, you need to upload a video to your Cloudinary account. Check here to learn how to upload a video to Cloudinary<\/a>.<\/p>\n\n\n\n
Next, in the page.tsx<\/code> file, you must first set up the Cloudinary instance object and the video you want to transform. To do this, create a Cloudinary object using the public environment variable for the cloudName<\/code>. This object will allow you to perform the transformations and load the video.<\/p>\n\n\n
\/\/ src\/page.tsx<\/span>\n\n\/\/ ...<\/span>\n\nimport<\/span> { Cloudinary } from<\/span> '@cloudinary\/url-gen'<\/span>;\n\nconst<\/span> cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME;\n\nconst<\/span> cloudinary: Cloudinary = new<\/span> Cloudinary({\n\n\u00a0 cloud<\/span>: {\n\n\u00a0 \u00a0 cloudName,\n\n\u00a0 },\n\n});\n\nconst<\/span> videoId: string = 'video-public-id'<\/span>;\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n\n\/\/ ...<\/span>\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the next section, you’ll set up the form inputs and corresponding state variables to capture user input for the start time, end time, and aspect ratio. This will allow you to control which section of the video to edit and specify the video\u2019s format for different platforms.<\/p>\n\n\n\n
Setting Up Form Inputs and State Management<\/h2>\n\n\n\n
To set up the form and state variables,  you can use React’s useState hook to dynamically manage and update these values as you interact with the form. See the code snippet below:<\/p>\n\n\n
\/\/ src\/page.tsx<\/span>\n\n\/\/ ...<\/span>\n\nimport<\/span> { useState } from<\/span> 'react'<\/span>;\n\n...\n\nexport default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n\nconst<\/span> [startTime, setStartTime] = useState(0<\/span>);\n\nconst<\/span> [endTime, setEndTime] = useState(0<\/span>);\n\nconst<\/span> [aspectRatio, setAspectRatio] = useState(''<\/span>);\n\n\/\/ Add form inputs for start time, end time, and aspect ratio<\/span>\n\nreturn<\/span> (\n\n\u00a0 <div<\/span> className<\/span>={styles.main}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <h1<\/span>><\/span>Video Snipping Tool<\/h1<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <div<\/span> className<\/span>={styles.grid}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <div<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Start Time (seconds):\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 className<\/span>={styles.input}<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 type<\/span>='number'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 value<\/span>={startTime}<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 onChange<\/span>={(e)<\/span> =><\/span> setStartTime(Number(e.target.value))}\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 End Time (seconds):\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 className<\/span>={styles.input}<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 type<\/span>='number'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 value<\/span>={endTime}<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 onChange<\/span>={(e)<\/span> =><\/span> setEndTime(Number(e.target.value))}\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label<\/span>><\/span>Platform: <\/label<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <select<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 value<\/span>={aspectRatio}<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 className<\/span>={styles.input}<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 onChange<\/span>={(e)<\/span> =><\/span> setAspectRatio(e.target.value)}\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 >\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <option<\/span> value<\/span>='9:16'<\/span>><\/span>Instagram Reels<\/option<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <option<\/span> value<\/span>='1:1'<\/span>><\/span>Instagram Feed<\/option<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <option<\/span> value<\/span>='16:9'<\/span>><\/span>YouTube Standard<\/option<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/select<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <\/div<\/span>><\/span>\n\n\u00a0 \u00a0 <\/div<\/span>><\/span><\/span>\n\n);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the code block above, you set up state variables to capture user input for the start time, end time, and aspect ratio. Then, you created form inputs to allow users to modify these values dynamically.<\/p>\n\n\n\n
Implementing Video Transformation and Preview<\/h2>\n\n\n\n
Finally, to implement the functionality to transform the video and display a preview, transformations, such as resizing and trimming, must be applied based on the start time, end time, and aspect ratio values provided. <\/p>\n\n\n\n
Once the transformations are applied, you can use Cloudinary’s advanced video component<\/a> to render a preview of the transformed video, allowing users to see the changes on the fly.<\/p>\n\n\n
\/\/ src\/page.tsx<\/span>\n\n...\n\nimport { fill } from<\/span> '@cloudinary\/url-gen\/actions\/resize'<\/span>;\n\nimport<\/span> { trim } from<\/span> '@cloudinary\/url-gen\/actions\/videoEdit'<\/span>;\n\nimport<\/span> { AdvancedVideo } from<\/span> '@cloudinary\/react'<\/span>;\n\n...\n\nexport default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n\n...\n\nconst [transformedVideo, setTransformedVideo] = useState(\n\n\u00a0 \u00a0 new<\/span> CloudinaryVideo(videoId, { cloudName })\n\n\u00a0 );\n\n\/\/ Function to transform the video<\/span>\n\nconst<\/span> getTransformedVideo = (): void<\/span> =><\/span> {\n\n\u00a0 if<\/span> (endTime <= startTime) {\n\n\u00a0 \u00a0 \u00a0 alert('End time must be greater than start time.'<\/span>);\n\n\u00a0 \u00a0 \u00a0 return<\/span>;\n\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 const<\/span> adjustedStartTime = Math<\/span>.max(0<\/span>, startTime);\n\n\u00a0 \u00a0 const<\/span> adjustedEndTime = endTime + 1<\/span>;\n\n\u00a0 \u00a0 const<\/span> videoTransformation = cloudinary\n\n\u00a0 \u00a0 \u00a0 .video(videoId)\n\n\u00a0 \u00a0 \u00a0 .resize(fill().aspectRatio(aspectRatio).gravity('center'<\/span>))\n\n\u00a0 \u00a0 \u00a0 .videoEdit(\n\n\u00a0 \u00a0 \u00a0 \u00a0 trim().startOffset(adjustedStartTime).endOffset(adjustedEndTime)\n\n\u00a0 \u00a0 \u00a0 );\n\n\u00a0 \u00a0 setTransformedVideo(videoTransformation);\n\n};\n\n\u00a0 return<\/span> (\n\n\u00a0 \u00a0 <div<\/span> className<\/span>={styles.main}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <h1<\/span>><\/span>Video Snipping Tool<\/h1<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <div<\/span> className<\/span>={styles.grid}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <div<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 {\/* Form inputs for video transformation (startTime, endTime, aspectRatio) *\/}\n\n\u00a0 \u00a0 \u00a0 <button<\/span> className<\/span>={styles.button}<\/span> onClick<\/span>={getTransformedVideo}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 Transform\n\n\u00a0 \u00a0 \u00a0 <\/button<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <\/div<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <div<\/span> className<\/span>={styles.videoContainer}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h3<\/span>><\/span>Preview:<\/h3<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {transformedVideo && (\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <AdvancedVideo<\/span> cldVid<\/span>={transformedVideo}<\/span> controls<\/span> \/><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 )}\n\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <\/div<\/span>><\/span>\n\n\u00a0 \u00a0 <\/div<\/span>><\/span><\/span>\n\n\u00a0 );\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In this code block, you set up a function to apply video transformations based on your defined start time, end time, and aspect ratio. The start and end times are adjusted to ensure that the selected video segment provides a smoother playback experience. The adjusted start time is set to a minimum of zero. In contrast, the adjusted end time is extended by one second to include additional footage beyond the selected endpoint. This approach results in a more polished final video.<\/p>\n\n\n\n
    \n
  1. cloudinary.video(videoId)<\/code>.<\/strong> This initiates a video transformation using Cloudinary. The videoId<\/code> is the unique identifier of the video in Cloudinary\u2019s storage, and .video(videoId)<\/code> prepares it for transformations.<\/li>\n\n\n\n
  2. .resize(fill().aspectRatio(aspectRatio).gravity('center'))<\/strong>.<\/code> This resizes the video:\n
The transformation process involves applying resizing and trimming actions using the Cloudinary SDK<\/a>. Here\u2019s a breakdown:<\/p>\n\n\n\n
The videoId<\/code> in the code above is the relative path to the video on your Cloudinary account without the file extension. For this example video<\/a>, the videoId<\/code> will be docs\/walking_talking<\/code>.<\/p>\n\n\n\n
To get your cloud name, navigate to the Cloudinary developer dashboard<\/a>. You should see it under the Product Environment Credentials <\/strong>section, as shown in the image below:<\/p>\n\n\n\n
Then, run npm run dev<\/code> to render a development server at https:\/\/localhost:3000\/<\/a> in your browser.<\/p>\n\n\n\n