Getting started with Serverless Functions using Vercel — II
Tags: serverless, nextjs, javascript, tutorial
Published: 2022-07-20 18:41:17

**\[May 22, 2022\]**

Hey all!  
This is a continuation of the previous post on serverless functions. In this post, I have changed the approach slightly on how we can get country flag data and consume it as a user.  
Check my previous blog post before going forward :)

[Getting started with Serverless Functions using Vercel — I](https://medium.com/timeless/getting-started-with-serverless-functions-using-vercel-i-868ab649fdce)

Let us get started.

![Cover Image](https://miro.medium.com/max/1400/1*8DC8TjqgLGqeNENS8TsfFA.png)

In the previous post, we had created serverless functions which were consumed using Axios POST request.

So I thought, why not use it as a GET request and serve the image as a response.

That would make the API something like this:

**_<DeployedURL>/api/getCountryFlagByNationality?nationality=Australian_**

and we get a response like this:

![Image of Flag](https://miro.medium.com/max/1400/1*q4v1OXbcSWgCYR6x2GIdig.png)

Pretty simple right?

But the thing is… **I have no idea where to get started.**

![MEME-1](https://miro.medium.com/max/920/0*ySXPd9qpk_5kaia0.jpg)

So let me do some googling and get to know about it.

Two things I need to know from what I see are:

---

1.  Getting the query params from the URL itself
2.  Serve images as a response

![MEME-2](https://miro.medium.com/max/1400/0*xE12QIXCxNcExiQE.jpg)

![MEME-3](https://miro.medium.com/max/1400/0*6sTf-H1fCHtxexcP.png)

---

**\[June 11, 2022\]**

I happen to remember from my subconscious memory 😅 that one of the open-source repo of one of my colleagues ([Anurag Hazra's github-readme-stats](https://github.com/anuraghazra/github-readme-stats)) served SVG as a response.

So I happen to look at the code and get a faint idea.

The thing was in his open-source he has created an SVG and added details.

![OS Reference](https://miro.medium.com/max/492/1*aDCOG9jcVyrA3r0ZmS2cTw.png)

What I had was a link to the image as an SVG.

There are some steps to get it to work. Let me take you through this.

Let us assume a case we need a flag based on nationality.

Now, as we are passing the param in the URL. You can get the variable from `req.query` your serverless function.

```
const { nationality } = _req_.query;
```

We will get our image URL from the library by doing this

```
const image_url = findFlagUrlByNationality(nationality);
```

We need a help of a tiny library GOT (not Game of Thrones) 😜

[Checkout the GOT package here.](https://www.npmjs.com/package/got)

It is a powerful HTTP request library that will help to get our image of the flag.

```
const imageRequest = got(image_url);
```

This returns a Promise, which we can resolve to get the image and the buffer.

```

const [imageResponse, imageBuffer] = 
     await Promise.all([imageRequest, imageRequest.buffer()]);

```

With this, we construct the response of our serverless function.

1.  Set the headers, add `cache-control` & `content-type`

```

res.setHeader("Cache-Control", "s-maxage=43200");

res.setHeader("content-type", imageResponse.headers["content-type"]);
```

2. Send the Image Buffer as a response

```
_res_.send(imageBuffer);
```

This wraps our serverless function. Let us try how it works.

Open Chrome and head to

```
[http://localhost:3000/api/getCountryFlagByNationality?nationality=Australian](http://localhost:3000/api/getCountryFlagByNationality?nationality=Australian)
```

This would now return the Flag of Australia as a response.

![Flag of Australia](https://miro.medium.com/max/1400/1*e4SDUnkQEGcA-2FVaMevoQ.png)

Woah! 💥

Let us deploy it, and there you go; you have the SVG being served using a GET request.

With this, you can pass our serverless function API directly to the src of HTML <img />

Something like this:

![Example how to use the new API](https://miro.medium.com/max/1400/1*BvY4D_oszDyYMpmeADFuiw.png)

Click [here](https://country-flags-topaz.vercel.app/api/getCountryFlagByISO2Code?iso2code=AU) to see the image of the Australia Flag.

The serverless functions have been deployed in the URL :

[https://country-flags-topaz.vercel.app](https://country-flags-topaz.vercel.app/api/getCountryFlagByISO2Code?iso2code=AU)

Usage:

{% embed https://gist.github.com/Karthik-B-06/ba6255fbccb004fa366fc0156817142a.js %}

{% embed https://gist.github.com/Karthik-B-06/3ec750d2182f479413f05ddc04d05411 %}

------

Check out other examples [here](https://github.com/timelessco/country-flags#readme).

Head to the [repo](https://github.com/timelessco/country-flags) and deploy an instance for yourself :)

That brings us to the end of this post.

---


> _This is_ [**_Karthik_**](https://twitter.com/_iam_karthik) _from_ [_Timeless_](http://timeless.co/)

If you find this blog post helpful, tell me in the comments would love to know your views. Thank you :)

If you find any difficulties or see anything which could be done better, please feel free to add your comments!