{"id":28137,"date":"2022-05-05T08:37:17","date_gmt":"2022-05-05T08:37:17","guid":{"rendered":"http:\/\/create-music-art-covers-using-ai-in-nextjs"},"modified":"2022-05-05T08:37:17","modified_gmt":"2022-05-05T08:37:17","slug":"create-music-art-covers-using-ai-in-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/","title":{"rendered":"Create Music Art Covers Using AI in Next.js"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Art is an expression of creativity, and the way it is created constantly evolves. In the past, it had to be done manually, leaving room for errors and a lot of stress. Now, you can create art at the click of a button.<\/p>\n<p>In this article, you will learn how to create a custom music album cover art using text and any image of your choice and enhance it using Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/documentation\/neural_artwork_style_transfer_addon\">Neural Art Style Transfer add-on.<\/a><\/p>\n<p><a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> is a cloud-based media management service that stores, transforms, optimizes, and delivers images and videos to your websites and applications. It also provides a variety of add-ons to enhance its capabilities and provide new and exciting ways to manage your media files.<\/p>\n<h2>CodeSandbox &amp; GitHub Repo<\/h2>\n<p>You can view a complete demo of this article on <a href=\"https:\/\/paper.dropbox.com\/ep\/redirect\/external-link?url=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fnextjs-music-art-demo-f87vjd%3Ffontsize%3D14%26hidenavigation%3D1%26theme%3Ddark&amp;hmac=0h0%2Fr3MChpq8vXYaHfHbphig6JxGUsupI75gw8yGu7Y%3D\">CodeSandbox<\/a> below:<\/p>\n<p><a href=\"https:\/\/codesandbox.io\/embed\/nextjs-music-art-demo-f87vjd?fontsize=14&amp;hidenavigation=1&amp;theme=dark\">https:\/\/codesandbox.io\/embed\/nextjs-music-art-demo-f87vjd?fontsize=14&amp;hidenavigation=1&amp;theme=dark<\/a><\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/nextjs-music-art-demo-f87vjd?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=\"Next.js music art cover\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><p>Explore its <a href=\"https:\/\/github.com\/dpkreativ\/nextjs-music-art-demo\">source code on GitHub<\/a>, or check out a <a href=\"http:\/\/nextjs-music-art-demo.vercel.app\/\">Vercel-hosted live version<\/a>.<\/p>\n<h2>Pre-requisites<\/h2>\n<p>To follow along with the steps presented in this article, you should have:<\/p>\n<ul>\n<li>Good knowledge of functional programming with JavaScript and React.<\/li>\n<li>A <a href=\"https:\/\/cloudinary.com\">Cloudinary<\/a> account. Create a free one <a href=\"https:\/\/cloudinary.com\/console\">here<\/a>.<\/li>\n<li>Experience working with NextJS will make this article easier to follow, but it is not required.<\/li>\n<\/ul>\n<h2>Set up the project<\/h2>\n<p>In your terminal, navigate to your preferred directory and run the command below to download and set up the starter files for this project:<\/p>\n<pre><code>yarn create next-app nextjs-music-art-demo -e https:\/\/github.com\/dpkreativ\/nextjs-music-art-starter\n<\/code><\/pre>\n<p>After its successful setup, open the project in your preferred code editor to view its source code. Run the command below to view it in your browser on <code>localhost:3000<\/code><\/p>\n<pre><code>yarn dev\n<\/code><\/pre>\n<h2>Register Cloudinary\u2019s Neural Artwork Style Transfer add-on<\/h2>\n<p>In your browser, log into your <a href=\"https:\/\/cloudinary.com\/console\">Cloudinary dashboard<\/a> and click on the \u201cAdd-ons\u201d tab to view the add-ons available on Cloudinary, then scroll down till you find and click on \u201cNeural Artwork Style Transfer\u201d:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_187FA86FEFDFA4CCE242014EF48F29E06680671BED1FC62E0F6EBE31DAC12953_1650969204503_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1386\" height=\"691\"\/><\/p>\n<p>Click on \u201cFree\u201d to subscribe to the free plan, which allows you to create up to 15 artworks each month:<\/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_187FA86FEFDFA4CCE242014EF48F29E06680671BED1FC62E0F6EBE31DAC12953_1650969422095_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1225\" height=\"673\"\/><\/p>\n<h2>Allow unsigned add-on transformations on Cloudinary.<\/h2>\n<p>In your Cloudinary dashboard, click on the \u201cSettings\u201d icon on the right side of the navigation bar. Click on the \u201cSecurity\u201d tab and scroll down till you locate \u201cUnsigned add-on transformations allowed\u201d:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_187FA86FEFDFA4CCE242014EF48F29E06680671BED1FC62E0F6EBE31DAC12953_1650969683594_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1255\" height=\"335\"\/><\/p>\n<p>Ensure that the \u201cNeural Artwork Style Transfer\u201d box is checked, then scroll down and click on the \u201cSave\u201d button.<\/p>\n<h2>Install and set up Cloudinary in your project<\/h2>\n<p>In your project\u2019s terminal, run the command below to install Cloudinary:<\/p>\n<pre><code>yarn add cloudinary\n<\/code><\/pre>\n<p>After its successful installation, store environment variables by creating a <code>.env.local<\/code> file in the root directory of your project and update it with the code below:<\/p>\n<pre><code>CLOUDINARY_NAME=&lt;YOUR CLOUDINARY CLOUD NAME COMES HERE&gt;\nCLOUDINARY_KEY=&lt;YOUR CLOUDINARY API KEY COMES HERE&gt;\nCLOUDINARY_SECRET=&lt;YOUR CLOUDINARY API SECRET COMES HERE&gt;\n<\/code><\/pre>\n<p>Open your Cloudinary dashboard in your browser and copy your <code>Cloud Name<\/code>, <code>API Key<\/code>, and <code>API Secret<\/code>. Update the values in <code>.env.local<\/code> with the Cloudinary credentials you got.<\/p>\n<h2>Create an album art using your uploaded image and text<\/h2>\n<p>In your code editor, create a <code>uploadAlbumApi.js<\/code> file in the <code>pages\/api\/<\/code> folder and update it with the code below:<\/p>\n<pre><code>const cloudinary = require('cloudinary').v2;\n\ncloudinary.config({\n  cloud_name: process.env.CLOUDINARY_NAME,\n  api_key: process.env.CLOUDINARY_KEY,\n  api_secret: process.env.CLOUDINARY_SECRET,\n});\n\nexport default (req, res) =&gt; {\n  const text = req.body.text;\n  const image = req.body.image;\n  return cloudinary.uploader.upload(\n    image,\n    {\n      transformation: [\n        {\n          overlay: {\n            font_family: 'Montserrat',\n            font_size: 144,\n            text: text,\n          },\n        },\n        { flags: 'layer_apply', gravity: 'north_east' },\n      ],\n    },\n    (error, result) =&gt; {\n      if (error) return res.status(500).json({ Error: error });\n      return res.status(200).json({ data: { ...result } });\n    }\n  );\n};\n<\/code><\/pre>\n<p>In the code block above, you did the following:<\/p>\n<ul>\n<li>Imported <code>cloudinary<\/code> and set the value of its config parameters &#8211; <code>cloud_name<\/code>, <code>api_key<\/code>, <code>api_secret<\/code> &#8211; with data from your <code>.env.local<\/code> file.<\/li>\n<li>Retrieved the text and image data from the request payload.<\/li>\n<li>Used the Cloudinary upload method to upload the image, applying the text as an overlain transformation.<\/li>\n<li>Handled any error from the upload operation and returned the data on a successful image upload to Cloudinary.<\/li>\n<\/ul>\n<p>In your <code>pages\/index.js<\/code> file, update the <code>handleAlbumSubmit()<\/code> function with the code below:<\/p>\n<pre><code>  \/\/ === ONSUBMIT FUNCTIONS ===\n  \/* Handle Album Submit: \n      - This function uploads your image and text data to create your album art.\n  *\/\n  const handleAlbumSubmit = async (e) =&gt; {\n    e.preventDefault();\n    setLoadingMyAlbumArt(true);\n    try {\n      const { data } = await fetch('\/api\/uploadAlbumApi', {\n        method: 'POST',\n        body: JSON.stringify(myAlbumArtData),\n        headers: {\n          'Content-Type': 'application\/json',\n        },\n      }).then((res) =&gt; res.json());\n      setMyAlbumArtData({ ...myAlbumArtData, text: '', image: '' });\n      setMyAlbumArtPreview(data);\n      setLoadingMyAlbumArt(false);\n    } catch (error) {\n      console.log({ Error: error });\n      setLoadingMyAlbumArt(false);\n    }\n  };\n<\/code><\/pre>\n<p>In the code above, you<\/p>\n<ul>\n<li>Used <code>e.preventDefault()<\/code> to prevent the page from reloading and <code>setLoadingMyAlbumArt()<\/code> to <code>true<\/code>, which triggers the loading state of the submit button.<\/li>\n<li>Used a <code>try-catch<\/code> block to send a <code>fetch()<\/code> request to your <code>uploadAlbumApi<\/code>, with <code>myAlbumArtData<\/code> as its body. It returns a JSON response containing your <code>data<\/code> object.<\/li>\n<li>Cleared the input fields using empty strings in <code>setMyAlbumArtData()<\/code> and stored the contents of your <code>data<\/code> object using <code>setMyAlbumArtPreview<\/code>.<\/li>\n<li>Turned off the loading state of the submit button using <code>setLoadingMyAlbumArt(false)<\/code>, and in the <code>catch<\/code> block, you logged errors to the console.<\/li>\n<\/ul>\n<p>At this point, you can create an album art through Cloudinary by uploading an image and a text. Test it out on your browser:<\/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_187FA86FEFDFA4CCE242014EF48F29E06680671BED1FC62E0F6EBE31DAC12953_1651115889567_ezgif.com-gif-maker.gif\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"480\" height=\"270\"\/><\/p>\n<h2>Apply Neural Style Transfer on album art<\/h2>\n<p>In your code editor, create a <code>uploadPopArtApi.js<\/code> file in the <code>pages\/api\/<\/code> folder and update it with the code below:<\/p>\n<pre><code>const cloudinary = require('cloudinary').v2;\ncloudinary.config({\n  cloud_name: process.env.CLOUDINARY_NAME,\n  api_key: process.env.CLOUDINARY_KEY,\n  api_secret: process.env.CLOUDINARY_SECRET,\n});\nexport default (req, res) =&gt; {\n  const image = req.body;\n  return cloudinary.uploader.upload(image, (error, result) =&gt; {\n    if (error) return res.status(500).json({ Error: error });\n    return res.status(200).json({ data: { ...result } });\n  });\n};\n<\/code><\/pre>\n<p>Similar to the previous image upload API function you created above, this function uploads an image to Cloudinary, only this time, without image transformations.<\/p>\n<p>In <code>pages\/index.js<\/code>, create the <code>handlePopArtSubmit()<\/code> function with the code below:<\/p>\n<pre><code>  const handlePopArtSubmit = async (e) =&gt; {\n    e.preventDefault();\n    setLoadingPopArt(true);\n    try {\n      const { data } = await fetch('.\/api\/uploadPopArtApi', {\n        method: 'POST',\n        body: popArtPreview,\n      }).then((res) =&gt; res.json());\n      setPopArtData(data);\n      setLoadingPopArt(false);\n    } catch (error) {\n      console.log({ Error: error });\n      setLoadingPopArt(false);\n    }\n  };\n<\/code><\/pre>\n<p>In the code above:<\/p>\n<ul>\n<li>You set the loading state of the <code>Apply Neural Transfer<\/code> button to true.<\/li>\n<li>You made a <code>POST<\/code> request to <code>uploadPopArtApi<\/code>, with <code>popArtPreview<\/code> as the request\u2019s body.<\/li>\n<li>Your response is a <code>data<\/code> object in <code>json<\/code> format, which you destructured into the <code>{ data }<\/code> variable.<\/li>\n<li>You then add the data gotten from the API response to the <code>popArtData<\/code> state.<\/li>\n<\/ul>\n<p>Scroll down your <code>pages\/index.js<\/code>  file till you see the code below:<\/p>\n<pre><code>{\/* === SECTION THREE: DISPLAY AI-GENERATED ALBUM ART ===\n  In this section below: \n    - You're creating a dynamic image URL with Neural Art Style Transfer parameters applied.\n    - The URL is set as the image src and displays the AI-generated album art.\n*\/}\n&lt;section className=&quot;md:col-span-2&quot;&gt;\n  &lt;div className=&quot;w-full h-72 border-blue-400 border-2 rounded-lg&quot;&gt;\n    {popArtData !== undefined ? (\n      &lt;img\n        src={`https:\/\/res.cloudinary.com\/dpkreativ\/image\/upload\/l_${popArtData.public_id}\/e_style_transfer,fl_layer_apply\/${myAlbumArtPreview.public_id}.${myAlbumArtPreview.format}`}\n        alt=&quot;final image&quot; className=&quot;object-contain h-full w-full&quot;\n      \/&gt;\n    ) : (\n      &lt;span className=&quot;self-center flex flex-col space-y-3 p-5&quot;&gt;\n        &lt;p className=&quot;italic&quot;&gt;Final image here&lt;\/p&gt;\n      &lt;\/span&gt;\n    )}\n  &lt;\/div&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n<p>In the code above, using the Cloudinary dynamic URL transformation parameters, you added a neural style transfer layer from the new image <code>popArtData<\/code> to the original image <code>myAlbumArtPreview<\/code>.<\/p>\n<p>Here is the final demo:<\/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_187FA86FEFDFA4CCE242014EF48F29E06680671BED1FC62E0F6EBE31DAC12953_1651383195739_ezgif.com-gif-maker+1.gif\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"281\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>In this article, you learned how to create and customize your music cover art using NextJS, Cloudinary\u2019s transformation parameters,  and neural style transfer AI. You can explore it further by browsing through Cloudinary\u2019s official documentation on <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#image_and_text_overlays\">image transformations<\/a> or <a href=\"https:\/\/cloudinary.com\/documentation\/neural_artwork_style_transfer_addon\">neural style transfer add-ons<\/a>.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/neural_artwork_style_transfer_addon\">Neural Artwork Style Transfer add-on | Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/upload_images\">Programmatically Uploading Images, Videos, and other Files | Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/transformations_on_upload\">Transformations on Upload | Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/upload_images\">Image Transformations for Developers | Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/layers\">Apply Overlay and Underlay Transformations | Cloudinary<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28138,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,212,371],"class_list":["post-28137","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-next-js","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create Music Art Covers Using AI in Next.js<\/title>\n<meta name=\"description\" content=\"In this article, you will learn how to create a custom music album cover art using text and any image of your choice and enhance it using Cloudinary\u2019s Neural Art Style Transfer add-on.\" \/>\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\/create-music-art-covers-using-ai-in-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Music Art Covers Using AI in Next.js\" \/>\n<meta property=\"og:description\" content=\"In this article, you will learn how to create a custom music album cover art using text and any image of your choice and enhance it using Cloudinary\u2019s Neural Art Style Transfer add-on.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-05T08:37:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681934259\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"840\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create Music Art Covers Using AI in Next.js\",\"datePublished\":\"2022-05-05T08:37:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681934259\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Next.js\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/\",\"name\":\"Create Music Art Covers Using AI in Next.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681934259\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3.png?_i=AA\",\"datePublished\":\"2022-05-05T08:37:17+00:00\",\"description\":\"In this article, you will learn how to create a custom music album cover art using text and any image of your choice and enhance it using Cloudinary\u2019s Neural Art Style Transfer add-on.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681934259\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681934259\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3.png?_i=AA\",\"width\":1600,\"height\":840},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Music Art Covers Using AI in Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create Music Art Covers Using AI in Next.js","description":"In this article, you will learn how to create a custom music album cover art using text and any image of your choice and enhance it using Cloudinary\u2019s Neural Art Style Transfer add-on.","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\/create-music-art-covers-using-ai-in-nextjs\/","og_locale":"en_US","og_type":"article","og_title":"Create Music Art Covers Using AI in Next.js","og_description":"In this article, you will learn how to create a custom music album cover art using text and any image of your choice and enhance it using Cloudinary\u2019s Neural Art Style Transfer add-on.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-05-05T08:37:17+00:00","og_image":[{"width":1600,"height":840,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681934259\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3.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\/create-music-art-covers-using-ai-in-nextjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/"},"author":{"name":"","@id":""},"headline":"Create Music Art Covers Using AI in Next.js","datePublished":"2022-05-05T08:37:17+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681934259\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3.png?_i=AA","keywords":["Guest Post","Image","Next.js","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/","name":"Create Music Art Covers Using AI in Next.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681934259\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3.png?_i=AA","datePublished":"2022-05-05T08:37:17+00:00","description":"In this article, you will learn how to create a custom music album cover art using text and any image of your choice and enhance it using Cloudinary\u2019s Neural Art Style Transfer add-on.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681934259\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681934259\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3.png?_i=AA","width":1600,"height":840},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-music-art-covers-using-ai-in-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Music Art Covers Using AI in Next.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681934259\/Web_Assets\/blog\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3\/75988f88bb8e43a6e6af63a8f29400a78eb9a2d5-1600x840-2_28138b3ef3.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28137","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=28137"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28137\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28138"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}