{"id":28526,"date":"2022-06-28T10:19:51","date_gmt":"2022-06-28T10:19:51","guid":{"rendered":"http:\/\/generate-cartoon-avatars-in-next"},"modified":"2025-02-24T15:14:13","modified_gmt":"2025-02-24T23:14:13","slug":"generate-cartoon-avatars-in-next","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/","title":{"rendered":"Generate Cartoon Avatars in NextJS"},"content":{"rendered":"

Having an avatar as a profile picture is pretty common these days. There are plenty of tools and artists that can create anything you want so you have unlimited options. You can get as particular as you want and maybe even come up with something no one has seen before.<\/p>\n

Of course, there\u2019s a way to generate all kinds of avatars with JavaScript. That\u2019s what we\u2019ll be doing in this post with faces.js<\/code><\/a>. This library lets us generate avatars based on a number of factors so we can have a little fun with this.<\/p>\n

Initial setup<\/h2>\n

We\u2019ll this cartoon avatar generator with Next. The whole app will be a form with a number of dropdowns the user can change to get different features for their avatar and then it\u2019ll immediately update the displayed avatar. Let\u2019s start by creating a new Next app with the following command:<\/p>\n

$ yarn create next-app --typescript\n<\/code><\/span><\/pre>\n
Follow the prompts and name the project cartoon-avatar<\/code>. Then we need to install the faces.js<\/code><\/a> package. We\u2019ll also be using the Material UI library<\/a> to make the app look better from the beginning. So run the following command to install everything we need:<\/p>\n
$ yarn add facesjs @mui\/material @emotion\/react @emotion\/styled\n<\/code><\/span><\/pre>\n
This is all we need to make this app work and look good. Now we can turn our attention to the code. We\u2019ll start by building the form since it will have the most moving pieces and it should be its own component.<\/p>\n
Create the form<\/h2>\n
First, let\u2019s create a new folder inside the pages<\/code> folder called components<\/code>. Inside this new components folder, make a new file called Form.tsx<\/code>. This will have a lot of code in it, but remember that it\u2019s only because we have a lot of options that we want to offer the user to customize their avatars. So in the Form.tsx<\/code> file, add the following code:<\/p>\n
\/\/ Form.tsx<\/span>\nimport<\/span> {\n  Container,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n} from<\/span> \"@mui\/material\"<\/span>;\nimport<\/span> { Options } from<\/span> \"..\/index\"<\/span>;\n\ninterface FormProps {\n  options<\/span>: Options;\n  updateAvatar: (options: any<\/span>) =><\/span> void<\/span>;\n}\n\nconst<\/span> Form = ({ options, updateAvatar }: FormProps<\/span>) =><\/span> {\n  return<\/span> (\n    <Container<\/span>><\/span>\n      <form<\/span>\n        style<\/span>={{<\/span>\n          marginBottom:<\/span> \"24px<\/span>\",\n          marginTop:<\/span> \"24px<\/span>\",\n          width:<\/span> \"800px<\/span>\",\n        }}\n      ><\/span>\n        <Stack<\/span> spacing<\/span>={2}<\/span>><\/span>\n          <FormControl<\/span> variant<\/span>=\"standard\"<\/span>><\/span>\n            <InputLabel<\/span> id<\/span>=\"body\"<\/span>><\/span>Body<\/InputLabel<\/span>><\/span>\n            <Select<\/span>\n              name<\/span>=\"body\"<\/span>\n              id<\/span>=\"body\"<\/span>\n              value<\/span>={options.body.id}<\/span>\n              onChange<\/span>={(e)<\/span> =><\/span> updateAvatar(e)}\n              label=\"Body\"\n            >\n              <MenuItem<\/span> value<\/span>=\"body\"<\/span>><\/span>\n                <em<\/span>><\/span>None<\/em<\/span>><\/span>\n              <\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"body2\"<\/span>><\/span>Type 1<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"body3\"<\/span>><\/span>Type 2<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"body5\"<\/span>><\/span>Type 3<\/MenuItem<\/span>><\/span>\n            <\/Select<\/span>><\/span>\n          <\/FormControl<\/span>><\/span>\n          <FormControl<\/span> variant<\/span>=\"standard\"<\/span>><\/span>\n            <InputLabel<\/span> id<\/span>=\"ear\"<\/span>><\/span>Ear<\/InputLabel<\/span>><\/span>\n            <Select<\/span>\n              name<\/span>=\"ear\"<\/span>\n              id<\/span>=\"ear\"<\/span>\n              value<\/span>={options.ear.id}<\/span>\n              onChange<\/span>={(e)<\/span> =><\/span> updateAvatar(e)}\n              label=\"Ear\"\n            >\n              <MenuItem<\/span> value<\/span>=\"ear1\"<\/span>><\/span>\n                <em<\/span>><\/span>None<\/em<\/span>><\/span>\n              <\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"ear2\"<\/span>><\/span>Type 1<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"ear3\"<\/span>><\/span>Type 2<\/MenuItem<\/span>><\/span>\n            <\/Select<\/span>><\/span>\n          <\/FormControl<\/span>><\/span>\n          <FormControl<\/span> variant<\/span>=\"standard\"<\/span>><\/span>\n            <InputLabel<\/span> id<\/span>=\"eye\"<\/span>><\/span>Eye<\/InputLabel<\/span>><\/span>\n            <Select<\/span>\n              name<\/span>=\"eye\"<\/span>\n              id<\/span>=\"eye\"<\/span>\n              value<\/span>={options.eye.id}<\/span>\n              onChange<\/span>={(e)<\/span> =><\/span> updateAvatar(e)}\n              label=\"Eye\"\n            >\n              <MenuItem<\/span> value<\/span>=\"eye13\"<\/span>><\/span>\n                <em<\/span>><\/span>None<\/em<\/span>><\/span>\n              <\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"eye5\"<\/span>><\/span>Type 1<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"eye19\"<\/span>><\/span>Type 2<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"eye12\"<\/span>><\/span>Type 3<\/MenuItem<\/span>><\/span>\n            <\/Select<\/span>><\/span>\n          <\/FormControl<\/span>><\/span>\n          <FormControl<\/span> variant<\/span>=\"standard\"<\/span>><\/span>\n            <InputLabel<\/span> id<\/span>=\"facialHair\"<\/span>><\/span>Facial Hair<\/InputLabel<\/span>><\/span>\n            <Select<\/span>\n              name<\/span>=\"facialHair\"<\/span>\n              id<\/span>=\"facialHair\"<\/span>\n              value<\/span>={options.facialHair.id}<\/span>\n              onChange<\/span>={(e)<\/span> =><\/span> updateAvatar(e)}\n              label=\"Facial Hair\"\n            >\n              <MenuItem<\/span> value<\/span>=\"none\"<\/span>><\/span>\n                <em<\/span>><\/span>None<\/em<\/span>><\/span>\n              <\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"fullgoatee4\"<\/span>><\/span>Type 1<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"loganSoul\"<\/span>><\/span>Type 2<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"sideburns3\"<\/span>><\/span>Type 3<\/MenuItem<\/span>><\/span>\n            <\/Select<\/span>><\/span>\n          <\/FormControl<\/span>><\/span>\n          <FormControl<\/span> variant<\/span>=\"standard\"<\/span>><\/span>\n            <InputLabel<\/span> id<\/span>=\"glasses\"<\/span>><\/span>Glasses<\/InputLabel<\/span>><\/span>\n            <Select<\/span>\n              name<\/span>=\"glasses\"<\/span>\n              id<\/span>=\"glasses\"<\/span>\n              value<\/span>={options.glasses.id}<\/span>\n              onChange<\/span>={(e)<\/span> =><\/span> updateAvatar(e)}\n              label=\"Glasses\"\n            >\n              <MenuItem<\/span> value<\/span>=\"none\"<\/span>><\/span>\n                <em<\/span>><\/span>None<\/em<\/span>><\/span>\n              <\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"glasses1-primary\"<\/span>><\/span>Type 1<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"glasses2-primary\"<\/span>><\/span>Type 2<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"glasses2-black\"<\/span>><\/span>Type 3<\/MenuItem<\/span>><\/span>\n            <\/Select<\/span>><\/span>\n          <\/FormControl<\/span>><\/span>\n          <FormControl<\/span> variant<\/span>=\"standard\"<\/span>><\/span>\n            <InputLabel<\/span> id<\/span>=\"hair\"<\/span>><\/span>Hair<\/InputLabel<\/span>><\/span>\n            <Select<\/span>\n              name<\/span>=\"hair\"<\/span>\n              id<\/span>=\"hair\"<\/span>\n              value<\/span>={options.hair.id}<\/span>\n              onChange<\/span>={(e)<\/span> =><\/span> updateAvatar(e)}\n              label=\"Hair\"\n            >\n              <MenuItem<\/span> value<\/span>=\"blowoutFade\"<\/span>><\/span>\n                <em<\/span>><\/span>None<\/em<\/span>><\/span>\n              <\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"curly\"<\/span>><\/span>Type 1<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"juice\"<\/span>><\/span>Type 2<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"parted\"<\/span>><\/span>Type 3<\/MenuItem<\/span>><\/span>\n            <\/Select<\/span>><\/span>\n          <\/FormControl<\/span>><\/span>\n          <FormControl<\/span> variant<\/span>=\"standard\"<\/span>><\/span>\n            <InputLabel<\/span> id<\/span>=\"head\"<\/span>><\/span>Head<\/InputLabel<\/span>><\/span>\n            <Select<\/span>\n              name<\/span>=\"head\"<\/span>\n              id<\/span>=\"head\"<\/span>\n              value<\/span>={options.head.id}<\/span>\n              onChange<\/span>={(e)<\/span> =><\/span> updateAvatar(e)}\n              label=\"Head\"\n            >\n              <MenuItem<\/span> value<\/span>=\"head8\"<\/span>><\/span>\n                <em<\/span>><\/span>None<\/em<\/span>><\/span>\n              <\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"head14\"<\/span>><\/span>Type 1<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"head3\"<\/span>><\/span>Type 2<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"head10\"<\/span>><\/span>Type 3<\/MenuItem<\/span>><\/span>\n            <\/Select<\/span>><\/span>\n          <\/FormControl<\/span>><\/span>\n          <FormControl<\/span> variant<\/span>=\"standard\"<\/span>><\/span>\n            <InputLabel<\/span> id<\/span>=\"nose\"<\/span>><\/span>Nose<\/InputLabel<\/span>><\/span>\n            <Select<\/span>\n              name<\/span>=\"nose\"<\/span>\n              id<\/span>=\"nose\"<\/span>\n              value<\/span>={options.nose.id}<\/span>\n              onChange<\/span>={(e)<\/span> =><\/span> updateAvatar(e)}\n              label=\"Nose\"\n            >\n              <MenuItem<\/span> value<\/span>=\"nose6\"<\/span>><\/span>\n                <em<\/span>><\/span>None<\/em<\/span>><\/span>\n              <\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"nose5\"<\/span>><\/span>Type 1<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"nose13\"<\/span>><\/span>Type 2<\/MenuItem<\/span>><\/span>\n              <MenuItem<\/span> value<\/span>=\"nose9\"<\/span>><\/span>Type 3<\/MenuItem<\/span>><\/span>\n            <\/Select<\/span>><\/span>\n          <\/FormControl<\/span>><\/span>\n        <\/Stack<\/span>><\/span>\n      <\/form<\/span>><\/span>\n    <\/Container<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> Form;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The first thing we do is import some components from MUI and a type from the index.tsx<\/code> file. Don\u2019t worry about that type yet because we\u2019ll get to it in a later section. After all the imports, we create another type for the props that get sent to the form. Finally, we write the return statement that has the form fields.<\/p>\n
There are 9 option dropdowns with 3-4 variations each. The options and their variants are based on values directly from the faces.js<\/code> library. You can play around with some of the other SVG values provided by the library if you want to add more variants or options. Each time a dropdown is changed, we call the updateAvatar<\/code> function that gets passed as a prop.<\/p>\n
This is everything for the form users will interact with. Now we can jump over to the part where we actually render the avatar based on the user\u2019s inputs.<\/p>\n
Add the avatar<\/h2>\n
This is where we get to have some fun and see things in action. Open the index.tsx<\/code> file in the pages<\/code> folder and delete everything. Then add the following code:<\/p>\n
\/\/ index.tsx<\/span>\nimport<\/span> type { NextPage } from<\/span> \"next\"<\/span>;\nimport<\/span> Head from<\/span> \"next\/head\"<\/span>;\nimport<\/span> * as<\/span> faces from<\/span> \"facesjs\"<\/span>;\nimport<\/span> { useEffect, useState } from<\/span> \"react\"<\/span>;\nimport<\/span> { Container } from<\/span> \"@mui\/material\"<\/span>;\nimport<\/span> Form from<\/span> \".\/components\/Form\"<\/span>;\n\nexport<\/span> interface Options {\n  body<\/span>: { id<\/span>: string };\n  ear: { id<\/span>: string };\n  eye: { id<\/span>: string };\n  facialHair: { id<\/span>: string };\n  glasses: { id<\/span>: string };\n  hair: { id<\/span>: string };\n  head: { id<\/span>: string };\n  mouth: { id<\/span>: string };\n  nose: { id<\/span>: string };\n}\n\nconst<\/span> Home: NextPage = ()<\/span> =><\/span> {\n  const<\/span> [options, setOptions] = useState<Options>({\n    body<\/span>: { id<\/span>: \"body2\"<\/span> },\n    ear<\/span>: { id<\/span>: \"ear3\"<\/span> },\n    eye<\/span>: { id<\/span>: \"eye5\"<\/span> },\n    facialHair<\/span>: { id<\/span>: \"none\"<\/span> },\n    glasses<\/span>: { id<\/span>: \"glasses2-black\"<\/span> },\n    hair<\/span>: { id<\/span>: \"juice\"<\/span> },\n    head<\/span>: { id<\/span>: \"head3\"<\/span> },\n    mouth<\/span>: { id<\/span>: \"mouth5\"<\/span> },\n    nose<\/span>: { id<\/span>: \"nose9\"<\/span> },\n  });\n\n  const<\/span> face = faces.generate();\n\n  useEffect(()<\/span> =><\/span> {\n    faces.display(\"avatar\"<\/span>, face, options);\n  }, [face, options]);\n\n  function<\/span> updateAvatar<\/span>(e: any<\/span>) <\/span>{\n    e.preventDefault();\n\n    const<\/span> updatedOptions = {\n      ...options,\n      [e.target.name]: { id<\/span>: e.target.value },\n    };\n\n    setOptions(updatedOptions);\n  }\n\n  return<\/span> (\n    <div<\/span>><\/span>\n      <Head<\/span>><\/span>\n        <title<\/span>><\/span>What Avatar Is Yours<\/title<\/span>><\/span>\n        <meta<\/span>\n          name<\/span>=\"description\"<\/span>\n          content<\/span>=\"uses faces.js to make random avatars\"<\/span>\n        \/><\/span>\n        <link<\/span> rel<\/span>=\"icon\"<\/span> href<\/span>=\"\/favicon.ico\"<\/span> \/><\/span>\n      <\/Head<\/span>><\/span>\n\n      <main<\/span> style<\/span>={{<\/span> width:<\/span> \"100<\/span>%\" }}><\/span>\n        <Container<\/span>><\/span>\n          <h1<\/span>><\/span>{`What's your face?`}<\/h1<\/span>><\/span>\n          <Form<\/span> options<\/span>={options}<\/span> updateAvatar<\/span>={updateAvatar}<\/span> \/><\/span>\n          <div<\/span>\n            id<\/span>=\"avatar\"<\/span>\n            style<\/span>={{<\/span> margin:<\/span> \"0<\/span> auto<\/span>\", height:<\/span> \"auto<\/span>\", width:<\/span> \"300px<\/span>\" }}\n          ><\/span><\/div<\/span>><\/span>\n        <\/Container<\/span>><\/span>\n      <\/main<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> Home;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is where we display the form and the avatar to users. We start by importing a few components and methods we need. You\u2019ll see the faces.js<\/code> library and our custom form component to note a few things. Next, we define the Options<\/code> type that we imported in the Form<\/code> component. So we know what the faces.js<\/code> library expects. Then we get into the Home<\/code> component.<\/p>\n
Inside the Home<\/code> component, we start by setting an initial state for the options. Then we create a new instance of an avatar using the generate<\/code> method provided by faces<\/code>. After that, we have a useEffect<\/code> hook to make update the avatar being displayed every time an option is updated. Next, there is the updateAvatar<\/code> function that will get called each time a form value is changed.<\/p>\n
We do a little object trick in this function to only update the value that has been changed instead of needing to update all of the values. Then we start adding components to the return statement here. The main things we return are the form and the <div><\/code> that the faces<\/code> library targets in the display<\/code> method called in the useEffect<\/code> hook.<\/p>\n
That\u2019s actually all we have to do for this app! Now you can play around with the avatars that get generated.<\/p>\n
\"complete<\/p>\n
Finished code<\/h2>\n
You can check out all of the code in the qr-card<\/code> folder of this repo<\/a>. You can also check out the app in this Code Sandbox<\/a>.<\/p>\n
<CodeSandBox\ntitle=\u201celated-leaf-s5di51\u201d\nid=\u201celated-leaf-s5di51\u201d\n\/><\/p>\n
Conclusion<\/h2>\n
There are a lot of ways to practice your JavaScript skills. For example, how would you have handled that object that gets updated based on a dynamic value? These are the little things that make app building a little faster every time you go through the process. Except in this case, instead of worrying about what happens in production, you get to see if your experiments work by looking at your avatar.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28527,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,212,246,371],"class_list":["post-28526","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-next-js","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nGenerate Cartoon Avatars in NextJS<\/title>\n<meta name=\"description\" content=\"In this post, we'll go over a common form implementation in Next to make a cartoon avatar generator. You'll see one of the ways you can dynamically update a component based on users playing around with inputs.\" \/>\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\/generate-cartoon-avatars-in-next\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generate Cartoon Avatars in NextJS\" \/>\n<meta property=\"og:description\" content=\"In this post, we'll go over a common form implementation in Next to make a cartoon avatar generator. You'll see one of the ways you can dynamically update a component based on users playing around with inputs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-28T10:19:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-24T23:14:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924241\/Web_Assets\/blog\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"6000\" \/>\n\t<meta property=\"og:image:height\" content=\"4000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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\/generate-cartoon-avatars-in-next\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Generate Cartoon Avatars in NextJS\",\"datePublished\":\"2022-06-28T10:19:51+00:00\",\"dateModified\":\"2025-02-24T23:14:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924241\/Web_Assets\/blog\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Next.js\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/\",\"name\":\"Generate Cartoon Avatars in NextJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924241\/Web_Assets\/blog\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7.jpg?_i=AA\",\"datePublished\":\"2022-06-28T10:19:51+00:00\",\"dateModified\":\"2025-02-24T23:14:13+00:00\",\"description\":\"In this post, we'll go over a common form implementation in Next to make a cartoon avatar generator. You'll see one of the ways you can dynamically update a component based on users playing around with inputs.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924241\/Web_Assets\/blog\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924241\/Web_Assets\/blog\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7.jpg?_i=AA\",\"width\":6000,\"height\":4000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generate Cartoon Avatars in NextJS\"}]},{\"@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":"Generate Cartoon Avatars in NextJS","description":"In this post, we'll go over a common form implementation in Next to make a cartoon avatar generator. You'll see one of the ways you can dynamically update a component based on users playing around with inputs.","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\/generate-cartoon-avatars-in-next\/","og_locale":"en_US","og_type":"article","og_title":"Generate Cartoon Avatars in NextJS","og_description":"In this post, we'll go over a common form implementation in Next to make a cartoon avatar generator. You'll see one of the ways you can dynamically update a component based on users playing around with inputs.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-28T10:19:51+00:00","article_modified_time":"2025-02-24T23:14:13+00:00","og_image":[{"width":6000,"height":4000,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924241\/Web_Assets\/blog\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/"},"author":{"name":"","@id":""},"headline":"Generate Cartoon Avatars in NextJS","datePublished":"2022-06-28T10:19:51+00:00","dateModified":"2025-02-24T23:14:13+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924241\/Web_Assets\/blog\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7.jpg?_i=AA","keywords":["Guest Post","Image","Next.js","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/","name":"Generate Cartoon Avatars in NextJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924241\/Web_Assets\/blog\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7.jpg?_i=AA","datePublished":"2022-06-28T10:19:51+00:00","dateModified":"2025-02-24T23:14:13+00:00","description":"In this post, we'll go over a common form implementation in Next to make a cartoon avatar generator. You'll see one of the ways you can dynamically update a component based on users playing around with inputs.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924241\/Web_Assets\/blog\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924241\/Web_Assets\/blog\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7.jpg?_i=AA","width":6000,"height":4000},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-cartoon-avatars-in-next\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Generate Cartoon Avatars in NextJS"}]},{"@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\/v1681924241\/Web_Assets\/blog\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7\/cc5c6a4b1e522ca1e14b7edfd9afcc592b8ecf21-6000x4000-1_28527a83c7.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28526","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=28526"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28526\/revisions"}],"predecessor-version":[{"id":36997,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28526\/revisions\/36997"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28527"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}