{"id":27898,"date":"2022-03-23T21:57:13","date_gmt":"2022-03-23T21:57:13","guid":{"rendered":"http:\/\/Build-an-avatar-image-generator-with-text-initials-in-Next.js"},"modified":"2025-03-09T13:45:33","modified_gmt":"2025-03-09T20:45:33","slug":"build-an-avatar-image-generator-with-text-initials-in-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-avatar-image-generator-with-text-initials-in-next-js\/","title":{"rendered":"Build an Avatar Image Generator"},"content":{"rendered":"

A user\u2019s avatar represents their identity and is one of the most frequently used UI elements. Despite it being a small-sized object, it has enormous power when used in websites and other web applications. Web applications like this that allow personalization enhance the user\u2019s experience and establish a bond between a product and its users.<\/p>\n

This article demonstrates how to use Cloudinary<\/a> to create a Next.js avatar image generator app.\nNext.js<\/a> is a React-based framework with functionalities like pre-rendering, both static generation (SSG) and server-side rendering (SSR), automatic code-splitting for faster page loads, and API routes to build API endpoints with serverless functions for back-end features.<\/p>\n

Web developers utilize the cloud-based media management tools within Cloudinary to manage media-related assets in web applications. In this tutorial, Cloudinary will be used to store, retrieve, and make numerous image alterations.<\/p>\n

\nMoreover, with the increasing demand for personalization, there are several other features that can be integrated into avatar generators. These include:\n<\/p>\n

\nMultiple Font Styles and Colors:<\/strong> Allowing users to choose from a variety of font styles and colors can make the avatar more personalized and in line with the user’s preferences.\n<\/p>\n

\nRandom Color Generation:<\/strong> Instead of sticking to a few predefined colors, providing an option to generate random colors can add an element of surprise and uniqueness to each avatar.\n<\/p>\n

\nUse of Emojis:<\/strong> Emojis are universally recognized and loved. Incorporating them into the avatar can make it more fun and relatable.\n<\/p>\n

\nBackground Image Customization: <\/strong>Users can be given the option to choose a background image or an overlay, adding depth and character to the avatar.\n<\/p>\n

\nNo Registration Requirement: <\/strong>Making the avatar generator accessible without the need for registration can increase its usability and appeal to a wider audience.\n<\/p>\n

CodeSandbox<\/h2>\n

You can fork this Codesandbox<\/a> run the demo or get started quickly.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Prerequisites<\/h2>\n

To follow the steps in this article, you must have:<\/p>\n

- Adequate knowledge of JavaScript and React.js\n- The latest version of Node.js installed\n- A terminal such as ITerm2(Mac OS) or Git bash (Windows)\n- A Cloudinary account - Create one [here](https:\/\/cloudinary.com\/homepage-2).\n<\/code><\/pre>\n
Setting up a Cloudinary account<\/h2>\n
After successfully creating an account, Cloudinary will us redirect to our account\u2019s dashboard page, where we can see account details that will be useful later on, including:<\/p>\n
- Cloud name\n- API Key\n- API Secret\n<\/code><\/pre>\n
NOTE:<\/strong> Do not share these details with anyone.<\/p>\n
Installing the project dependencies<\/h2>\n
We create a Next.js app in a new folder called avatar-gen and run the following command in its terminal:<\/p>\n
    npx<\/span> create-next-app<\/span> avatar-gen<\/span>\n    cd<\/span> avatar-gen<\/span>\n    #install<\/span> cloudinary<\/span> for<\/span> React<\/span> SDK<\/span> and<\/span> Lodash<\/span>\n    npm<\/span> install<\/span> cloudinary-react<\/span> lodash<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
The code above snippet will install node packages for Next.js, Cloudinary React SDK, and lodash.\nRunning npm run dev<\/code> should render an app with an affirmative message on your browser:<\/p>\n
\"\"<\/p>\n
Defining our components<\/h2>\n
In development, replace the default code in index.js<\/code> with this:<\/p>\n
    import<\/span> Head from<\/span> 'next\/head'<\/span>\n    import<\/span> styles from<\/span> '..\/styles\/Home.module.css'<\/span>;\n    import<\/span> React, { useState } from<\/span> \"react\"<\/span>;\n    \n    export<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n     return<\/span> (\n     <div<\/span> className<\/span>={styles.container}<\/span>><\/span>\n           <h1<\/span> className<\/span>={styles.title}<\/span>><\/span>\n              Avatar Generator\n            <\/h1<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      )\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, in index.js<\/code> let\u2019s create a form with two input fields for a user\u2019s First and Last name and assign them to a state variable called formData<\/code>.<\/p>\n
     const<\/span> [formData, setFormData] = useState({\n          firstName<\/span>: ''<\/span>,\n          lastName<\/span>: ''<\/span>\n        })\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
For the functionality of the input fields, we will declare a new function called handleChange<\/code> for the onChange<\/code> event handler, which detects when the value of an input field changes. The function stores the input\u2019s current value in a state variable.<\/p>\n
    const<\/span> handleSubmit = (e<\/span>) =><\/span> {\n    e.preventDefault();\n        setFormData({\n          firstName<\/span> : ''<\/span>,\n          lastName<\/span>: ''<\/span>\n        })\n      }\n    }\n    \n    const<\/span> handleChange = (e<\/span>) =><\/span>{\n        setFormData( {...formData, [e.target.name] : e.target.value})\n      }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the code block above, we assigned a function \u2014 handleSubmit<\/code> to the button\u2019s onClick<\/code> handler. The function handles the data that was entered into the form by the user.<\/p>\n
Getting the Avatar initials<\/h2>\n
We will define two state variables to store the values whenever the form is submitted and retrieve each value\u2019s initial from both input fields.<\/p>\n
    export<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n    const<\/span> [pushedData, setPushedData] = useState()\n    const<\/span> [avatarInitials, setAvatarInitials] = useState({\n        firstInitial<\/span>: ''<\/span>,\n        secondInitial<\/span>: ''<\/span>\n      }) \n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We need to add a function that updates the state variables with the values after submitting the form. As a result, we will create a function that retrieves the values\u2019 initials and reset the form.<\/p>\n
    const<\/span> handleSubmit = (e<\/span>) =><\/span> {\n        e.preventDefault();\n        getInitials(formData)\n        setPushedData(formData)\n        setFormData({\n          firstName<\/span> : ''<\/span>,\n          lastName<\/span>: ''<\/span>\n        })\n      }\n    \n    const<\/span> getInitials = (e<\/span>) =><\/span> {\n        let<\/span> firstName = e.firstName.split(''<\/span>);\n        let<\/span> lastName = e.lastName.split(''<\/span>);\n        setAvatarInitials({\n          firstInitial<\/span>: firstName[0<\/span>],\n          secondInitial<\/span>: lastName[0<\/span>]\n        })\n        setText(true<\/span>)\n      }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Using Cloudinary Transformations<\/h2>\n
To access Cloudinary\u2019s SDK(Software Development Kit), we import the required elements of the cloudinary-react library in the index.js<\/code> file.<\/p>\n
<!\u2014 Is this import suppose to be for index.js \u2026 perhaps using a comment like this one above code to specify to reader \u2019\/\/ index.js \u2019 \u2014><\/p>\n
import<\/span> {Image, Transformation, CloudinaryContext} from<\/span> 'cloudinary-react'<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then, in the CloudinaryContext component, we apply the Cloud name from our account details on the dashboard page and also include the publicId of the avatar image in the Image component:<\/p>\n
<!\u2014 Can you please mention to place code within return() \u2014><\/p>\n
export<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n  \/\/ component definitions<\/span>\n\n  return<\/span> (\n    <div<\/span> className<\/span>={styles.container}<\/span>><\/span>\n      {\/* Head component *\/}\n\n      <main<\/span> className<\/span>={styles.main}<\/span>><\/span>\n        <form<\/span> className<\/span>={styles.form}<\/span>><\/span>\n          <h1<\/span> className<\/span>={styles.title}<\/span>><\/span>Avatar Generator<\/h1<\/span>><\/span>\n          <div<\/span> className<\/span>={styles.image}<\/span>><\/span>\n            <CloudinaryContext<\/span> cloudName<\/span>=\"your-public-id\"<\/span>><\/span>\n              <Image<\/span> publicId<\/span>=\"sample\"<\/span> alt<\/span>=\"profile\"<\/span>><\/span>\n                \n              <\/Image<\/span>><\/span>\n            <\/CloudinaryContext<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/form<\/span>><\/span>\n      <\/main<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You can use the publicId of any image in your Cloudinary account.<\/p>\n
Next, we will use the Transformation<\/code> component to convert the image to a blurry circular 150×150 thumbnail with \u201cAB\u201d as its default value.<\/p>\n
    <CloudinaryContext<\/span> cloudName<\/span>=\"your-cloud-name\"<\/span>><\/span>\n      <Image<\/span> publicId<\/span>=\"sample\"<\/span> alt<\/span>=\"profile\"<\/span>><\/span>\n        <Transformation<\/span> width<\/span>=\"150\"<\/span> height<\/span>=\"150\"<\/span> gravity<\/span>=\"face\"<\/span> effect<\/span>=\"blur:200\"<\/span> radius<\/span>=\"max\"<\/span> crop<\/span>=\"thumb\"<\/span> \/><\/span>\n        <Transformation<\/span> background<\/span>=\"#C5E5FC\"<\/span> \/><\/span>\n        <Transformation<\/span> overlay<\/span>={{fontFamily:<\/span> \"Arial<\/span>\", fontSize:<\/span> 50<\/span>, fontWeight:<\/span> \"bold<\/span>\", text:<\/span> \"AB<\/span>\"}} color<\/span>=\"white\"<\/span> \/><\/span>\n      <\/Image<\/span>><\/span>\n    <\/CloudinaryContext<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Finally, we create a boolean state variable to display the avatar\u2019s initials and set it to false<\/code>.<\/p>\n
    const<\/span> [text, setText] = useState(false<\/span>)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then, use a ternary conditional rendering<\/a> to replace the default value with data from avatarInitials<\/code> if text<\/code> is true<\/code>; else, it should return \u201cAB\u201d as the default value.<\/p>\n
    <CloudinaryContext<\/span> cloudName<\/span>=\"your-cloud-name\"<\/span>><\/span>\n      <Image<\/span> publicId<\/span>=\"sample\"<\/span> alt<\/span>=\"profile\"<\/span>><\/span>\n        <Transformation<\/span> width<\/span>=\"150\"<\/span> height<\/span>=\"150\"<\/span> gravity<\/span>=\"face\"<\/span> effect<\/span>=\"blur:200\"<\/span> radius<\/span>=\"max\"<\/span> crop<\/span>=\"thumb\"<\/span> \/><\/span>\n        <Transformation<\/span> background<\/span>=\"#C5E5FC\"<\/span> \/><\/span>\n        <Transformation<\/span> overlay<\/span>={{fontFamily:<\/span> \"Arial<\/span>\", fontSize:<\/span> 50<\/span>, fontWeight:<\/span> \"bold<\/span>\", text:<\/span> `${text<\/span> ? avatarInitials.firstInitial<\/span> :<\/span> \"A<\/span>\"}${text<\/span> ? avatarInitials.secondInitial<\/span> :<\/span> \"B<\/span>\"}`}} color<\/span>=\"white\"<\/span> \/><\/span>\n      <\/Image<\/span>><\/span>\n    <\/CloudinaryContext<\/span>><\/span>                    \n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Here\u2019s what the page looks like.<\/p>\n
\"\"<\/p>\n
You can right-click on the avatar image and save it if you like.<\/p>\n
<!\u2014 Ran into ERROR: loads\/assign , solution: [yarn add lodash] \u2014><\/p>\n
<!\u2014 Ran into ERROR: useState is not defined , solution [import React, { useState } from \u2018react\u2019;\n] in index.js\nCOMMENT-WILLIAM: Fixed all these thanks.\n\u2014><\/p>\n
Resources<\/h2>\n
Summary<\/h2>\n
In this post we built an avatar image generator that takes in two names and makes an avatar image out of it. Try to change the background image of the generated avatar image to one in your Cloudinary account.<\/p>\n
Here\u2019s a link to the project repository on Github<\/a>.<\/p>\n