{"id":34663,"date":"2024-07-11T07:00:00","date_gmt":"2024-07-11T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=34663"},"modified":"2025-03-09T07:26:02","modified_gmt":"2025-03-09T14:26:02","slug":"video-snipper-tiktok-next-js-app-router","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router","title":{"rendered":"Create a Video Snipper for TikTok in Next.js App Router"},"content":{"rendered":"\n

TikTok is one of the biggest social media platforms in the world for sharing video content. Users create short-form videos to entertain their viewers, but they often have to find tools to customize and resize their videos to suit TikTok. Imagine building a tool that allows users to customize their videos for the app.<\/p>\n\n\n\n

In this blog post, we\u2019ll learn how to build a simple web app in Next.js that can help users customize their videos to fit platforms like TikTok using Cloudinary\u2019s video management functionalities. <\/p>\n\n\n\n

A basic understanding of TypeScript or JavaScript is enough to follow along with this blog post. You\u2019ll also need a Cloudinary account; create one for free.<\/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

Before we start building the core functionality, let\u2019s set up the Next.js project. We\u2018ll use the Next.js app router for this project because of its modern features, performance, and ability to create server components and actions.<\/p>\n\n\n\n

To begin, clone the starter project using the command below:<\/p>\n\n\n

$ git clone<\/span> https:\/\/github.com\/folucode\/cloudinary-video-snipper-starter.git<\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, navigate to the cloned project directory and install the dependencies using any package manager, either npm install or yarn.<\/p>\n\n\n\n
The starter project folder already has all the styles and components we need to build this app, enabling us to focus on building the core functionality.<\/p>\n\n\n\n
Set Up Environment Variables<\/h1>\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 the app keys we need to use Cloudinary.<\/p>\n\n\n
CLOUDINARY_CLOUD_NAME=<CLOUDINARY_CLOUD_NAME<\/span>><\/span>\nCLOUDINARY_API_KEY=<CLOUDINARY_API_KEY<\/span>><\/span>\nCLOUDINARY_API_SECRET=<CLOUDINARY_API_SECRET<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Build App Functionality<\/h1>\n\n\n\n
Now that we\u2019re all set up, let\u2019s start building the functionality. First, we want to set up our Cloudinary library. To do this, we\u2019ll add a new folder called lib<\/code> in the src<\/code> folder; in that folder, we add a file and name it cloudinary.ts<\/code>. In the cloudinary.ts<\/code> file, we\u2019ll set up Cloudinary like so:<\/p>\n\n\n
import<\/span> { v2 as<\/span> cloudinary } from<\/span> 'cloudinary'<\/span>;\n\ncloudinary.config({\n  cloud_name<\/span>: process.env.CLOUDINARY_CLOUD_NAME,\n  api_key<\/span>: process.env.CLOUDINARY_API_KEY,\n  api_secret<\/span>: process.env.CLOUDINARY_API_SECRET,\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, we\u2019ll import the Cloudinary library. The v2<\/strong> version is being used and aliased as cloudinary<\/strong>. The cloudinary.config()<\/strong> method is called to configure the Cloudinary client with the account details we retrieved from our dashboard in the last section.<\/p>\n\n\n\n
We\u2019ll then export the configured Cloudinary<\/strong> object as this module’s default export. This setup allows other parts of our application to import and use the configured Cloudinary client without configuring it again.<\/p>\n\n\n\n
Get Form Data<\/h2>\n\n\n\n
Before we begin, add these import statements to the top of the VideoUploadForm.tsx<\/code> file.<\/p>\n\n\n
import<\/span> { redirect } from<\/span> 'next\/navigation'<\/span>;\nimport<\/span> cloudinary from<\/span> '..\/lib\/cloudinary'<\/span>;\nimport<\/span> { UploadApiResponse } from<\/span> 'cloudinary'<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
There\u2019s a function called upload<\/strong> in the VideoUploadForm.tsx<\/code> file in the app folder under the src folder. In that upload<\/strong> function, the first step is to get the data from the form.<\/p>\n\n\n
<span<\/span> style<\/span>=\"background-color: initial; color: inherit; font-size: inherit; text-wrap: wrap;\"<\/span>><\/span>\u00a0 'use server';<\/span<\/span>><\/span><div<\/span>><\/span><code<\/span> spellcheck<\/span>=\"false\"<\/span> class<\/span>=\"listtype-code listindent1 list-code1 lang-typescript\"<\/span>><\/span><\/code<\/span>><\/span><code<\/span> spellcheck<\/span>=\"false\"<\/span> class<\/span>=\"listtype-code listindent1 list-code1 lang-typescript\"<\/span>><\/span><span<\/span> class<\/span>=\" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovwitz89zz76zcsz82zz84zluz65zz73zz84zz69zwpz71zcz87z0z73zz70zhz82ziz90z4oz78zz82z\"<\/span>><\/span>\u00a0 const file = <i<\/span>><\/span>formData<\/i<\/span>><\/span>.get('video') as File;\u00a0 const start = <i<\/span>><\/span>formData<\/i<\/span>><\/span>.get('start') as string;\u00a0 const end = <i<\/span>><\/span>formData<\/i<\/span>><\/span>.get('end') as string;<\/span<\/span>><\/span><\/code<\/span>><\/span><code<\/span> spellcheck<\/span>=\"false\"<\/span> class<\/span>=\"listtype-code listindent1 list-code1 lang-typescript\"<\/span>><\/span><\/code<\/span>><\/span><code<\/span> spellcheck<\/span>=\"false\"<\/span> class<\/span>=\"listtype-code listindent1 list-code1 lang-typescript\"<\/span>><\/span><span<\/span> class<\/span>=\" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovwitz89zz76zcsz82zz84zluz65zz73zz84zz69zwpz71zcz87z0z73zz70zhz82ziz90z4oz78zz82z\"<\/span>><\/span>\u00a0 const buffer: Buffer = Buffer.from(await file.arrayBuffer());<\/span<\/span>><\/span><\/code<\/span>><\/span><code<\/span> spellcheck<\/span>=\"false\"<\/span> class<\/span>=\"listtype-code listindent1 list-code1 lang-typescript\"<\/span>><\/span><\/code<\/span>><\/span><code<\/span> spellcheck<\/span>=\"false\"<\/span> class<\/span>=\"listtype-code listindent1 list-code1 lang-typescript\"<\/span>><\/span><span<\/span> class<\/span>=\" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovwitz89zz76zcsz82zz84zluz65zz73zz84zz69zwpz71zcz87z0z73zz70zhz82ziz90z4oz78zz82z\"<\/span>><\/span>\u00a0 let url: string = '';<\/span<\/span>><\/span><\/code<\/span>><\/span><\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
We\u2019ll then move on to handling the data from the form submission. First, we\u2019ll retrieve the video file from the form data and cast it as a File<\/strong> object. Then, we\u2019ll get the start and end times from the form, casting these values as strings. <\/p>\n\n\n\n
Next, we\u2019ll convert the video file into a binary Buffer<\/strong> by reading the file’s content as an ArrayBuffer<\/strong> and then converting this Buffer into a Buffer<\/strong> object using Buffer.from()<\/strong>. This conversion is necessary for efficiently handling the binary data of the video file on the server. <\/p>\n\n\n\n
Finally, we\u2019ll initialize an empty string variable url<\/strong>, which will store the URL of the processed video.<\/p>\n\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, apply specific transformations, and then redirect our app to the processed video URL. <\/p>\n\n\n\n
The process will be done within a try-catch<\/strong> block in the upload <\/strong>function, in the VideoUploadForm.tsx<\/code> file, which ensures that any errors during the upload process are caught and logged for debugging purposes.<\/p>\n\n\n
\ntry<\/span> {\n  const<\/span> base64Image: string = `data:${file.type}<\/span>;base64,${buffer.toString(\n    'base64'<\/span>\n  )}<\/span>`<\/span>;\n\n  const<\/span> uploadResult: UploadApiResponse = await<\/span> cloudinary.uploader.upload(\n    base64Image,\n    {\n      resource_type<\/span>: 'video'<\/span>,\n      transformation<\/span>: [\n        { start_offset<\/span>: start, end_offset<\/span>: end },\n        { aspect_ratio<\/span>: '9:16'<\/span>, crop<\/span>: 'fill'<\/span> },\n      ],\n      public_id<\/span>: `video-snippets\/${Date<\/span>.now()}<\/span>`<\/span>,\n    }\n  );\n\n  url = uploadResult.secure_url;\n } catch<\/span> (error: any) {\n  console<\/span>.error(error);\n}\n\nredirect(url);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
First, we\u2019ll convert the video file from Buffer into a Base64-encoded string. We\u2019ll construct the string using the video file’s MIME type (file.type) and binary data (Buffer). The buffer object, previously created by converting the video file to a binary buffer, is transformed into a Base64 string using Buffer.toString(‘base64’)<\/strong>. We\u2019ll then prefix the Base64 string with the data URI scheme to form a valid Base64 image string, which is necessary for uploading to Cloudinary.<\/p>\n\n\n\n
Next, upload the Base64-encoded video to Cloudinary using the upload method we set up from the Cloudinary client (cloudinary.uploader.upload<\/code>). This method takes two main parameters: the Base64 string of the video and an options object. Within the options object, the resource_type<\/strong> is set to video<\/code> to indicate that the file being uploaded is a video.\u00a0<\/p>\n\n\n\n
The transformation<\/strong> option is where we do the actual transformation of the video. In this case, we\u2019ll trim the video to the specified start and end times ({ start_offset: start, end_offset: end }<\/code>) gotten from the form data, and we adjust its aspect ratio to 9:16 while cropping it to fill the frame ({ aspect_ratio: '9:16', crop: 'fill' }<\/code>). This aspect ratio is used in TikTok videos.<\/p>\n\n\n\n
Additionally, we\u2019ll set public_id<\/strong> to a unique identifier generated using the current timestamp to ensure that each uploaded video has a unique identifier in Cloudinary. <\/p>\n\n\n\n
After the video has successfully uploaded, the result returned by Cloudinary (uploadResult<\/code>) includes the secure URL (uploadResult.secure_url<\/code>) pointing to the uploaded video. We\u2019ll then store this URL in the url variable.\u00a0<\/p>\n\n\n\n
If errors occur during this process, they\u2019re caught in the catch block and logged to the console.<\/p>\n\n\n\n
Finally, we\u2019ll redirect 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
Our final code snippet in the VideoUploadForm.tsx<\/code> file should look like this:<\/p>\n\n\n
\nimport<\/span> { redirect } from<\/span> 'next\/navigation'<\/span>;\nimport<\/span> cloudinary from<\/span> '..\/lib\/cloudinary'<\/span>;\nimport<\/span> { UploadApiResponse } from<\/span> 'cloudinary'<\/span>;\nimport<\/span> { SubmitButton } from<\/span> '@\/app\/submit-button'<\/span>;\nimport<\/span> formStyles from<\/span> '.\/form.module.css'<\/span>;\n\nexport<\/span> default<\/span> function<\/span> VideoUploadForm<\/span>(<\/span>) <\/span>{\n  async<\/span> function<\/span> upload<\/span>(formData: FormData<\/span>) <\/span>{\n    'use server'<\/span>;\n\n    const<\/span> file = formData.get('video'<\/span>) as<\/span> File;\n    const<\/span> start = formData.get('start'<\/span>) as<\/span> string;\n    const<\/span> end = formData.get('end'<\/span>) as<\/span> string;\n    const<\/span> buffer: Buffer = Buffer.from(await<\/span> file.arrayBuffer());\n\n    let<\/span> url: string = ''<\/span>;\n\n    try<\/span> {\n      const<\/span> base64Image: string = `data:${file.type}<\/span>;base64,${buffer.toString(\n        'base64'<\/span>\n      )}<\/span>`<\/span>;\n\n      const<\/span> uploadResult: UploadApiResponse = await<\/span> cloudinary.uploader.upload(\n        base64Image,\n        {\n          resource_type<\/span>: 'video'<\/span>,\n          transformation<\/span>: [\n            { start_offset<\/span>: start, end_offset<\/span>: end },\n            { aspect_ratio<\/span>: '9:16'<\/span>, crop<\/span>: 'fill'<\/span> },\n          ],\n          public_id<\/span>: `video-snippets\/${Date<\/span>.now()}<\/span>`<\/span>,\n        }\n      );\n\n      url = uploadResult.secure_url;\n    } catch<\/span> (error: any) {\n      console<\/span>.error(error);\n    }\n    redirect(url);\n  }\n\n  return<\/span> (\n  ...\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 we successfully run the application, we can select a video to upload and choose the start and end times to crop. The video is then sent to Cloudinary, and the crop transformation is done. Once that\u2019s completed, our app will redirect to the transformed video.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Here\u2019s the complete source code<\/a>.<\/p>\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 TikTok video-snipping app. The Cloudinary video management library is an incredible resource for even more video transformations. <\/p>\n\n\n\n
Try extending this app to have a dropdown list of video aspect ratios for other video platforms. Users can select a platform and video quality and the video is transformed to fit that specification.<\/p>\n\n\n\n
If you enjoyed this post and want to discuss it in more detail, feel free to join the the Cloudinary Community forum<\/a> and its associated Discord<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
TikTok is one of the biggest social media platforms in the world for sharing video content. Users create short-form videos to entertain their viewers, but they often have to find tools to customize and resize their videos to suit TikTok. Imagine building a tool that allows users to customize their videos for the app. In […]<\/p>\n","protected":false},"author":87,"featured_media":34667,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[212,303,304],"class_list":["post-34663","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-next-js","tag-video","tag-video-transformation"],"acf":[],"yoast_head":"\nCreate a Video Snipper for TikTok in Next.js App Router<\/title>\n<meta name=\"description\" content=\"Follow step-by-step instructions to set up a Next.js app, integrate Cloudinary, and handle video uploads and transformations for TikTok.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Video Snipper for TikTok in Next.js App Router\" \/>\n<meta property=\"og:description\" content=\"Follow step-by-step instructions to set up a Next.js app, integrate Cloudinary, and handle video uploads and transformations for TikTok.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-11T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-09T14:26:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1720031861\/cldn_nextjs_tiktok_videos-blog\/cldn_nextjs_tiktok_videos-blog-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Create a Video Snipper for TikTok in Next.js App Router\",\"datePublished\":\"2024-07-11T14:00:00+00:00\",\"dateModified\":\"2025-03-09T14:26:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router\"},\"wordCount\":1204,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1720031861\/cldn_nextjs_tiktok_videos-blog\/cldn_nextjs_tiktok_videos-blog.jpg?_i=AA\",\"keywords\":[\"Next.js\",\"Video\",\"Video Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router\",\"url\":\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router\",\"name\":\"Create a Video Snipper for TikTok in Next.js App Router\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1720031861\/cldn_nextjs_tiktok_videos-blog\/cldn_nextjs_tiktok_videos-blog.jpg?_i=AA\",\"datePublished\":\"2024-07-11T14:00:00+00:00\",\"dateModified\":\"2025-03-09T14:26:02+00:00\",\"description\":\"Follow step-by-step instructions to set up a Next.js app, integrate Cloudinary, and handle video uploads and transformations for TikTok.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1720031861\/cldn_nextjs_tiktok_videos-blog\/cldn_nextjs_tiktok_videos-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1720031861\/cldn_nextjs_tiktok_videos-blog\/cldn_nextjs_tiktok_videos-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Video Snipper for TikTok in Next.js App Router\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create a Video Snipper for TikTok in Next.js App Router","description":"Follow step-by-step instructions to set up a Next.js app, integrate Cloudinary, and handle video uploads and transformations for TikTok.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router","og_locale":"en_US","og_type":"article","og_title":"Create a Video Snipper for TikTok in Next.js App Router","og_description":"Follow step-by-step instructions to set up a Next.js app, integrate Cloudinary, and handle video uploads and transformations for TikTok.","og_url":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router","og_site_name":"Cloudinary Blog","article_published_time":"2024-07-11T14:00:00+00:00","article_modified_time":"2025-03-09T14:26:02+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1720031861\/cldn_nextjs_tiktok_videos-blog\/cldn_nextjs_tiktok_videos-blog-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Create a Video Snipper for TikTok in Next.js App Router","datePublished":"2024-07-11T14:00:00+00:00","dateModified":"2025-03-09T14:26:02+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router"},"wordCount":1204,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1720031861\/cldn_nextjs_tiktok_videos-blog\/cldn_nextjs_tiktok_videos-blog.jpg?_i=AA","keywords":["Next.js","Video","Video Transformation"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router","url":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router","name":"Create a Video Snipper for TikTok in Next.js App Router","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1720031861\/cldn_nextjs_tiktok_videos-blog\/cldn_nextjs_tiktok_videos-blog.jpg?_i=AA","datePublished":"2024-07-11T14:00:00+00:00","dateModified":"2025-03-09T14:26:02+00:00","description":"Follow step-by-step instructions to set up a Next.js app, integrate Cloudinary, and handle video uploads and transformations for TikTok.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1720031861\/cldn_nextjs_tiktok_videos-blog\/cldn_nextjs_tiktok_videos-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1720031861\/cldn_nextjs_tiktok_videos-blog\/cldn_nextjs_tiktok_videos-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/video-snipper-tiktok-next-js-app-router#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create a Video Snipper for TikTok in Next.js App Router"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1720031861\/cldn_nextjs_tiktok_videos-blog\/cldn_nextjs_tiktok_videos-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/34663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=34663"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/34663\/revisions"}],"predecessor-version":[{"id":37179,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/34663\/revisions\/37179"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/34667"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=34663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=34663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=34663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Since we\u2019re using the latest version of Next.js, all components are server components by default. If we want to run an asynchronous function on the server instead of the client, we\u2019ll use Next.js server actions<\/a>. Placing the use server<\/strong> directive at the top of the function signals to Next.js that the enclosed code is meant to run on the server. This prevents the function from being exposed to the client, enhancing security and performance.<\/p>\n\n\n\n
To get these details, click this link<\/a> to navigate to the Cloudinary developer dashboard. We can see all the details under the Product Environment Credentials<\/strong>.<\/p>\n\n\n\n