{"id":28131,"date":"2022-08-17T12:30:15","date_gmt":"2022-08-17T12:30:15","guid":{"rendered":"http:\/\/transform-word-documents-and-slides-into-images-using-next.js-apis"},"modified":"2025-03-30T02:24:02","modified_gmt":"2025-03-30T09:24:02","slug":"transform-word-documents-and-slides-into-images-using-next-js-apis","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/","title":{"rendered":"Transform Documents into Images using Next.js APIs"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>A Word document is an acceptable format for creating documents like letters and reports, including color, clip art, images, videos, or plain words. Over the years, Word documents have become one of the acceptable methods of conveying digital information. But, even with the advancement and adoption, it is still prone to compatibility issues, version history sharing, and metadata sharing, among others.<\/p>\n<p>In this post, we will learn how to transform Word documents to images into a Next.js application using Cloudinary and Aspose.<\/p>\n<h2>Technology Overview<\/h2>\n<p><a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> is a visual media service we use to upload, store, manage, transform, and deliver images and videos for websites and applications.<\/p>\n<p><a href=\"https:\/\/www.aspose.com\/\">Aspose<\/a> is a technology company offering sets of file format APIs that developers can leverage to create, edit, or convert complex to simple file formats.<\/p>\n<p>Cloudinary ships with Aspose as an add-on; part of the image management pipeline, and further extends the upload and transformation capabilities with options to convert Word documents to PDFs and images.<\/p>\n<p>GitHub repository can be found <a href=\"https:\/\/github.com\/Mr-Malomz\/word-to-img\">here<\/a>.<\/p>\n<h2>Sandbox<\/h2>\n<p>We completed this project in a <a href=\"https:\/\/codesandbox.io\/s\/nice-cookies-pbh4go\">CodeSan<\/a><a href=\"https:\/\/codesandbox.io\/s\/nice-cookies-pbh4go\">d<\/a><a href=\"https:\/\/codesandbox.io\/s\/nice-cookies-pbh4go\">box<\/a>. Fork it to run the code.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/nice-cookies-pbh4go?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=\"Transform word documents and slides to images using Next.js APIs\"\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 \"><h2>Prerequisites<\/h2>\n<p>To fully grasp the concepts presented in this tutorial, the following requirements apply:<\/p>\n<ul>\n<li>Basic understanding of JavaScript and React<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> account (Create an account <a href=\"https:\/\/cloudinary.com\/console\">here<\/a>)<\/li>\n<\/ul>\n<h2>Getting started<\/h2>\n<p>We need to create a Next.js starter project by navigating to the desired directory and running the command below in our terminal.<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    npx create-next-app word-to-img &amp;&amp; cd word-to-img\n<\/code><\/span><\/pre>\n<p>The command creates a Next.js project called <code>word-to-img<\/code> and navigates into the project directory.<\/p>\n<p>We proceed to install the required dependencies by running the command below:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    npm install cloudinary multer\n<\/code><\/span><\/pre>\n<p><code>multer<\/code> is a library for handling file uploads.<\/p>\n<p><strong>Configuring Cloudinary<\/strong>\nNext, we need to log into our Cloudinary dashboard, copy Cloudinary\u2019s <strong>cloud name<\/strong>, <strong>API key<\/strong>, and <strong>API secret<\/strong>, and include it in our application. To do this, first, we need to create a .env file in the root directory and in this file, add the snippet below:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">NEXT_PUBLIC_CLOUD_NAME=\/*CLOUD NAME HERE\/*\nNEXT_PUBLIC_API_KEY=\/*UPLOAD API KEY HERE\/*\nNEXT_PUBLIC_API_SECRET=\/*UPLOAD API SECRET HERE\/*\n<\/code><\/span><\/pre>\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_B25D1D83E54DD05D84D4D400E32D66D93F5E53D240FE600D6E698BB81598AEED_1659225761665_Screenshot+2022-07-31+at+01.01.55.png\" alt=\"Cloud Name, API Key, and Secret Highlighted\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1392\" height=\"677\"\/><\/p>\n<p><strong>Enable Cloudinary\u2019s Aspose Add-on<\/strong>\nTo enable the add-on, we need to navigate to the <strong>Add-ons<\/strong> tab and click on the <strong>Aspose<\/strong> option.<\/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_B25D1D83E54DD05D84D4D400E32D66D93F5E53D240FE600D6E698BB81598AEED_1659226743470_Screenshot+2022-07-28+at+10.26.32.png\" alt=\"Click on Aspose Option\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1392\" height=\"677\"\/><\/p>\n<p>Select the <strong>Free<\/strong> plan and <strong>Agree<\/strong> to activate the add-on.<\/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_B25D1D83E54DD05D84D4D400E32D66D93F5E53D240FE600D6E698BB81598AEED_1659226874076_Screenshot+2022-07-28+at+10.27.05.png\" alt=\"Select Free Plan\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1392\" height=\"677\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_B25D1D83E54DD05D84D4D400E32D66D93F5E53D240FE600D6E698BB81598AEED_1659226874086_Screenshot+2022-07-28+at+10.27.55.png\" alt=\"Agree to Plan\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1392\" height=\"677\"\/><\/p>\n<p><strong>PS<\/strong>: <em>For this demo, we selected the<\/em> <em><strong>Free<\/strong><\/em> <em>plan; however, Cloudinary ships with scalable plans to meet medium to enterprise need**s<\/em> <em>at an affordable<\/em> <em>rate.<\/em><\/p>\n<h2>Creating a Word Document Transform Application<\/h2>\n<p>With that done, we can leverage Next.js <a href=\"https:\/\/github.com\/css-modules\/css-modules\">CSS Module<\/a> support to style our page by replacing the content in <code>Home.module.css<\/code> in the <code>styles<\/code> folder with the code snippet below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">    \n\n<span class=\"hljs-selector-class\">.container<\/span> {\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2rem<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.main<\/span> {\n  <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">4rem<\/span> <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n  <span class=\"hljs-attribute\">justify-content<\/span>: center;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n}\n\n<span class=\"hljs-selector-class\">.section<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: grid;\n  <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\">2<\/span>fr;\n}\n\n<span class=\"hljs-selector-class\">.label<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: block;\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">0.6rem<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.fileUpload<\/span> {\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#ccc<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: inline-block;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-number\">12px<\/span>;\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">0.6rem<\/span>;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.description<\/span> {\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">2rem<\/span> <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">1.5<\/span>;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.5rem<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.img<\/span> {\n  <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">6rem<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.button<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: block;\n  <span class=\"hljs-attribute\">border<\/span>: none;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.6rem<\/span> <span class=\"hljs-number\">2rem<\/span>;\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">1rem<\/span> <span class=\"hljs-number\">0rem<\/span>;\n  <span class=\"hljs-attribute\">background-color<\/span>: blue;\n  <span class=\"hljs-attribute\">color<\/span>: white;\n  <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, we need to navigate to the <code>api<\/code> folder inside the <code>pages<\/code> folder to create a dynamic route. To do this, create a <code>convert<\/code> folder, create a <code>[url].js<\/code> file, and add the snippet below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-keyword\">import<\/span> cloudinary <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'cloudinary'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> multer <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'multer'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> config = {\n  <span class=\"hljs-attr\">api<\/span>: {\n    <span class=\"hljs-attr\">bodyParser<\/span>: <span class=\"hljs-literal\">false<\/span>,\n  },\n};\n\n<span class=\"hljs-keyword\">const<\/span> storage = multer.diskStorage({\n  <span class=\"hljs-attr\">destination<\/span>: <span class=\"hljs-string\">'.\/public\/uploads'<\/span>,\n  <span class=\"hljs-attr\">filename<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">req, file, cb<\/span>) =&gt;<\/span> cb(<span class=\"hljs-literal\">null<\/span>, file.originalname),\n});\n\n<span class=\"hljs-keyword\">const<\/span> upload = multer({\n  storage,\n});\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">convert<\/span>(<span class=\"hljs-params\">req, res<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> cld = cloudinary.v2;\n\n  cld.config({\n    <span class=\"hljs-attr\">cloud_name<\/span>: process.env.NEXT_PUBLIC_CLOUD_NAME,\n    <span class=\"hljs-attr\">api_key<\/span>: process.env.NEXT_PUBLIC_API_KEY,\n    <span class=\"hljs-attr\">api_secret<\/span>: process.env.NEXT_PUBLIC_API_SECRET,\n  });\n\n  <span class=\"hljs-keyword\">const<\/span> { url } = req.query;\n\n  <span class=\"hljs-comment\">\/\/set waiting time<\/span>\n  <span class=\"hljs-keyword\">const<\/span> wait = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Promise<\/span>(<span class=\"hljs-function\">(<span class=\"hljs-params\">resolve, reject<\/span>) =&gt;<\/span> {\n      setTimeout(resolve, <span class=\"hljs-number\">5000<\/span>);\n    });\n  };\n\n  upload.single(<span class=\"hljs-string\">'file'<\/span>)(req, {}, (err) =&gt; {\n    <span class=\"hljs-keyword\">const<\/span> filePath = <span class=\"hljs-string\">`.\/public\/uploads\/<span class=\"hljs-subst\">${req.file.originalname}<\/span>`<\/span>;\n\n    cld.uploader\n      .upload(filePath, {\n        <span class=\"hljs-attr\">resource_type<\/span>: <span class=\"hljs-string\">'raw'<\/span>,\n        <span class=\"hljs-attr\">raw_convert<\/span>: <span class=\"hljs-string\">'aspose'<\/span>,\n        <span class=\"hljs-attr\">notification_url<\/span>: <span class=\"hljs-string\">`http:\/\/<span class=\"hljs-subst\">${url}<\/span>`<\/span>,\n      })\n      .then(<span class=\"hljs-keyword\">async<\/span> (result) =&gt; {\n        <span class=\"hljs-keyword\">let<\/span> state = <span class=\"hljs-literal\">null<\/span>;\n\n        <span class=\"hljs-keyword\">if<\/span> (result.info.raw_convert.aspose.status === <span class=\"hljs-string\">'pending'<\/span>) {\n          <span class=\"hljs-comment\">\/\/check if status is successful<\/span>\n          <span class=\"hljs-keyword\">while<\/span> (state !== <span class=\"hljs-string\">'success'<\/span>) {\n            <span class=\"hljs-keyword\">await<\/span> wait();\n            <span class=\"hljs-keyword\">return<\/span> cld.api\n              .resource(\n                result.public_id,\n                { <span class=\"hljs-attr\">resource_type<\/span>: <span class=\"hljs-string\">'raw'<\/span> },\n                <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\">error, result<\/span>) <\/span>{\n                  <span class=\"hljs-keyword\">if<\/span> (result) {\n                    <span class=\"hljs-keyword\">return<\/span> result;\n                  } <span class=\"hljs-keyword\">else<\/span> {\n                    <span class=\"hljs-keyword\">return<\/span> error;\n                  }\n                }\n              )\n              .then(<span class=\"hljs-function\">(<span class=\"hljs-params\">_<\/span>) =&gt;<\/span> {\n                state = <span class=\"hljs-string\">'success'<\/span>;\n\n                <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">200<\/span>).json({\n                  <span class=\"hljs-attr\">msg<\/span>: <span class=\"hljs-string\">'document converted successfully!'<\/span>,\n                  <span class=\"hljs-attr\">converted<\/span>: cld.url(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${result.public_id}<\/span>.jpeg`<\/span>, {\n                    <span class=\"hljs-attr\">transformation<\/span>: &#91;{ <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">600<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">'scale'<\/span> }],\n                  }),\n                });\n              })\n              .catch(<span class=\"hljs-function\">(<span class=\"hljs-params\">_<\/span>) =&gt;<\/span> {\n                <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">500<\/span>).json({ <span class=\"hljs-attr\">msg<\/span>: <span class=\"hljs-string\">'error'<\/span> });\n              });\n          }\n        } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (result.info.raw_convert.aspose.status !== <span class=\"hljs-string\">'pending'<\/span>) {\n          <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">200<\/span>).json({\n            <span class=\"hljs-attr\">msg<\/span>: <span class=\"hljs-string\">'document converted successfully!'<\/span>,\n            <span class=\"hljs-attr\">converted<\/span>: cld.url(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${result.public_id}<\/span>.jpeg`<\/span>, {\n              <span class=\"hljs-attr\">transformation<\/span>: &#91;{ <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">600<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">'scale'<\/span> }],\n            }),\n          });\n        } <span class=\"hljs-keyword\">else<\/span> {\n          <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">500<\/span>).json({ <span class=\"hljs-attr\">msg<\/span>: <span class=\"hljs-string\">'error'<\/span> });\n        }\n      })\n      .catch(<span class=\"hljs-function\">(<span class=\"hljs-params\">error<\/span>) =&gt;<\/span> {\n        <span class=\"hljs-built_in\">console<\/span>.log(error);\n        <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">500<\/span>).json({ <span class=\"hljs-attr\">msg<\/span>: error });\n      });\n  });\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The snippet above does the following:<\/p>\n<ul>\n<li>Imports the required dependencies<\/li>\n<li>Creates a <code>config<\/code> object to disable <strong>bodyParser<\/strong>, a Next.js default setting. This option lets us consume the request body in its raw format<\/li>\n<li>Instantiates and configures Multer by specifying the upload folder and the filename<\/li>\n<li>Instantiates and configures Cloudinary<\/li>\n<li>Extracts the request query<\/li>\n<li>Creates a <code>wait<\/code> function to set a delay of 5 seconds<\/li>\n<li>Uses the <code>upload.single<\/code> method to process the selected file. The method also does the following:\n<ul>\n<li>Uses the <code>uploader.upload<\/code> function to upload the file to Cloudinary by referencing the relative path, the resource type, Aspose as an add-on, and uses the extracted request query as the notification URL. The notification URL is used to monitor the status of the transformation<\/li>\n<li>Conditionally checks the uploaded file\u2019s status at an interval of 5 seconds using the <code>wait<\/code> function, confirms if it exists using Cloudinary\u2019s <code>api.resource<\/code> function, and returns the correct response<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>PS<\/strong>: <em>The uploaded files should be deleted periodically in a production environment to avoid bloating the server. Also, methods like<\/em> <a href=\"https:\/\/nodejs.org\/api\/events.html\"><em>Event Emitter<\/em><\/a> <em>and<\/em> <a href=\"https:\/\/en.wikipedia.org\/wiki\/Webhook\"><em>Webhooks<\/em><\/a> <em>are used to monitor the notification URL. However, we used a<\/em> <a href=\"https:\/\/en.wikipedia.org\/wiki\/While_loop\"><em>while loop<\/em><\/a> <em>to achieve this.<\/em><\/p>\n<p>Finally, we modify the <code>index.js<\/code> file in the <code>pages<\/code> folder to the following:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'next\/head'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Image <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'next\/image'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>; <span class=\"hljs-comment\">\/\/add<\/span>\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/styles\/Home.module.css'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;file, setFile] = useState(<span class=\"hljs-literal\">null<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> &#91;imgSrc, setImgSrc] = useState(<span class=\"hljs-literal\">null<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> &#91;isLoading, setIsLoading] = useState(<span class=\"hljs-literal\">false<\/span>);\n\n  <span class=\"hljs-keyword\">const<\/span> handleSubmit = <span class=\"hljs-function\">(<span class=\"hljs-params\">e<\/span>) =&gt;<\/span> {\n    e.preventDefault();\n    setIsLoading(<span class=\"hljs-literal\">true<\/span>);\n\n    <span class=\"hljs-keyword\">const<\/span> formData = <span class=\"hljs-keyword\">new<\/span> FormData();\n    formData.append(<span class=\"hljs-string\">'file'<\/span>, file);\n\n    fetch(<span class=\"hljs-string\">`\/api\/convert\/<span class=\"hljs-subst\">${<span class=\"hljs-built_in\">window<\/span>.location.host}<\/span>`<\/span>, {\n      <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">'POST'<\/span>,\n      <span class=\"hljs-attr\">body<\/span>: formData,\n    })\n      .then(<span class=\"hljs-function\">(<span class=\"hljs-params\">res<\/span>) =&gt;<\/span> res.json())\n      .then(<span class=\"hljs-function\">(<span class=\"hljs-params\">res<\/span>) =&gt;<\/span> {\n        setImgSrc(res.converted);\n        setIsLoading(<span class=\"hljs-literal\">false<\/span>);\n      })\n      .catch(<span class=\"hljs-function\">(<span class=\"hljs-params\">_<\/span>) =&gt;<\/span> {\n        alert(<span class=\"hljs-string\">'File Upload error!'<\/span>);\n      });\n  };\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.container}<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Create Next App<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">'description'<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">'Generated by create next app'<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">'icon'<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">'\/favicon.ico'<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.main}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.description}<\/span>&gt;<\/span>Word To Image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.section}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">method<\/span>=<span class=\"hljs-string\">'post'<\/span> <span class=\"hljs-attr\">onSubmit<\/span>=<span class=\"hljs-string\">{handleSubmit}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">htmlFor<\/span>=<span class=\"hljs-string\">'img'<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.label}<\/span>&gt;<\/span>\n              Select image:\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n              <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">'file'<\/span>\n              <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">'img'<\/span>\n              <span class=\"hljs-attr\">accept<\/span>=<span class=\"hljs-string\">'.doc, .docx'<\/span>\n              <span class=\"hljs-attr\">required<\/span>\n              <span class=\"hljs-attr\">multiple<\/span>\n              <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.fileUpload}<\/span>\n              <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{(e)<\/span> =&gt;<\/span> setFile(e.target.files&#91;0])}\n            \/&gt;\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.button}<\/span> <span class=\"hljs-attr\">disabled<\/span>=<span class=\"hljs-string\">{isLoading}<\/span>&gt;<\/span>\n              {isLoading ? 'Converting' : 'Submit'}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n\n          {imgSrc &amp;&amp; (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span>\n              <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{imgSrc}<\/span>\n              <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{350}<\/span>\n              <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{350}<\/span>\n              <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">'uploads'<\/span>\n              <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.img}<\/span>\n            \/&gt;<\/span>\n          )}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The snippet above does the following:<\/p>\n<ul>\n<li>Imports required dependency<\/li>\n<li>Creates state to manage the uploads (<code>files<\/code>, <code>imgSrc<\/code>, and <code>isLoading<\/code>)<\/li>\n<li>Creates a <code>handleSubmit<\/code> function for uploading the file by calling the <code>\/api\/convert\/<\/code> API we created earlier with the current URL as a query<\/li>\n<li>Markup to for the upload form and conditionally show transformed<\/li>\n<\/ul>\n<p>With that done, we can start a development server using the command below:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    npm run dev\n<\/code><\/span><\/pre>\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_B25D1D83E54DD05D84D4D400E32D66D93F5E53D240FE600D6E698BB81598AEED_1659231601146_Screenshot+2022-07-30+at+23.23.23.png\" alt=\"Form\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"973\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_B25D1D83E54DD05D84D4D400E32D66D93F5E53D240FE600D6E698BB81598AEED_1659231601123_Screenshot+2022-07-30+at+23.15.02.png\" alt=\"Form with Transformed Image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"973\"\/><\/p>\n<p>We can also validate the upload and transformation by checking Cloudinary.<\/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_B25D1D83E54DD05D84D4D400E32D66D93F5E53D240FE600D6E698BB81598AEED_1659231936475_Screenshot+2022-07-31+at+02.44.03.png\" alt=\"Upload and Transformation\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1392\" height=\"677\"\/><\/p>\n<h1>Conclusion<\/h1>\n<p>This post discussed transforming Word documents into images in a Next.js application using Cloudinary and Aspose. The Cloudinary platform ships with a robust Add-on to manage media and file assets that developers can leverage to build solutions without spending more time programming complex file formats.<\/p>\n<p>These resources might be helpful:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\">Cloudinary platform<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.aspose.com\/\">Aspose<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/aspose_document_conversion_addon\">Cloudinary Aspose Add-on<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/notifications\">Cloudinary Notification System<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28132,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[381,134,370,175,212,371],"class_list":["post-28131","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-imagecdn","tag-guest-post","tag-image","tag-jamstack","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>Transform Documents into Images using Next.js APIs<\/title>\n<meta name=\"description\" content=\"Learn how to transform Word documents to images into a Next.js application using Cloudinary and Aspose.\" \/>\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\/transform-word-documents-and-slides-into-images-using-next-js-apis\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Transform Documents into Images using Next.js APIs\" \/>\n<meta property=\"og:description\" content=\"Learn how to transform Word documents to images into a Next.js application using Cloudinary and Aspose.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-17T12:30:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-30T09:24:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681922299\/Web_Assets\/blog\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1012\" \/>\n\t<meta property=\"og:image:height\" content=\"506\" \/>\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\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Transform Documents into Images using Next.js APIs\",\"datePublished\":\"2022-08-17T12:30:15+00:00\",\"dateModified\":\"2025-03-30T09:24:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922299\/Web_Assets\/blog\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d.png?_i=AA\",\"keywords\":[\"(Image)CDN\",\"Guest Post\",\"Image\",\"JAMStack\",\"Next.js\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/\",\"name\":\"Transform Documents into Images using Next.js APIs\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922299\/Web_Assets\/blog\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d.png?_i=AA\",\"datePublished\":\"2022-08-17T12:30:15+00:00\",\"dateModified\":\"2025-03-30T09:24:02+00:00\",\"description\":\"Learn how to transform Word documents to images into a Next.js application using Cloudinary and Aspose.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922299\/Web_Assets\/blog\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922299\/Web_Assets\/blog\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d.png?_i=AA\",\"width\":1012,\"height\":506},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Transform Documents into Images using Next.js APIs\"}]},{\"@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":"Transform Documents into Images using Next.js APIs","description":"Learn how to transform Word documents to images into a Next.js application using Cloudinary and Aspose.","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\/transform-word-documents-and-slides-into-images-using-next-js-apis\/","og_locale":"en_US","og_type":"article","og_title":"Transform Documents into Images using Next.js APIs","og_description":"Learn how to transform Word documents to images into a Next.js application using Cloudinary and Aspose.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-08-17T12:30:15+00:00","article_modified_time":"2025-03-30T09:24:02+00:00","og_image":[{"width":1012,"height":506,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681922299\/Web_Assets\/blog\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d-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\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/"},"author":{"name":"","@id":""},"headline":"Transform Documents into Images using Next.js APIs","datePublished":"2022-08-17T12:30:15+00:00","dateModified":"2025-03-30T09:24:02+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922299\/Web_Assets\/blog\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d.png?_i=AA","keywords":["(Image)CDN","Guest Post","Image","JAMStack","Next.js","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/","name":"Transform Documents into Images using Next.js APIs","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922299\/Web_Assets\/blog\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d.png?_i=AA","datePublished":"2022-08-17T12:30:15+00:00","dateModified":"2025-03-30T09:24:02+00:00","description":"Learn how to transform Word documents to images into a Next.js application using Cloudinary and Aspose.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922299\/Web_Assets\/blog\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922299\/Web_Assets\/blog\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d.png?_i=AA","width":1012,"height":506},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/transform-word-documents-and-slides-into-images-using-next-js-apis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Transform Documents into Images using Next.js APIs"}]},{"@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\/v1681922299\/Web_Assets\/blog\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d\/6e5af6e88628a27f4721665ce9be50fee0c0d7ff-1012x506-1_2813240f4d.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28131","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=28131"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28131\/revisions"}],"predecessor-version":[{"id":37299,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28131\/revisions\/37299"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28132"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}