{"id":27908,"date":"2022-05-05T08:28:41","date_gmt":"2022-05-05T08:28:41","guid":{"rendered":"http:\/\/handle-quick-ai-text-detection-in-images-in-nextjs"},"modified":"2025-02-21T14:03:09","modified_gmt":"2025-02-21T22:03:09","slug":"handle-quick-ai-text-detection-in-images-in-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/","title":{"rendered":"Handle Quick AI Text Detection in Images in Next.js"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Artificial intelligence (AI) has dramatically improved over the years. Before there was widespread access to AI technology, if you wanted to copy text from another document or image, you had to manually type or write it, which could be very stressful and time-consuming. Now it is possible to automate such a task with <a href=\"https:\/\/en.wikipedia.org\/wiki\/Optical_character_recognition\">Optical Character R<\/a><a href=\"https:\/\/en.wikipedia.org\/wiki\/Optical_character_recognition\">ecognition<\/a> <a href=\"https:\/\/en.wikipedia.org\/wiki\/Optical_character_recognition\">(OCR)<\/a>.<\/p>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/Optical_character_recognition\">Optical Character Recognition<\/a> is the ability to detect and convert text from digital images and documents into machine-readable text. A standard OCR software typically uses AI to enhance its capabilities by detecting language, writing style, and context.<\/p>\n<p><a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> &#8211; a cloud-based media management service that enables you to store, transform, manipulate and deliver your images and videos &#8211; also provides an <a href=\"https:\/\/cloudinary.com\/documentation\/ocr_text_detection_and_extraction_addon\">OCR add-on<\/a> for text detection and extraction.<\/p>\n<p>This article will teach you how to implement Cloudinary\u2019s OCR add-on in your Next.js project to detect and extract text from images.<\/p>\n<h2>CodeSandbox &amp; GitHub Repo<\/h2>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/inspiring-mountain-41wj8y?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"AI text detection\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><p>Click the link below to view a complete demo of this article on CodeSandbox:<\/p>\n<p><a href=\"https:\/\/codesandbox.io\/embed\/inspiring-mountain-41wj8y?fontsize=14&amp;hidenavigation=1&amp;theme=dark\">https:\/\/codesandbox.io\/embed\/inspiring-mountain-41wj8y?fontsize=14&amp;hidenavigation=1&amp;theme=dark<\/a><\/p>\n<p>To view the source code on GitHub, click <a href=\"https:\/\/github.com\/dpkreativ\/nextjs-ocr-demo\">here<\/a>.<\/p>\n<h2>Pre-requisites<\/h2>\n<p>To understand the concepts in this article, you will need the following:<\/p>\n<ul>\n<li>Experience with JavaScript and React<\/li>\n<li>\n<a href=\"https:\/\/classic.yarnpkg.com\/en\/docs\/install\">Yarn<\/a> installed on your PC, you will need <a href=\"https:\/\/nodejs.org\/\">Node.js<\/a>, which comes with <a href=\"https:\/\/www.npmjs.com\/\">NPM<\/a>\n<\/li>\n<li>A Cloudinary account, create a free one <a href=\"https:\/\/cloudinary.com\/console\">here<\/a>\n<\/li>\n<li>Knowledge of <a href=\"https:\/\/nextjs.org\/\">Next.js<\/a> will be good, but it is not strictly required<\/li>\n<\/ul>\n<h2>Set up the project<\/h2>\n<p>Open your terminal, navigate to your preferred directory and run the command below to quickly set up the project:<\/p>\n<pre><code>yarn create next-app nextjs-ocr-demo -e https:\/\/github.com\/dpkreativ\/nextjs-ocr-starter\n<\/code><\/pre>\n<p>The command above will create a new Next.js project named <code>nextjs-ocr-demo<\/code>, download the starter files for this demo from GitHub and install its dependencies.<\/p>\n<p>After its successful installation, open the project in your preferred code editor and run the command below in its terminal:<\/p>\n<pre><code>yarn dev\n<\/code><\/pre>\n<p>You can now view the project on your browser at <code>localhost:3000<\/code>.<\/p>\n<h2>Register Cloudinary\u2019s OCR add-on<\/h2>\n<p>Navigate to your <a href=\"https:\/\/cloudinary.com\/console\">Cloudinary dashboard<\/a> in your browser and click on the \u201cAdd-ons\u201d tab, then scroll down till you locate \u201cOCR Text Detection and Extraction\u201d:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_DD1DAD5703B5B11CEEF2FAA697C95A56B2FF78C633CDE6131924B10DA3D317C3_1651139955444_Screenshot+2022-04-18+112715_LI.jpg\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"608\"\/><\/p>\n<p>Click on the card, and click on \u201cFree\u201d to get 50 monthly OCR detections for free:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_DD1DAD5703B5B11CEEF2FAA697C95A56B2FF78C633CDE6131924B10DA3D317C3_1651140085846_Screenshot+2022-04-18+115903_LI.jpg\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1047\" height=\"496\"\/><\/p>\n<h2>Install Cloudinary\u2019s SDK<\/h2>\n<p>In your project\u2019s terminal, run the command below to install Cloudinary\u2019s SDK, which you will use to implement the OCR add-on:<\/p>\n<pre><code>yarn add cloudinary\n<\/code><\/pre>\n<h2>Set up environment variables<\/h2>\n<p>In the root folder of your project, create a <code>.env.local<\/code> file and add the following code to it:<\/p>\n<pre><code>CLOUDINARY_NAME=&lt;YOUR CLOUDINARY CLOUD NAME COMES HERE&gt;\nCLOUDINARY_KEY=&lt;YOUR CLOUDINARY API KEY COMES HERE&gt;\nCLOUDINARY_SECRET=&lt;YOUR CLOUDINARY API SECRET COMES HERE&gt;\n<\/code><\/pre>\n<p>You will copy your Cloudinary \u201cCloud Name\u201d, \u201cAPI Key\u201d, and \u201cAPI Secret\u201d from your Cloudinary dashboard and paste them into the appropriate parts of this file. Navigate to your Cloudinary dashboard to get the data you need:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_DD1DAD5703B5B11CEEF2FAA697C95A56B2FF78C633CDE6131924B10DA3D317C3_1650376559603_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"624\"\/><\/p>\n<p>When you\u2019ve pasted it in, your <code>.env.local<\/code> file will look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_DD1DAD5703B5B11CEEF2FAA697C95A56B2FF78C633CDE6131924B10DA3D317C3_1650376887187_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"574\" height=\"160\"\/><\/p>\n<p>I blurred out my keys for this tutorial.<\/p>\n<p>In your <code>\/pages\/api\/<\/code> folder, create a <code>cloudinaryApi.js<\/code> file and write the code below:<\/p>\n<pre><code>import cloudinary from 'cloudinary';\n\ncloudinary.config({\n  cloud_name: process.env.CLOUDINARY_NAME,\n  api_key: process.env.CLOUDINARY_KEY,\n  api_secret: process.env.CLOUDINARY_SECRET,\n});\n<\/code><\/pre>\n<p>Here you imported <code>cloudinary<\/code>\u2019s module and set its configuration.<\/p>\n<h2>Write API logic to handle text detection<\/h2>\n<p>Update your <code>pages\/api\/cloudinaryApi.js<\/code> file with the code below:<\/p>\n<pre><code>import cloudinary from 'cloudinary';\n\ncloudinary.config({\n  cloud_name: process.env.CLOUDINARY_NAME,\n  api_key: process.env.CLOUDINARY_KEY,\n  api_secret: process.env.CLOUDINARY_SECRET,\n});\n\nexport default (request, response) =&gt; {\n  const image = request.body;\n\n  return cloudinary.v2.uploader.upload(\n    image, { ocr: 'adv_ocr' }, (error, result) =&gt; {\n      if (error) return response.status(500).json({ error });\n\n      const { textAnnotations } = result.info.ocr.adv_ocr.data[0];\n\n      const extractedText = textAnnotations\n        .map((anno, i) =&gt; i &gt; 0 &amp;&amp; anno.description.replace(\/[^0-9a-z]\/gi, ''))\n        .filter((entry) =&gt; typeof entry === 'string')\n        .join(' ');\n\n      return response.status(200).json({ data: extractedText });\n    }\n  );\n};\n<\/code><\/pre>\n<p>Let\u2019s break this code into bits to understand it:<\/p>\n<pre><code>export default (request, response) =&gt; {\n  const image = request.body;\n};\n<\/code><\/pre>\n<p>Here you created and exported an arrow function that takes in two parameters:<\/p>\n<ul>\n<li>\n<p>The <code>request<\/code> parameter contains the API request\u2019s body from the client-side, which you stored in an <code>image<\/code> variable<\/p>\n<\/li>\n<li>\n<p>Use the <code>response<\/code> parameter to return the result after the API has processed the data given to it<\/p>\n<p>return cloudinary.v2.uploader.upload(\nimage, {ocr: adv_ocr}, (error, result) =&gt; {}\n);<\/p>\n<\/li>\n<\/ul>\n<p>Your arrow function returns an <code>upload<\/code> method from Cloudinary\u2019s <code>uploader<\/code>, which takes in three parameters:<\/p>\n<ul>\n<li>\n<p>The <code>image<\/code> parameter contains the data from your <code>image<\/code> variable. It will be uploaded to Cloudinary for the OCR add-on to process<\/p>\n<\/li>\n<li>\n<p><code>ocr<\/code> parameter is set to <code>adv_ocr<\/code>, which detects text on images. To detect text on documents like PDFs, set it to <code>adv_ocr:document<\/code><\/p>\n<\/li>\n<li>\n<p>Callback function to handle the data after Cloudinary\u2019s OCR has worked on your image. It takes in two parameters: <code>error<\/code> (to set up an error message if the API request fails) and <code>result<\/code>, which contains a JSON object with all the details of the image and its extracted text<\/p>\n<p>if (error) return response.status(500).json({ error });<\/p>\n<\/li>\n<\/ul>\n<p>Here you\u2019re returning a <code>response<\/code> with a status code of <code>500<\/code> and a JSON object with the error message.<\/p>\n<pre><code>const { textAnnotations } = result.info.ocr.adv_ocr.data[0];\n<\/code><\/pre>\n<p>The <code>result<\/code> JSON object contains an <code>ocr<\/code> node under the <code>info<\/code> section.<\/p>\n<ul>\n<li>\n<p>Used object destructuring to access <code>textAnnotations<\/code> present in <code>adv_ocr.data[0]<\/code> (the first element in Cloudinary\u2019s <code>adv_ocr<\/code> engine\u2019s <code>data<\/code> array)<\/p>\n<\/li>\n<li>\n<p><code>textAnnotations<\/code> is an array of objects that contains a <code>description<\/code> key nested in its first object. This <code>description<\/code> contains the extracted text you need.<\/p>\n<p>const extractedText = textAnnotations.map(\n(anno, i) =&gt; i &gt; 0 &amp;&amp; anno.description.replace(\/[^0-9a-z]\/gi, \u2018\u2019)\n).filter((entry) =&gt; typeof entry === \u2018string\u2019).join(\u2019 \u2019);<\/p>\n<\/li>\n<\/ul>\n<p>Here:<\/p>\n<ul>\n<li>\n<p>Mapped through <code>textAnnotations<\/code>, replacing all elements that are not <code>0-9<\/code> or <code>a-z<\/code> with an empty string<\/p>\n<\/li>\n<li>\n<p>Filtered through your resulting array, selecting only string elements<\/p>\n<\/li>\n<li>\n<p>Joined the array elements to form a string of words separated by spaces and stored it in the <code>extractedText<\/code> variable<\/p>\n<p>return response.status(200).json({ data: extractedText });<\/p>\n<\/li>\n<\/ul>\n<p>Finally, you returned a <code>response<\/code> with a status code of <code>200<\/code> to show that it was successful and a JSON object containing the <code>extractedText<\/code> variable as a <code>data<\/code> value.<\/p>\n<h2>Update the handleSubmit function<\/h2>\n<p>In your <code>pages\/index.js<\/code> file, locate and update the <code>handleSubmit<\/code> function with the code below:<\/p>\n<pre><code>\/\/ OnSubmit function\n  const handleOnSubmit = async (e) =&gt; {\n    e.preventDefault();\n    setLoading(true);\n\n    try {\n      const { data } = await fetch('\/api\/cloudinaryApi', {\n        method: 'POST',\n        body: imageSrc,\n      }).then((response) =&gt; response.json());\n\n      console.log(data);\n      setExtractedText(data);\n      setLoading(false);\n\n    } catch (error) {\n      console.log(error);\n      setLoading(false);\n    }\n  };\n<\/code><\/pre>\n<p>In the code above:<\/p>\n<ul>\n<li>Used <code>setLoading(true)<\/code> to trigger the loading state of your <code>Detect text<\/code> button<\/li>\n<li>Implemented a <code>try-catch<\/code> block to handle your API calls and any errors you might encounter on the client-side<\/li>\n<li>In the <code>try<\/code> section:\n<ul>\n<li>Used the <code>fetch<\/code> method to send your image data URL to your API, and object destructuring to get <code>data<\/code> from <code>response.json()<\/code>\n<\/li>\n<li>\n<code>setExtractedText(data)<\/code> updates the state of <code>extractedText<\/code> with the text from <code>data<\/code>\n<\/li>\n<li>Use <code>setLoading(false)<\/code> to turn off the loading state of your <code>Detect text<\/code> button<\/li>\n<\/ul>\n<\/li>\n<li>Logged your error to the console in the <code>catch<\/code> section and set the loading state to <code>false<\/code>\n<\/li>\n<\/ul>\n<p>When you test your demo app in your browser, you will see something similar to this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_DD1DAD5703B5B11CEEF2FAA697C95A56B2FF78C633CDE6131924B10DA3D317C3_1650417962769_image.png\" alt=\"Final product\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"924\" height=\"471\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>This article taught you how to detect and extract text from images using Cloudinary\u2019s OCR add-on. For an in-depth knowledge of how the OCR add-on works, please look at its <a href=\"https:\/\/cloudinary.com\/documentation\/ocr_text_detection_and_extraction_addon\">official documentation<\/a>.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/www.youtube.com\/watch?v=FXsfFctdnFA\">Optical Character Recognition using NodeJS + Cloudinary &#8211; YouTube<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.youtube.com\/watch?v=I_jzRrfyhGk&amp;t=296s\">YouTube &#8211; Creating APIs in NextJS<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/spacejelly.dev\/posts\/how-to-programmatically-upload-images-to-cloudinary-in-react-next-js\/\">How To Programmatically Upload Images to Cloudinary with NextJS<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27909,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,212,371],"class_list":["post-27908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-next-js","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Handle Quick AI Text Detection in Images in Next.js<\/title>\n<meta name=\"description\" content=\"This article will teach you how to implement Cloudinary\u2019s OCR add-on in your Next.js project to detect and extract text from images.\" \/>\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\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Handle Quick AI Text Detection in Images in Next.js\" \/>\n<meta property=\"og:description\" content=\"This article will teach you how to implement Cloudinary\u2019s OCR add-on in your Next.js project to detect and extract text from images.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-05T08:28:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-21T22:03:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681933255\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"840\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Handle Quick AI Text Detection in Images in Next.js\",\"datePublished\":\"2022-05-05T08:28:41+00:00\",\"dateModified\":\"2025-02-21T22:03:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681933255\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Next.js\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/\",\"name\":\"Handle Quick AI Text Detection in Images in Next.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681933255\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0.png?_i=AA\",\"datePublished\":\"2022-05-05T08:28:41+00:00\",\"dateModified\":\"2025-02-21T22:03:09+00:00\",\"description\":\"This article will teach you how to implement Cloudinary\u2019s OCR add-on in your Next.js project to detect and extract text from images.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681933255\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681933255\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0.png?_i=AA\",\"width\":1600,\"height\":840},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Handle Quick AI Text Detection in Images in Next.js\"}]},{\"@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\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Handle Quick AI Text Detection in Images in Next.js","description":"This article will teach you how to implement Cloudinary\u2019s OCR add-on in your Next.js project to detect and extract text from images.","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\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/","og_locale":"en_US","og_type":"article","og_title":"Handle Quick AI Text Detection in Images in Next.js","og_description":"This article will teach you how to implement Cloudinary\u2019s OCR add-on in your Next.js project to detect and extract text from images.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-05-05T08:28:41+00:00","article_modified_time":"2025-02-21T22:03:09+00:00","og_image":[{"width":1600,"height":840,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681933255\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/"},"author":{"name":"","@id":""},"headline":"Handle Quick AI Text Detection in Images in Next.js","datePublished":"2022-05-05T08:28:41+00:00","dateModified":"2025-02-21T22:03:09+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681933255\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0.png?_i=AA","keywords":["Guest Post","Image","Next.js","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/","name":"Handle Quick AI Text Detection in Images in Next.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681933255\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0.png?_i=AA","datePublished":"2022-05-05T08:28:41+00:00","dateModified":"2025-02-21T22:03:09+00:00","description":"This article will teach you how to implement Cloudinary\u2019s OCR add-on in your Next.js project to detect and extract text from images.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681933255\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681933255\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0.png?_i=AA","width":1600,"height":840},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Handle Quick AI Text Detection in Images in Next.js"}]},{"@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":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681933255\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-1_27909e57b0.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27908","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\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27908"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27908\/revisions"}],"predecessor-version":[{"id":36907,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27908\/revisions\/36907"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27909"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}