{"id":35335,"date":"2024-08-27T07:00:00","date_gmt":"2024-08-27T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=35335"},"modified":"2025-02-22T14:59:21","modified_gmt":"2025-02-22T22:59:21","slug":"ai-generated-images-next-js-blog-dall-e-3","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3","title":{"rendered":"Create AI-Generated Images for Your Next.js Blog With DALL-E 3"},"content":{"rendered":"\n<p>Did you know that AI-generated images can be tailored to match the theme of your content perfectly? By leveraging <a target=\"_blank\" href=\"https:\/\/openai.com\/index\/dall-e-3\/\" rel=\"noreferrer noopener\">DALL-E 3<\/a> and <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/\" rel=\"noreferrer noopener\">Cloudinary<\/a>, you can effortlessly create stunning blog post banner images that resonate with your audience.<\/p>\n\n\n\n<p>In this blog post, you\u2019ll learn how to auto-generate AI images for your Next.js blog with DALL-E 3 by entering your post title. This process adds layered text and an opaque dark background, ensuring your banners look professional. Cloudinary\u2018s <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\" rel=\"noreferrer noopener\">advanced transformation<\/a> capabilities make sure your images are perfectly sized and styled.<\/p>\n\n\n\n<p>Here\u2019s the result:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"692\" data-public-id=\"Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_692,c_scale\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA\" alt=\"\" class=\"wp-post-35335 wp-image-35336\" loading=\"lazy\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1724279529\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA 1600w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>GitHub repository is <a target=\"_blank\" href=\"https:\/\/github.com\/Olanetsoft\/auto-generate-ai-images-for-your-next.js-blog-with-dall-e-3\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>To follow along, you\u2019ll need:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js installed on your computer.<\/li>\n\n\n\n<li>Knowledge of Next.js.<\/li>\n\n\n\n<li>An understanding of JavaScript.<\/li>\n\n\n\n<li>A free <a href=\"https:\/\/cloudinary.com\/users\/register\/free?utm_source=hackmamba&amp;utm_campaign=hackmamba-hackathon&amp;utm_medium=hackmamba-blog\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary account<\/a>.<\/li>\n\n\n\n<li>An <a href=\"https:\/\/openai.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">OpenAI account<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Set Up the Project and Install Dependencies&nbsp;<\/h2>\n\n\n\n<p>First, clone the <a href=\"https:\/\/github.com\/Olanetsoft\/auto-generate-ai-images-for-your-next.js-blog-with-dall-e-3\" target=\"_blank\" rel=\"noreferrer noopener\">starter project<\/a> into your preferred folder and checkout to the starter branch using the git commands below to quickly get started. This starter project is a Next.js application using the app directory and configured with Tailwind CSS for styling.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">git clone https:<span class=\"hljs-comment\">\/\/github.com\/Olanetsoft\/auto-generate-ai-images-for-your-next.js-blog-with-dall-e-3.git<\/span>\ncd auto-generate-ai-images-<span class=\"hljs-keyword\">for<\/span>-your-next.js-blog-<span class=\"hljs-keyword\">with<\/span>-dall-e<span class=\"hljs-number\">-3<\/span>\ngit checkout starter<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><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\n\n<p>Next, run the following command to install all dependencies using the npm package manager and start the project on <a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noreferrer noopener\"><u>http:\/\/localhost:3000<\/u><\/a>.<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-wrap-lines\">npm install &amp;&amp; npm run dev<\/code><\/span><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Get Environment Variables From Cloudinary&nbsp;<\/h2>\n\n\n\n<p>You need environment credentials from your Cloudinary dashboard to use <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\" rel=\"noreferrer noopener\">Cloudinary image transformation<\/a> later in this post to transform the AI-generated image into a blog post banner image.&nbsp;<\/p>\n\n\n\n<p>Log in to your <a href=\"https:\/\/cloudinary.com\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary dashboard<\/a> to retrieve environment credentials such as the <strong>cloud name<\/strong>, <strong>API key<\/strong>, and <strong>API secret<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"445\" data-public-id=\"Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2.png\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_445,c_scale\/f_auto,q_auto\/v1724279525\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2.png?_i=AA\" alt=\"\" class=\"wp-post-35335 wp-image-35337\" loading=\"lazy\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1724279525\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279525\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2.png?_i=AA 1600w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279525\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279525\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279525\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279525\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-2.png?_i=AA 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Then, create an <code>.env.local<\/code> file in the root folder of the project using the following command:<\/p>\n\n\n\n<p><strong>For macOS and Linux:<\/strong><\/p>\n\n\n\n<p><code>touch .env.local<\/code><\/p>\n\n\n\n<p><strong>For Windows<\/strong><strong>(Command<\/strong><strong> Prompt):<\/strong><\/p>\n\n\n\n<p><code>type NUL &gt; .env.local<\/code><\/p>\n\n\n\n<p><strong>For Windows<\/strong><strong>(PowerShell):<\/strong><\/p>\n\n\n\n<p><code>New-Item -Path .env.local -ItemType File<\/code><\/p>\n\n\n\n<p>Add your environment credentials:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=<span class=\"hljs-string\">\"*********************\"<\/span>\nNEXT_PUBLIC_CLOUDINARY_API_KEY=<span class=\"hljs-string\">\"*********************\"<\/span>\nNEXT_PUBLIC_CLOUDINARY_API_SECRET=<span class=\"hljs-string\">\"*********************\"<\/span><\/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\n\n<p>Replace <code>*********************<\/code> with your credentials.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Get a Secret Key From OpenAI<\/h2>\n\n\n\n<p><a target=\"_blank\" href=\"https:\/\/openai.com\/dall-e-3\/\" rel=\"noreferrer noopener\">DALL\u00b7E-3<\/a>, the latest version of the DALL-E text-to-image models can produce high-quality images across various domains based on text descriptions. The generation API endpoint creates an image based on a text prompt, which you will use in this tutorial.&nbsp;<\/p>\n\n\n\n<p>However, before using it, you must set up a secret key in your application to send a request to the endpoint. Login to the <a href=\"https:\/\/platform.openai.com\/login?launch\" target=\"_blank\" rel=\"noreferrer noopener\">OpenAI dashboard <\/a>to create or retrieve your secret key if you already have one.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"604\" data-public-id=\"Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3.png\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_604,c_scale\/f_auto,q_auto\/v1724279522\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3.png?_i=AA\" alt=\"\" class=\"wp-post-35335 wp-image-35338\" loading=\"lazy\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1724279522\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279522\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3.png?_i=AA 1600w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279522\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279522\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279522\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279522\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-3.png?_i=AA 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Get a Secret Key from OpenAI<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"445\" data-public-id=\"Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4.png\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_445,c_scale\/f_auto,q_auto\/v1724279518\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4.png?_i=AA\" alt=\"\" class=\"wp-post-35335 wp-image-35339\" loading=\"lazy\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1724279518\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279518\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4.png?_i=AA 1600w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279518\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279518\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279518\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279518\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-4.png?_i=AA 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Click API Keys<\/figcaption><\/figure>\n\n\n\n<p>Create an API key to access the OpenAI API.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"444\" data-public-id=\"Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5.png\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_444,c_scale\/f_auto,q_auto\/v1724279514\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5.png?_i=AA\" alt=\"\" class=\"wp-post-35335 wp-image-35340\" loading=\"lazy\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1724279514\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279514\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5.png?_i=AA 1600w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279514\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279514\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279514\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279514\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-5.png?_i=AA 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Next, add it to your <code>.env.local<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>OPENAI_API_KEY=\"sk-*********************\"<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Replace <code>sk-*********************<\/code> with your secret key.<\/p>\n\n\n\n<p>You&#8217;re all set. In the following section, you\u2019ll implement the AI image generation API by requesting the OpenAI endpoint.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Implement an AI Image Generation API<\/h2>\n\n\n\n<p>In this section, you\u2019ll implement the AI image generation API by requesting the OpenAI endpoint using the latest version of the DALL-E text-to-image models.&nbsp;<\/p>\n\n\n\n<p>First, create a folder, generate-image inside the api directory, and add a file named route.js.&nbsp;<\/p>\n\n\n\n<p>This file will handle the AI image generation by requesting the <a href=\"https:\/\/api.openai.com\/v1\/images\/generations\" target=\"_blank\" rel=\"noreferrer noopener\">OpenAI endpoint<\/a> and authorizing it using your OpenAI secret key. The request object would include the following information:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n{\n  <span class=\"hljs-attr\">model<\/span>: <span class=\"hljs-string\">\"dall-e-3\"<\/span>,\n  <span class=\"hljs-attr\">prompt<\/span>: <span class=\"hljs-string\">`Create a simple, professional, and relatable blog banner image that represents: \"<span class=\"hljs-subst\">${title}<\/span>\". The image should be clear, not abstract, and suitable for a professional blog post. Avoid text in the image. Focus on symbolic or metaphorical representations that align with the title's theme. The image should work well as a background with text overlay.`<\/span>,\n  <span class=\"hljs-attr\">n<\/span>: <span class=\"hljs-number\">1<\/span>,\n  <span class=\"hljs-attr\">size<\/span>: <span class=\"hljs-string\">\"1024x1024\"<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><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\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>You can modify this prompt to fit your unique style or consider any other factors you deem important.<\/p>\n<\/div>\n\n\n<p>In the request object, the model DALL-E-3 was passed with a prompt customized to generate a professional and relatable blog banner image representing the blog title. The parameter <strong>n<\/strong> was specified as 1 to return one image and its size. Learn more about the <a target=\"_blank\" href=\"https:\/\/platform.openai.com\/docs\/guides\/images\/introduction\" rel=\"noreferrer noopener\">OpenAI image generation API<\/a>.<\/p>\n\n\n\n<p>Next, add the following code snippet to send a request to the OpenAI endpoint for image generation:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-comment\">\/\/ app\/api\/generate-image\/route.js<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> { NextResponse } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/server\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">POST<\/span>(<span class=\"hljs-params\">req<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> { title } = <span class=\"hljs-keyword\">await<\/span> req.json();\n\n  <span class=\"hljs-keyword\">try<\/span> {\n    <span class=\"hljs-comment\">\/\/ Generate image with DALL-E<\/span>\n    <span class=\"hljs-keyword\">const<\/span> dalleResponse = <span class=\"hljs-keyword\">await<\/span> fetch(\n      <span class=\"hljs-string\">\"https:\/\/api.openai.com\/v1\/images\/generations\"<\/span>,\n      {\n        <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">\"POST\"<\/span>,\n        <span class=\"hljs-attr\">headers<\/span>: {\n          <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>,\n          <span class=\"hljs-attr\">Authorization<\/span>: <span class=\"hljs-string\">`Bearer <span class=\"hljs-subst\">${process.env.OPENAI_API_KEY}<\/span>`<\/span>,\n        },\n        <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-built_in\">JSON<\/span>.stringify({\n          <span class=\"hljs-attr\">model<\/span>: <span class=\"hljs-string\">\"dall-e-3\"<\/span>,\n          <span class=\"hljs-attr\">prompt<\/span>: <span class=\"hljs-string\">`Create a simple, professional, and relatable blog banner image that represents: \"<span class=\"hljs-subst\">${title}<\/span>\". The image should be clear, not abstract, and suitable for a professional blog post. Avoid text in the image. Focus on symbolic or metaphorical representations that align with the title's theme.The image should work well as a background with text overlay.`<\/span>,\n          <span class=\"hljs-attr\">n<\/span>: <span class=\"hljs-number\">1<\/span>,\n          <span class=\"hljs-attr\">size<\/span>: <span class=\"hljs-string\">\"1024x1024\"<\/span>,\n        }),\n      }\n    );\n\n    <span class=\"hljs-keyword\">if<\/span> (!dalleResponse.ok) {\n      <span class=\"hljs-keyword\">const<\/span> error = <span class=\"hljs-keyword\">await<\/span> dalleResponse.json();\n      <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Error generating image:\"<\/span>, error);\n      <span class=\"hljs-keyword\">return<\/span> NextResponse.json(\n        { <span class=\"hljs-attr\">error<\/span>: <span class=\"hljs-string\">\"Failed to generate image\"<\/span> },\n        { <span class=\"hljs-attr\">status<\/span>: <span class=\"hljs-number\">500<\/span> }\n      );\n    }\n    <span class=\"hljs-keyword\">const<\/span> dalleData = <span class=\"hljs-keyword\">await<\/span> dalleResponse.json();\n    <span class=\"hljs-keyword\">const<\/span> imageUrl = dalleData.data&#91;<span class=\"hljs-number\">0<\/span>].url;\n\n    <span class=\"hljs-keyword\">return<\/span> NextResponse.json({ <span class=\"hljs-attr\">imageUrl<\/span>: imageUrl });\n  } <span class=\"hljs-keyword\">catch<\/span> (error) {\n    <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Error generating image:\"<\/span>, error);\n    <span class=\"hljs-keyword\">return<\/span> NextResponse.json(\n      { <span class=\"hljs-attr\">error<\/span>: <span class=\"hljs-string\">\"Failed to generate image\"<\/span> },\n      { <span class=\"hljs-attr\">status<\/span>: <span class=\"hljs-number\">500<\/span> }\n    );\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><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\n\n<p>Navigate to the <code>components\/ImageForm.js file<\/code> and create a function named <code>generateImage<\/code> to send a request to the API endpoint you just created. Update the <code>ImageForm.js<\/code> with the following code snippet:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-comment\">\/\/ app\/components\/ImageForm.js<\/span>\n\n<span class=\"hljs-comment\">\/\/...<\/span>\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\">ImageForm<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/...<\/span>\n    <span class=\"hljs-keyword\">const<\/span> generateImage = <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n      setLoading(<span class=\"hljs-literal\">true<\/span>);\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">\"\/api\/generate-image\"<\/span>, {\n          <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">\"POST\"<\/span>,\n          <span class=\"hljs-attr\">headers<\/span>: {\n            <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>,\n          },\n          <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-built_in\">JSON<\/span>.stringify({ title }),\n        });\n  \n        <span class=\"hljs-keyword\">if<\/span> (!response.ok) {\n          <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">\"Network response was not ok\"<\/span>);\n        }\n        <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json();\n        <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-built_in\">decodeURIComponent<\/span>(data.imageUrl)); <span class=\"hljs-comment\">\/\/ Log the response for test<\/span>\n      } <span class=\"hljs-keyword\">catch<\/span> (error) {\n        <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Error generating image:\"<\/span>, error);\n      } <span class=\"hljs-keyword\">finally<\/span> {\n        setLoading(<span class=\"hljs-literal\">false<\/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>&gt;<\/span>\n      \/\/...\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n        \/\/<span class=\"hljs-attr\">...<\/span>\n        <span class=\"hljs-attr\">disabled<\/span>=<span class=\"hljs-string\">{loading}<\/span>\n        <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{generateImage}<\/span> \/\/ <span class=\"hljs-attr\">Add<\/span> <span class=\"hljs-attr\">onclick<\/span> <span class=\"hljs-attr\">event<\/span>\n      &gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><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\n\n<p>Go to your browser and access <a href=\"http:\/\/localhost:3000\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/localhost:3000<\/a>. You should see a UI like the one below, where you can enter any title and click the <strong>Generate Image<\/strong> button.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"608\" data-public-id=\"Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6.png\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_608,c_scale\/f_auto,q_auto\/v1724279510\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6.png?_i=AA\" alt=\"\" class=\"wp-post-35335 wp-image-35341\" loading=\"lazy\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1724279510\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279510\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6.png?_i=AA 1600w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279510\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279510\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279510\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279510\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-6.png?_i=AA 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Take a look at your browser console. If everything goes well, you should see the API response, which returns an image URL similar to the one below.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">https:<span class=\"hljs-comment\">\/\/oaidalleapiprodscus.blob.core.windows.net\/private\/org-u7SLmTadQLSIea21t5kNJE5B\/user-AEYVzQyrf7rxYk3V9sesI4X0\/img-WGAy1yrVMT0A7gxRkn96oHz1.png?st=2024-07-16T22:36:18Z&amp;se=2024-07-17T00:36:18Z&amp;sp=r&amp;sv=2023-11-03&amp;sr=b&amp;rscd=inline&amp;rsct=image\/png&amp;skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&amp;sktid=a48cca56-e6da-484e-a814-9c849652bcb3&amp;skt=2024-07-16T23:36:18Z&amp;ske=2024-07-17T23:36:18Z&amp;sks=b&amp;skv=2023-11-03&amp;sig=b211x3YQOzax6c6UPOAojy\/qmJiSOlnFNo0gPqHnZ3Y=<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><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\n\n<h2 class=\"wp-block-heading\">Implement Cloudinary Image Upload and Transformation<\/h2>\n\n\n\n<p>Now that you have implemented the AI image generation API, you can implement a Cloudinary image upload and transformation to add layered text and an opaque dark background, ensuring your banner looks professional. To do that, navigate to app\/api\/generate-image\/route.js, where you previously implemented the image generation.&nbsp;<\/p>\n\n\n\n<p>Add Cloudinary config using your credentials:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-comment\">\/\/ app\/api\/generate-image\/route.js<\/span>\n<span class=\"hljs-keyword\">import<\/span> { NextResponse } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/server\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { v2 <span class=\"hljs-keyword\">as<\/span> cloudinary } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"cloudinary\"<\/span>;\n\ncloudinary.config({\n  <span class=\"hljs-attr\">cloud_name<\/span>: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,\n  <span class=\"hljs-attr\">api_key<\/span>: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY,\n  <span class=\"hljs-attr\">api_secret<\/span>: process.env.NEXT_PUBLIC_CLOUDINARY_API_SECRET,\n});\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">POST<\/span>(<span class=\"hljs-params\">req<\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/...<\/span>\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><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\n\n<p>Next, update it with the following code snippet to add image upload and transformation:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-comment\">\/\/ app\/api\/generate-image\/route.js<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">POST<\/span>(<span class=\"hljs-params\">req<\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/...<\/span>\n  <span class=\"hljs-keyword\">try<\/span> {\n    <span class=\"hljs-comment\">\/\/...<\/span>\n    <span class=\"hljs-keyword\">const<\/span> dalleData = <span class=\"hljs-keyword\">await<\/span> dalleResponse.json();\n    <span class=\"hljs-keyword\">const<\/span> imageUrl = dalleData.data&#91;<span class=\"hljs-number\">0<\/span>].url;\n\n    <span class=\"hljs-comment\">\/\/ Upload image to Cloudinary<\/span>\n    <span class=\"hljs-keyword\">const<\/span> uploadResponse = <span class=\"hljs-keyword\">await<\/span> cloudinary.uploader.upload(imageUrl);\n\n    <span class=\"hljs-comment\">\/\/ Apply transformations step by step<\/span>\n    <span class=\"hljs-keyword\">const<\/span> transformedImageUrl = cloudinary.url(uploadResponse.public_id, {\n      <span class=\"hljs-attr\">transformation<\/span>: &#91;\n        { <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">1200<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">630<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"fill\"<\/span>, <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">\"center\"<\/span> },\n        { <span class=\"hljs-attr\">effect<\/span>: <span class=\"hljs-string\">\"brightness:-80\"<\/span> },\n        {\n          <span class=\"hljs-attr\">overlay<\/span>: {\n            <span class=\"hljs-attr\">font_family<\/span>: <span class=\"hljs-string\">\"Roboto\"<\/span>,\n            <span class=\"hljs-attr\">font_size<\/span>: <span class=\"hljs-number\">70<\/span>,\n            <span class=\"hljs-attr\">font_weight<\/span>: <span class=\"hljs-string\">\"bold\"<\/span>,\n            <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-built_in\">encodeURIComponent<\/span>(<span class=\"hljs-built_in\">encodeURIComponent<\/span>(title)),\n          },\n          <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">\"white\"<\/span>,\n          <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">\"center\"<\/span>,\n          <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">0<\/span>,\n          <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">1000<\/span>,\n          <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"fit\"<\/span>,\n        },\n        { <span class=\"hljs-attr\">effect<\/span>: <span class=\"hljs-string\">\"shadow:30\"<\/span>, <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">\"black\"<\/span> },\n      ],\n    });\n\n    <span class=\"hljs-keyword\">return<\/span> NextResponse.json({ <span class=\"hljs-attr\">imageUrl<\/span>: transformedImageUrl });\n  } <span class=\"hljs-keyword\">catch<\/span> (error) {\n    <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Error generating image:\"<\/span>, error);\n    <span class=\"hljs-keyword\">return<\/span> NextResponse.json(\n      { <span class=\"hljs-attr\">error<\/span>: <span class=\"hljs-string\">\"Failed to generate image\"<\/span> },\n      { <span class=\"hljs-attr\">status<\/span>: <span class=\"hljs-number\">500<\/span> }\n    );\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><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\n\n<p>In the code above, you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Uploaded the generated image URL to Cloudinary.<\/li>\n\n\n\n<li>Applied transformations in Cloudinary:\n<ul class=\"wp-block-list\">\n<li>Resized to 1200&#215;630 and center cropped.<\/li>\n\n\n\n<li>Applied a brightness effect of -80.<\/li>\n\n\n\n<li>Overlaid the title text using the specified font and style.<\/li>\n\n\n\n<li>Added a shadow effect.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Returned the transformed image URL as JSON.<\/li>\n\n\n\n<li>Logged an error and returned a 500 status with an error message if the process fails.<\/li>\n<\/ul>\n\n\n\n<p>Next, update the UI to display the transformed image from Cloudinary. Update the <code>ImageForm.js<\/code> with the following code snippet:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-comment\">\/\/ app\/components\/ImageForm.js<\/span>\n<span class=\"hljs-comment\">\/\/...<\/span>\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\">ImageForm<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/...<\/span>\n\n  <span class=\"hljs-keyword\">const<\/span> generateImage = <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n    setLoading(<span class=\"hljs-literal\">true<\/span>);\n    <span class=\"hljs-keyword\">try<\/span> {\n      <span class=\"hljs-comment\">\/\/...<\/span>\n      setImageUrl(<span class=\"hljs-built_in\">decodeURIComponent<\/span>(data.imageUrl)); <span class=\"hljs-comment\">\/\/ set the image URL<\/span>\n\n    } <span class=\"hljs-keyword\">catch<\/span> (error) {\n      <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Error generating image:\"<\/span>, error);\n    } <span class=\"hljs-keyword\">finally<\/span> {\n      setLoading(<span class=\"hljs-literal\">false<\/span>);\n    }\n  };\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"hljs-comment\">\/\/...<\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><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\n\n<p>You\u2019re almost done. In the following section, you\u2019ll implement the save image functionality before testing the complete application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Implement Save Image Functionality<\/h2>\n\n\n\n<p>To implement a download button to save the image generated, you need to create a function named <code>saveImage<\/code> to save the generated image. Update the <code>app\/components\/ImageForm.js<\/code> file with the following code snippet:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-comment\">\/\/ app\/components\/ImageForm.js<\/span>\n<span class=\"hljs-comment\">\/\/...<\/span>\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\">ImageForm<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n <span class=\"hljs-comment\">\/\/...<\/span>\n\n  <span class=\"hljs-keyword\">const<\/span> generateImage = <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n    <span class=\"hljs-comment\">\/\/...<\/span>\n  };\n\n  <span class=\"hljs-keyword\">const<\/span> saveImage = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> link = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">\"a\"<\/span>);\n    link.href = imageUrl;\n    link.download = <span class=\"hljs-string\">`<span class=\"hljs-subst\">${title.replace(<span class=\"hljs-regexp\">\/\\s+\/g<\/span>, <span class=\"hljs-string\">\"_\"<\/span>)}<\/span>.png`<\/span>;\n    link.click();\n  };\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      \/\/...\n      \n      {imageUrl &amp;&amp; (\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-6 text-center\"<\/span>&gt;<\/span>\n          \/\/...\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n            <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition-colors\"<\/span>\n            <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{saveImage}<\/span> \/\/ <span class=\"hljs-attr\">Add<\/span> <span class=\"hljs-attr\">onclick<\/span> <span class=\"hljs-attr\">event<\/span> <span class=\"hljs-attr\">here<\/span>\n          &gt;<\/span>\n            Save Image\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      )}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><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\n\n<h2 class=\"wp-block-heading\">Test the Application<\/h2>\n\n\n\n<p>Now, it&#8217;s time to test the application by entering your preferred blog title, generating a blog post banner image, and downloading it. Depending on the title you entered, you should have something similar to this:\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"692\" data-public-id=\"Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7.png\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_692,c_scale\/f_auto,q_auto\/v1724279505\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7.png?_i=AA\" alt=\"\" class=\"wp-post-35335 wp-image-35342\" loading=\"lazy\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1724279505\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279505\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7.png?_i=AA 1600w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279505\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279505\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279505\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279505\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-7.png?_i=AA 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Download the a copy of the transformed image by clicking the <strong>Save Image<\/strong> button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>In this blog post, you learned how to auto-generate AI images for your Next.js blog using DALL-E 3 and Cloudinary. With a blog post title, you can create stunning, professional banner images that perfectly match your content.&nbsp;<\/p>\n\n\n\n<p>Cloudinary&#8217;s integration allows you to apply advanced transformations, ensuring your images are well-styled and ready for your audience. Additionally, the easy-to-use save button makes downloading your final images effortless. Remember, you can modify any step of this tutorial to fit your use case. Automate your entire image management lifecycle, from upload and transformation to optimization and delivery. To learn more, <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/\" rel=\"noreferrer noopener\">contact us today<\/a>.<\/p>\n\n\n\n<p>If you found this blog post helpful and want to discuss it more, head over to the <a target=\"_blank\" href=\"https:\/\/community.cloudinary.com\/\" rel=\"noreferrer noopener\">Cloudinary Community forum<\/a> and its associated <a target=\"_blank\" href=\"https:\/\/discord.com\/invite\/cloudinary\" rel=\"noreferrer noopener\">Discord<\/a>. The community would love to hear about your projects and experiences.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resources<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary Image Transformation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/openai.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">OpenAI<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Did you know that AI-generated images can be tailored to match the theme of your content perfectly? By leveraging DALL-E 3 and Cloudinary, you can effortlessly create stunning blog post banner images that resonate with your audience. In this blog post, you\u2019ll learn how to auto-generate AI images for your Next.js blog with DALL-E 3 [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-35335","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"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>Create AI-Generated Images for Your Next.js Blog With DALL-E 3<\/title>\n<meta name=\"description\" content=\"Learn how to create AI-generated images with DALL-E 3 and style with Cloudinary for your blog. From setup, API integration, and image transformations.\" \/>\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\/ai-generated-images-next-js-blog-dall-e-3\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create AI-Generated Images for Your Next.js Blog With DALL-E 3\" \/>\n<meta property=\"og:description\" content=\"Learn how to create AI-generated images with DALL-E 3 and style with Cloudinary for your blog. From setup, API integration, and image transformations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-27T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-22T22:59:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA&w=1024\" \/>\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\/ai-generated-images-next-js-blog-dall-e-3#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Create AI-Generated Images for Your Next.js Blog With DALL-E 3\",\"datePublished\":\"2024-08-27T14:00:00+00:00\",\"dateModified\":\"2025-02-22T22:59:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3\"},\"wordCount\":1063,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA&w=1024\",\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3\",\"url\":\"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3\",\"name\":\"Create AI-Generated Images for Your Next.js Blog With DALL-E 3\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA&w=1024\",\"datePublished\":\"2024-08-27T14:00:00+00:00\",\"dateModified\":\"2025-02-22T22:59:21+00:00\",\"description\":\"Learn how to create AI-generated images with DALL-E 3 and style with Cloudinary for your blog. From setup, API integration, and image transformations.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA&w=1024\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA&w=1024\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create AI-Generated Images for Your Next.js Blog With DALL-E 3\"}]},{\"@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 AI-Generated Images for Your Next.js Blog With DALL-E 3","description":"Learn how to create AI-generated images with DALL-E 3 and style with Cloudinary for your blog. From setup, API integration, and image transformations.","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\/ai-generated-images-next-js-blog-dall-e-3","og_locale":"en_US","og_type":"article","og_title":"Create AI-Generated Images for Your Next.js Blog With DALL-E 3","og_description":"Learn how to create AI-generated images with DALL-E 3 and style with Cloudinary for your blog. From setup, API integration, and image transformations.","og_url":"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3","og_site_name":"Cloudinary Blog","article_published_time":"2024-08-27T14:00:00+00:00","article_modified_time":"2025-02-22T22:59:21+00:00","og_image":[{"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA&w=1024","type":"","width":"","height":""}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Create AI-Generated Images for Your Next.js Blog With DALL-E 3","datePublished":"2024-08-27T14:00:00+00:00","dateModified":"2025-02-22T22:59:21+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3"},"wordCount":1063,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA&w=1024","inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3","url":"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3","name":"Create AI-Generated Images for Your Next.js Blog With DALL-E 3","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA&w=1024","datePublished":"2024-08-27T14:00:00+00:00","dateModified":"2025-02-22T22:59:21+00:00","description":"Learn how to create AI-generated images with DALL-E 3 and style with Cloudinary for your blog. From setup, API integration, and image transformations.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA&w=1024","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1724279529\/Web_Assets\/blog\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1\/blog-Create-AI-Generated-Images-for-Your-Next.js-Blog-With-DALL-E-3-1.png?_i=AA&w=1024"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/ai-generated-images-next-js-blog-dall-e-3#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create AI-Generated Images for Your Next.js Blog With DALL-E 3"}]},{"@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":"","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/35335","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=35335"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/35335\/revisions"}],"predecessor-version":[{"id":36961,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/35335\/revisions\/36961"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=35335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=35335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=35335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}