{"id":36464,"date":"2024-12-16T07:00:00","date_gmt":"2024-12-16T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36464"},"modified":"2024-12-17T11:49:37","modified_gmt":"2024-12-17T19:49:37","slug":"resize-videos-social-media-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/resize-videos-social-media-next-js","title":{"rendered":"How to Resize Videos for Social Media in Next.js"},"content":{"rendered":"\n

In recent years, video publishing has progressed rapidly, with new platforms and tools constantly being introduced. According to an article<\/a> by Statista, the number of digital video viewers worldwide is more than 3.3 billion. This shift has made sharing video content simpler than ever; however, creating and managing videos across these platforms still requires editing to specific dimensions and formatting. For example, platforms like Instagram and YouTube have different size requirements depending on the channel, e.g., feed, reels, shorts, etc. This means you must find tools to format your videos for each platform.<\/p>\n\n\n\n

By building a video resize app, you can customize videos for different social media platforms with ease. This blog post walks through how to build an app with Next.js and Cloudinary.<\/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>. Also, you can find the completed app in this GitHub <\/a>r<\/a>epository<\/a>.<\/p>\n\n\n\n

Set Up a Next.js App<\/h1>\n\n\n\n

To create a Next.js project, run the command below and select Yes for Typescript and App Router, as that\u2019s what you\u2018ll build this app in:<\/p>\n\n\n

<code<\/span>><\/span>$ npx create-next-app@latest<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, in the project directory, install the Cloudinary package with this command:<\/p>\n\n\n
<code<\/span>><\/span>$ npm install cloudinary<\/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 house all your Cloudinary app keys.<\/p>\n\n\n
<code<\/span>><\/span>CLOUDINARY_CLOUD_NAME=<CLOUDINARY_CLOUD_NAME<\/span>><\/span><\/code<\/span>><\/span>\n<code<\/span>><\/span>CLOUDINARY_API_KEY=<CLOUDINARY_API_KEY<\/span>><\/span><\/code<\/span>><\/span>\n<code<\/span>><\/span>CLOUDINARY_API_SECRET=<CLOUDINARY_API_SECRET<\/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
Setup Cloudinary Library<\/h2>\n\n\n\n
To set up the Cloudinary library, add a new folder called lib in the src folder; in that folder, add a file and name it cloudinary.ts.<\/p>\n\n\n
\/\/ cloudinary.ts<\/span>\n\nimport<\/span> { v2 as<\/span> cloudinary } from<\/span> 'cloudinary'<\/span>;\n\ncloudinary.config({\n\n\u00a0 cloud_name<\/span>: process.env.CLOUDINARY_CLOUD_NAME,\n\n\u00a0 api_key<\/span>: process.env.CLOUDINARY_API_KEY,\n\n\u00a0 api_secret<\/span>: process.env.CLOUDINARY_API_SECRET,\n\n});\n\nexport<\/span> default<\/span> cloudinary;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the code above, you imported the v2<\/strong> version of the Cloudinary library. The cloudinary.config()<\/code> method configures the Cloudinary client with the account details you retrieved from your dashboard.<\/p>\n\n\n\n
This setup allows other parts of the application to import and use the configured Cloudinary client without configuring it again.<\/p>\n\n\n\n
Set Up the App Styles<\/h2>\n\n\n\n
In the page.module.css file, replace the boilerplate code with the code below to style the application.<\/p>\n\n\n
.page<\/span> {\n\n\u00a0 --gray-rgb<\/span>: 0<\/span>, 0<\/span>, 0<\/span>;\n\n\u00a0 --gray-alpha-200<\/span>: rgba<\/span>(var(--gray-rgb), 0.08<\/span>);\n\n\u00a0 --gray-alpha-100<\/span>: rgba<\/span>(var(--gray-rgb), 0.05<\/span>);\n\n\u00a0 --button-primary-hover<\/span>: #383838<\/span>;\n\n\u00a0 --button-secondary-hover<\/span>: #f2f2f2<\/span>;\n\n\u00a0 display<\/span>: grid;\n\n\u00a0 grid-template-rows<\/span>: 20px<\/span> 1<\/span>fr 20px<\/span>;\n\n\u00a0 align-items<\/span>: center;\n\n\u00a0 justify-items<\/span>: center;\n\n\u00a0 min-height<\/span>: 100s<\/span>vh;\n\n\u00a0 padding<\/span>: 80px<\/span>;\n\n\u00a0 gap<\/span>: 64px<\/span>;\n\n\u00a0 font-family<\/span>: var<\/span>(--font-geist-sans);\n\n}\n\n.main<\/span> {\n\n\u00a0 display<\/span>: flex;\n\n\u00a0 flex-direction<\/span>: column;\n\n\u00a0 gap<\/span>: 32px<\/span>;\n\n\u00a0 grid-row-start<\/span>: 2<\/span>;\n\n}\n\n.upload-form<\/span> {\n\n\u00a0 display<\/span>: flex;\n\n\u00a0 flex-direction<\/span>: column;\n\n\u00a0 gap<\/span>: 1rem<\/span>;\n\n\u00a0 width<\/span>: auto;\n\n\u00a0 margin<\/span>: 0<\/span> auto;\n\n\u00a0 padding<\/span>: 2rem<\/span>;\n\n\u00a0 border<\/span>: 1px<\/span> solid #ddd<\/span>;\n\n\u00a0 border-radius<\/span>: 4px<\/span>;\n\n\u00a0 background-color<\/span>: white;\n\n}\n\n.upload-form<\/span> h2<\/span> {\n\n\u00a0 color<\/span>: #484c48<\/span>;\n\n}\n\n.form-group<\/span> {\n\n\u00a0 display<\/span>: flex;\n\n\u00a0 align-items<\/span>: center;\n\n\u00a0 margin<\/span>: 20px<\/span> 0<\/span>;\n\n}\n\n.form-group<\/span> label<\/span> {\n\n\u00a0 flex<\/span>: 0<\/span> 0<\/span> 30%<\/span>;\n\n\u00a0 text-align<\/span>: left;\n\n\u00a0 color<\/span>: #403e3e<\/span>;\n\n}\n\n.form-group<\/span> input<\/span>,\n\n.form-group<\/span> select<\/span> {\n\n\u00a0 flex<\/span>: 1<\/span>;\n\n\u00a0 padding<\/span>: 0.5rem<\/span>;\n\n\u00a0 border<\/span>: 1px<\/span> solid #ccc<\/span>;\n\n\u00a0 border-radius<\/span>: 4px<\/span>;\n\n\u00a0 background<\/span>: none;\n\n\u00a0 color<\/span>: black;\n\n}\n\n.form-group<\/span> input<\/span>:active<\/span>,\n\n.form-group<\/span> select<\/span>:active<\/span> {\n\n\u00a0 outline-style<\/span>: none;\n\n\u00a0 outline-color<\/span>: white;\n\n}\n\n.submit-button<\/span> {\n\n\u00a0 background-color<\/span>: rgb<\/span>(81<\/span>, 81<\/span>, 234<\/span>);\n\n\u00a0 color<\/span>: white;\n\n\u00a0 padding<\/span>: 0.5rem<\/span>;\n\n\u00a0 border<\/span>: none;\n\n\u00a0 border-radius<\/span>: 4px<\/span>;\n\n\u00a0 cursor<\/span>: pointer;\n\n\u00a0 font-size<\/span>: medium;\n\n}\n\n.submit-button<\/span>:hover<\/span> {\n\n\u00a0 background-color<\/span>: rgb<\/span>(119<\/span>, 119<\/span>, 243<\/span>);\n\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Build the App functionality<\/h1>\n\n\n\n
Now that you\u2019re all set up, you can start building the upload and resize functionality. In the page.tsx file, you need to first set up the form that will upload your video to Cloudinary. You can also use the Cloudinary widget<\/a> to upload an asset but you won\u2019t be able to transform the asset on the fly.<\/p>\n\n\n\n
Replace the boilerplate code in the file with this:<\/p>\n\n\n
\/\/ src\/app\/page.tsx<\/span>\n\nimport<\/span> styles from<\/span> '.\/page.module.css'<\/span>;\n\nimport<\/span> cloudinary from<\/span> '@\/lib\/cloudinary'<\/span>;\n\nimport<\/span> { SubmitButton } from<\/span> '.\/submit-button'<\/span>;\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n\n\u00a0 const<\/span> handleSubmit = async<\/span> (formData: FormData) => {};\n\n\u00a0 return<\/span> (\n\n\u00a0 \u00a0 <div<\/span> className<\/span>={styles.page}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <main<\/span> className<\/span>={styles.main}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <div<\/span> className<\/span>={styles[<\/span>'upload-form<\/span>']}><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h2<\/span>><\/span>Upload and Resize Your Video<\/h2<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <form<\/span> action<\/span>={handleSubmit}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div<\/span> className<\/span>={styles[<\/span>'form-group<\/span>']}><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label<\/span> htmlFor<\/span>='video'<\/span>><\/span>Upload Video:<\/label<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input<\/span> type<\/span>='file'<\/span> name<\/span>='video'<\/span> accept<\/span>='video\/*'<\/span> required<\/span> \/><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div<\/span> className<\/span>={styles[<\/span>'form-group<\/span>']}><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label<\/span> htmlFor<\/span>='format'<\/span>><\/span>Formats:<\/label<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <select<\/span> name<\/span>='format'<\/span>><\/span>\n\n\u00a0 \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 \u00a0 <option<\/span> value<\/span>='1:1'<\/span>><\/span>Instagram Feed<\/option<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <option<\/span> value<\/span>='9:16'<\/span>><\/span>TikTok<\/option<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <option<\/span> value<\/span>='9:16'<\/span>><\/span>YouTube Shorts<\/option<\/span>><\/span>\n\n\u00a0 \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 \u00a0 \u00a0 <option<\/span> value<\/span>='9:16'<\/span>><\/span>Facebook Stories<\/option<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <option<\/span> value<\/span>='1:1'<\/span>><\/span>Facebook Feed<\/option<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <option<\/span> value<\/span>='9:16'<\/span>><\/span>Snapchat<\/option<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <option<\/span> value<\/span>='1:1'<\/span>><\/span>Twitter\/X<\/option<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <option<\/span> value<\/span>='1:1'<\/span>><\/span>LinkedIn<\/option<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/select<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <SubmitButton<\/span> \/><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/form<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <\/main<\/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
The code above sets up the upload form with the various video platforms and their aspect ratios.<\/p>\n\n\n\n
To implement the submit button component, create a new file in the app folder called submit-button.tsx<\/code> and paste the code below in it. The button component acts as the submit button and also the loading indicator. When you submit the form, the loader shows, indicating that the file is uploading and processing on Cloudinary.<\/p>\n\n\n
\/\/ src\/app\/submit-button.tsx<\/span>\n\n'use client'<\/span>;\n\nimport<\/span> { useFormStatus } from<\/span> 'react-dom'<\/span>;\n\nimport<\/span> styles from<\/span> '.\/page.module.css'<\/span>;\n\nexport<\/span> function<\/span> SubmitButton<\/span>(<\/span>) <\/span>{\n\n\u00a0 const<\/span> { pending } = useFormStatus();\n\n\u00a0 return<\/span> (\n\n\u00a0 \u00a0 <><\/span>\n\n\u00a0 \u00a0 \u00a0 {!pending ? (\n\n\u00a0 \u00a0 \u00a0 \u00a0 <button<\/span> type<\/span>='submit'<\/span> className<\/span>={styles[<\/span>'submit-button<\/span>']}><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Upload Video!\n\n\u00a0 \u00a0 \u00a0 \u00a0 <\/button<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 ) : (\n\n\u00a0 \u00a0 \u00a0 \u00a0 <button<\/span> className<\/span>={styles[<\/span>'submit-button<\/span>']}><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Uploading and Processing your video{' '}\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 xmlns<\/span>='http:\/\/www.w3.org\/2000\/svg'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width<\/span>='1em'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height<\/span>='1em'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 viewBox<\/span>='0 0 24 24'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <circle<\/span> cx<\/span>={4}<\/span> cy<\/span>={12}<\/span> r<\/span>={3}<\/span> fill<\/span>='currentColor'<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <animate<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 id<\/span>='svgSpinners3DotsBounce0'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 attributeName<\/span>='cy'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 begin<\/span>='0;svgSpinners3DotsBounce1.end+0.25s'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 calcMode<\/span>='spline'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 dur<\/span>='0.6s'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 keySplines<\/span>='.33,.66,.66,1;.33,0,.66,.33'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 values<\/span>='12;6;12'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ><\/span><\/animate<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/circle<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <circle<\/span> cx<\/span>={12}<\/span> cy<\/span>={12}<\/span> r<\/span>={3}<\/span> fill<\/span>='currentColor'<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <animate<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 attributeName<\/span>='cy'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 begin<\/span>='svgSpinners3DotsBounce0.begin+0.1s'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 calcMode<\/span>='spline'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 dur<\/span>='0.6s'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 keySplines<\/span>='.33,.66,.66,1;.33,0,.66,.33'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 values<\/span>='12;6;12'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ><\/span><\/animate<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/circle<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <circle<\/span> cx<\/span>={20}<\/span> cy<\/span>={12}<\/span> r<\/span>={3}<\/span> fill<\/span>='currentColor'<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <animate<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 id<\/span>='svgSpinners3DotsBounce1'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 attributeName<\/span>='cy'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 begin<\/span>='svgSpinners3DotsBounce0.begin+0.2s'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 calcMode<\/span>='spline'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 dur<\/span>='0.6s'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 keySplines<\/span>='.33,.66,.66,1;.33,0,.66,.33'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 values<\/span>='12;6;12'<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ><\/span><\/animate<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/circle<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/svg<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <\/button<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 )}\n\n\u00a0 \u00a0 <\/><\/span><\/span>\n\n\u00a0 );\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the file above, the use client derivative at the top of the file indicates that this is a client component, and it gives you access to client-side hooks like useFormStatus which is used to get the status of the form.<\/p>\n\n\n\n
Get Form Data<\/h2>\n\n\n\n
In the page.tsx file, add these import statements below the already imported statements.<\/p>\n\n\n
...\n\nimport { redirect } from<\/span> 'next\/navigation'<\/span>;\n\nimport<\/span> { UploadApiResponse } from<\/span> 'cloudinary'<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
To get the data from the form, add the use server directive to the top of the handleSubmit function; this signals to Next.js that the enclosed code is meant to run on the server and it prevents the function from being exposed to the client, enhancing security and performance. <\/p>\n\n\n\n
Still in the handleSubmit<\/code> function, retrieve the video file from the form data and cast it as a File<\/code> object. Also, you\u2019ll get the format<\/code> from the form, casting it as a string. After this, you\u2019ll need to convert the video file into a binary Buffer<\/code> by reading the file’s content as an ArrayBuffer<\/code> and then converting this Buffer<\/code> into a Buffer<\/code> object using Buffer.from()<\/code>. This conversion is necessary for handling the binary data of the video file on the server.\u00a0<\/p>\n\n\n\n
Finally, initialize an empty string variable url<\/code>, which will store the URL of the processed video.<\/p>\n\n\n
\/\/ src\/app\/page.tsx<\/span>\n\n'use server'<\/span>;\n\nconst<\/span> file = formData.get('video'<\/span>) as<\/span> File;\n\nconst<\/span> aspect_ratio = formData.get('format'<\/span>) as<\/span> string;\n\nconst<\/span> buffer: Buffer = Buffer.from(await<\/span> file.arrayBuffer());\n\nlet<\/span> url: string = ''<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Upload and Process the Video<\/h2>\n\n\n\n
The next step is to upload the video file from the form data to Cloudinary, crop it to the specified aspect ratio, and then redirect the app to the processed video URL. The process will be done within a try-catch<\/code> block in the handleSubmitfunction<\/code>, which ensures that any errors during the upload process are caught and logged for debugging purposes.<\/p>\n\n\n
\/\/src\/app\/page.tsx<\/span>\n\n....\n\ntry {\n\n\u00a0 const<\/span> base64Image: string = `data:${file.type}<\/span>;base64,${buffer.toString(\n\n\u00a0 \u00a0 'base64'<\/span>\n\n\u00a0 )}<\/span>`<\/span>;\n\n\u00a0 const<\/span> uploadResult: UploadApiResponse = await<\/span> cloudinary.uploader.upload(\n\n\u00a0 \u00a0 base64Image,\n\n\u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 resource_type<\/span>: 'video'<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 transformation<\/span>: [{ aspect_ratio, crop<\/span>: 'fill'<\/span> }],\n\n\u00a0 \u00a0 \u00a0 \u00a0 public_id<\/span>: `videos\/${Date<\/span>.now()}<\/span>`<\/span>,\n\n\u00a0 \u00a0 }\n\n\u00a0 );\n\n\u00a0 url = uploadResult.secure_url;\n\n\u00a0} catch<\/span> (error: any) {\n\n\u00a0 console<\/span>.error(error);\n\n}\n\nredirect(url);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The video file is first converted from a Buffer into a Base64-encoded string because this is what the Cloudinary uploader method expects, using the video’s MIME (Multipurpose Internet Mail Extensions) type and binary data via Buffer.toString('base64')<\/code>, and prefixed with a data URI (Uniform Resource Identifier) scheme to create a valid Base64 string. This string is then uploaded to Cloudinary using the cloudinary.uploader.upload<\/code> method, with the resource_type<\/code> option set to “video” to ensure proper handling of the video file.<\/p>\n\n\n\n
The transformation option is where the actual transformation of the video is done. The video is cropped to the aspect ratio retrieved from the form and a unique identifier is generated using the current timestamp to ensure that each uploaded video is unique and it is set to the public_id<\/code>.<\/strong><\/p>\n\n\n\n
After the video is successfully uploaded and processed, the result returned by Cloudinary (uploadResult<\/code>) includes the secure URL (uploadResult.secure_url<\/code>) pointing to the uploaded video which is stored in the url<\/code> variable.\u00a0<\/p>\n\n\n\n
Finally, the app is redirected to the uploaded video’s URL using the redirect (url<\/code>) function.<\/p>\n\n\n\n
Final Code Snippet<\/h2>\n\n\n\n
Your final code for the upload and process functionality in page.tsx<\/code> file should look like this:<\/p>\n\n\n
\/\/src\/app\/page.tsx<\/span>\n\nimport<\/span> styles from<\/span> '.\/page.module.css'<\/span>;\n\nimport<\/span> { UploadApiResponse } from<\/span> 'cloudinary'<\/span>;\n\nimport<\/span> cloudinary from<\/span> '@\/lib\/cloudinary'<\/span>;\n\nimport<\/span> { redirect } from<\/span> 'next\/navigation'<\/span>;\n\nimport<\/span> { SubmitButton } from<\/span> '.\/submit-button'<\/span>;\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n\n\u00a0 const<\/span> handleSubmit = async<\/span> (formData: FormData) => {\n\n\u00a0 \u00a0 'use server'<\/span>;\n\n\u00a0 \u00a0 const<\/span> file = formData.get('video'<\/span>) as<\/span> File;\n\n\u00a0 \u00a0 const<\/span> aspect_ratio = formData.get('format'<\/span>) as<\/span> string;\n\n\u00a0 \u00a0 const<\/span> buffer: Buffer = Buffer.from(await<\/span> file.arrayBuffer());\n\n\u00a0 \u00a0 let<\/span> url: string = ''<\/span>;\n\n\u00a0 \u00a0 try<\/span> {\n\n\u00a0 \u00a0 \u00a0 const<\/span> base64Image: string = `data:${file.type}<\/span>;base64,${buffer.toString(\n\n\u00a0 \u00a0 \u00a0 \u00a0 'base64'<\/span>\n\n\u00a0 \u00a0 \u00a0 )}<\/span>`<\/span>;\n\n\u00a0 \u00a0 \u00a0 const<\/span> uploadResult: UploadApiResponse = await<\/span> cloudinary.uploader.upload(\n\n\u00a0 \u00a0 \u00a0 \u00a0 base64Image,\n\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 resource_type<\/span>: 'video'<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transformation<\/span>: [{ aspect_ratio, crop<\/span>: 'fill'<\/span> }],\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 public_id<\/span>: `videos\/${Date<\/span>.now()}<\/span>`<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 );\n\n\u00a0 \u00a0 \u00a0 url = uploadResult.secure_url;\n\n\u00a0 \u00a0 } catch<\/span> (error: any) {\n\n\u00a0 \u00a0 \u00a0 console<\/span>.error(error);\n\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 redirect(url);\n\n\u00a0 };\n\n\u00a0 return<\/span> (\n\n\u00a0 \u00a0...\n\n\u00a0 );\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The Final Result<\/h1>\n\n\n\n
When you run the application, you can select a video to upload and choose from a list of aspect ratios to crop the video. The video is then sent to Cloudinary, and the transformation is done. Once that\u2019s completed, your app will redirect to the transformed video as shown in the demo below.<\/p>\n\n\n\n      <\/video>\n    <\/cld-video-player>\n\n\n
Resources<\/h1>\n\n\n\n
Conclusion<\/h1>\n\n\n\n
In this blog post, you learned how to use Next.js and the powerful media tools provided by Cloudinary to build a simple video transformation app. The Cloudinary video management library<\/a> is an incredible resource for even more video transformations. <\/p>\n\n\n\n
Try extending this app to support more aspect ratios and gain access to even more enhancements with Cloudinary\u2019s video solution<\/a>. You can also explore reusing the same video with on-the-fly aspect ratio transformations for multiple social media platforms.<\/p>\n\n\n\n
If you enjoyed this post and want to discuss it in more detail, join the Cloudinary Community forum<\/a> and its associated Discord<\/a>.<\/p>\n\n\n\n
If errors occur during this process, they\u2019re caught in the catch block and logged to the console. Learn more about Cloudinary asset upload<\/a> in the documentation.<\/p>\n\n\n\n
To get these details, 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