{"id":36485,"date":"2025-01-03T07:00:00","date_gmt":"2025-01-03T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36485"},"modified":"2024-12-20T18:47:59","modified_gmt":"2024-12-21T02:47:59","slug":"low-size-tiktok-video","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/low-size-tiktok-video","title":{"rendered":"Automatically Generate a Low-Size TikTok Video From an Original Video"},"content":{"rendered":"\n

Creating engaging TikTok<\/a> videos isn\u2019t just about creativity; it\u2019s about keeping up with fleeting trends. With over a billion active users<\/a> on TikTok, every second counts. A slow-loading video can lose viewers’ attention in an instant, leading to lower engagement and higher data usage. <\/p>\n\n\n\n

This blog post shows you how to automatically generate low-size, high-quality, TikTok-ready videos using Cloudinary\u2019s on-the-fly transformations<\/a> and Next.js.<\/p>\n\n\n\n

You can see the complete code in this GitHub repository<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Setting Up Cloudinary and Next.js<\/h2>\n\n\n\n

If you don\u2019t have a Next.js project already, run the following command to get it up and running quickly:<\/p>\n\n\n

npx<\/span> create-next-app<\/span>@latest<\/span> video-optimization-demo\n\ncd video-optimization-demo<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\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
\"\"<\/figure>\n\n\n\n
Next, create a .env.local<\/code> file in the root of your project to securely store these credentials:<\/p>\n\n\n
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name\n\nNEXT_PUBLIC_CLOUDINARY_API_KEY=your_api_key\n\nCLOUDINARY_API_SECRET=your_api_secret<\/code><\/span><\/pre>\n\n\n
Finally, create a lib folder in your project’s root and a cloudinary.ts<\/code> file in it to initialize and configure Cloudinary using the credentials stored in your .env.local<\/code> file.<\/p>\n\n\n
\/\/ lib\/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\u00a0 secure<\/span>: true<\/span>,\n\n});\n\nexport<\/span> default<\/span> cloudinary;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This setup above lets you easily interact with Cloudinary\u2019s API throughout your app.<\/p>\n\n\n\n
Step 1: Create the Video Upload Form<\/strong><\/h3>\n\n\n\n
First, create a form that allows users to select and upload a video. You\u2019ll then handle the form submission via a server action in Next.js to optimize the video.<\/p>\n\n\n\n
Here\u2019s the form, you can copy this code into your page.tsx<\/code> file in the app folder:<\/p>\n\n\n
\/\/ app\/page.tsx<\/span>\n\n'use client'<\/span>;\n\nimport<\/span> { useState } from<\/span> 'react'<\/span>;\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n\n\u00a0 \u00a0 const<\/span>[loading, setLoading]= useState(false<\/span>);\n\n\u00a0 \u00a0 const<\/span> handleSubmit = async<\/span> (event: React.FormEvent<HTMLFormElement>)=>{\n\n\u00a0 \u00a0 \u00a0 \u00a0 event.preventDefault();\n\n\u00a0 \u00a0 \u00a0 \u00a0 setLoading(true<\/span>);\n\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Get the file from the form<\/span>\n\nconst<\/span> formData =new<\/span> FormData(event.currentTarget);\n\n\u00a0 \u00a0 \u00a0 \u00a0 try<\/span> {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Upload the video to Cloudinary<\/span>\n\n} catch<\/span> (error){\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console<\/span>.error('Upload failed:'<\/span>, error);\n\n} finally<\/span> {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 setLoading(false<\/span>);\n\n}\n\n};\n\n\u00a0 \u00a0 return<\/span> (\n\n\u00a0 \u00a0 \u00a0 \u00a0 <div<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h1<\/span>><\/span>Generate Optimzed TikTok Video with Cloudinary<\/h1<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <form<\/span> onSubmit<\/span>={handleSubmit}<\/span>><\/span>\n\n\u00a0 \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 \u00a0 \u00a0 <button<\/span> type<\/span>=\"submit\"<\/span> disabled<\/span>={loading}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {loading ? 'Uploading...' : 'Upload Video'}\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/form<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div<\/span>><\/span><\/span>\n\n\u00a0 \u00a0 );\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Step 2: Handle Video Upload With Server Action<\/strong><\/h3>\n\n\n\n
Next, create an upload.ts file in the app folder to handle video uploads to Cloudinary. This server action will receive the video and upload it to Cloudinary.<\/p>\n\n\n\n
In the upload.ts<\/code> file, add the following code:<\/p>\n\n\n
\/\/ app\/upload.ts<\/span>\n\n'use server'<\/span>;\n\nimport<\/span> cloudinary from<\/span> '..\/lib\/cloudinary'<\/span>;\n\nexport<\/span> async<\/span> function<\/span> upload<\/span>(formData: FormData<\/span>) <\/span>{\n\n\u00a0 \u00a0 const<\/span> file = formData.get('video'<\/span>) as<\/span> File;\n\n\u00a0 \u00a0 const<\/span> buffer: Buffer = Buffer.from(await<\/span> file.arrayBuffer());\n\n\u00a0 \u00a0 \/\/ Sanitize the public_id (file name) if needed<\/span>\n\n\u00a0 \u00a0 const<\/span> safePublicId = file.name.replace(\/[^a-zA-Z0-9-_]\/g<\/span>,'_'<\/span>);\n\n\u00a0 \u00a0 const<\/span> uploadResponse = await<\/span> new<\/span> Promise<\/span><{\n\n\u00a0 \u00a0 \u00a0 \u00a0 secure_url<\/span>: string;\n\n\u00a0 \u00a0 \u00a0 \u00a0 public_id: string;\n\n}>((resolve, reject<\/span>)=><\/span>{\n\n\u00a0 \u00a0 \u00a0 \u00a0 cloudinary.uploader\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 .upload_stream(\n\n{\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 resource_type<\/span>:'video'<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 public_id<\/span>: safePublicId,\n\n},\n\n(error, result)=>{\n\nif<\/span>(error){\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 reject(error);\n\n}elseif(result){\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 resolve(result);\n\n}else<\/span>{\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 reject(new<\/span> Error<\/span>('Upload result is undefined'<\/span>));\n\n}\n\n}\n\n)\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 .end(buffer);\n\n});\n\n\u00a0 \u00a0 console<\/span>.log(uploadResponse.secure_url);\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the code above:<\/p>\n\n\n\n
Uploading Video to Cloudinary With Next.js<\/h2>\n\n\n\n
With the introduction of server actions<\/a> in Next.js 13, you can handle video uploads and optimization directly on the server side, keeping the logic cleaner and more efficient. <\/p>\n\n\n\n
Let\u2019s dive into how you can upload unoptimized videos to Cloudinary.<\/p>\n\n\n\n
To connect your app to Cloudinary, you\u2019ll need your Cloudinary API credentials. Go to your Cloudinary dashboard<\/a> and grab your cloud name<\/strong>, API key<\/strong>, and API secret<\/strong>, as shown below.<\/p>\n\n\n\n
Next, install the Cloudinary Node.js SDK<\/a>, which will allow you to interact with Cloudinary\u2019s API directly from your app and give you access to all its transformation and optimization features.<\/p>\n\n\n