{"id":27805,"date":"2023-07-14T07:00:00","date_gmt":"2023-07-14T14:00:00","guid":{"rendered":"http:\/\/removing-and-changing-an-images-background-with-cloudinary-using-next.js-serverless-functions"},"modified":"2025-05-03T15:13:45","modified_gmt":"2025-05-03T22:13:45","slug":"removing-and-changing-an-images-background-with-cloudinary-using-next-js-serverless-functions","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/removing-and-changing-an-images-background-with-cloudinary-using-next-js-serverless-functions","title":{"rendered":"Change a Background With Cloudinary and Next.js"},"content":{"rendered":"

When dealing with images, often you want to be able to cut out the primary object and change the background, whether that\u2019s a pair of shoes you want to show in your store in a more life-like environment or if you simply want to change the background.<\/p>\n

But doing this manually can be a huge pain and take a lot of time!<\/p>\n

Instead, we can take advantage of Cloudinary AI using its background removal<\/a> tool to cut out our images and swap in whatever background we\u2019d like.<\/p>\n<\/div>\n\n

See Code on GitHub<\/a><\/p>\n

Before diving into the specifics of changing backgrounds with Cloudinary, it\u2019s important to understand some basics of handling images in Next.js. In Next.js, images are typically managed using the Image<\/code> component from next\/image<\/code>. This component requires specific props such as src<\/code>, width<\/code>, height<\/code>, and alt<\/code>. These props help in automatically determining the image\u2019s dimensions, which is crucial for preventing Cumulative Layout Shift (CLS) while the image is loading.<\/p>\n

Additionally, to make an image responsive in Next.js, you can utilize the next\/image<\/code> component along with the layout <\/code>attribute. This attribute accepts three values: \u2018fill\u2019, \u2018responsive\u2019, and \u2018fixed\u2019, allowing for greater flexibility in how the image is displayed across different screen sizes.<\/p>\n

For instance, you can start by importing the image component and defining the image path in the component\u2019s src<\/code> props. Wrap your image and other elements in a root element, like a fragment or a div, and insert other necessary HTML tags like an H1<\/code> tag.<\/p>\n

Step 0: Setting Up a Workspace<\/h2>\n

In my example, I\u2019m using Next.js<\/a>, which allows me to set up API endpoints that use serverless functions to proxy my custom uploads to Cloudinary.<\/p>\n

Whether or not you\u2019re following along with Next.js, the code we\u2019ll use should be transferrable to any other node.js-based application.<\/p>\n

To get started, I used my this Next.js Starter<\/a>, which creates a basic UI that will allow us to upload an image.<\/p>\n

You can do the same by running the command:<\/p>\n

yarn create next-app -e https:\/\/github.com\/colbyfayock\/demo-image-upload-starter my-image-background<\/span>\n# or<\/span>\nnpx create-next-app -e https:\/\/github.com\/colbyfayock\/demo-image-upload-starter my-image-background<\/span>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
You can then run the project locally by running:<\/p>\n
yarn dev\n# or<\/span>\nnpm run dev\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
When we select an image in the file-picker, we\u2019ll present that image on the page!<\/p>\n
\"Image<\/p>\n
Step 1: Installing and Configuring the Cloudinary Node SDK<\/h2>\n
We\u2019ll use the Cloudinary Node SDK to upload our images and change the background.<\/p>\n
First, let\u2019s install the SDK with:<\/p>\n
yarn add cloudinary\n# or<\/span>\nnpm install cloudinary\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Next, we\u2019ll import v2 of the SDK into our project with:<\/p>\n
import { v2 as<\/span> cloudinary } from 'cloudinary'<\/span>;\n# or<\/span>\nconst<\/span> cloudinary = require<\/span>('cloudinary'<\/span>).v2;\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Finally, to configure the SDK, we\u2019ll need to configure our Cloudinary Cloud Name, API Key, and API Secret.<\/p>\n
I recommend setting up a local environment variables file to avoid committing your secret keys to your Git provider or when storing sensitive data in general.<\/p>\n
First, create a file in the root of your project called .env.local<\/code> and add the following:<\/p>\n
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\"<Your<\/span> Cloud<\/span> Name<\/span>><\/span>\"\nCLOUDINARY_API_KEY=\"<Your<\/span> API<\/span> Key<\/span>><\/span>\"\nCLOUDINARY_API_SECRET=\"<Your<\/span> API<\/span> Secret<\/span>><\/span>\"\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
You can find these values at the top of your Cloudinary dashboard.<\/p>\n
\n
Note: We\u2019re prefixing the Cloud Name with NEXT_PUBLIC so that we can use that value in the client. Technically, we don\u2019t need to store this value in an environment variable, but since we\u2019re storing everything else, it makes it easier to manage from a single location.<\/p>\n<\/blockquote>\n
Now, when we go to use our SDK, those values will be available.<\/p>\n
Follow along with the commit!<\/a><\/p>\n
Step 2: Proxying Secure Upload and Resource Requests With Next.js Serverless Functions<\/h2>\n
To upload as a signed request and fetch our resource, which we\u2019ll need later, we should be able to use our credentials that we set up inside of .env.local<\/code>.<\/p>\n
We\u2019ll use Next.js serverless functions, which give us a node environment where those values won\u2019t be exposed but are still useable.<\/p>\n
Navigating to the pages\/api<\/code> directory, we can first add our Upload endpoint by creating a file called upload.js<\/code>.<\/p>\n
Inside pages\/api\/upload.js<\/code> add:<\/p>\n
const<\/span> cloudinary = require<\/span>('cloudinary'<\/span>).v2;\n\ncloudinary.config({\n  cloud_name<\/span>: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,\n  api_key<\/span>: process.env.CLOUDINARY_API_KEY,\n  api_secret<\/span>: process.env.CLOUDINARY_API_SECRET,\n  secure<\/span>: true<\/span>\n});\n\nexport<\/span> default<\/span> async<\/span> function<\/span> handler<\/span>(req, res<\/span>) <\/span>{\n  const<\/span> { image, options = {} } = JSON<\/span>.parse(req.body);\n\n  const<\/span> results = await<\/span> cloudinary.uploader.upload(image, options);\n\n  res.status(200<\/span>).json(results);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here, we\u2019ll:<\/p>\n