Thread by @saviomartin7

How to build a URL Shortner with Next Js and Rapid API?

Complete step-by-step tutorial on building your URL Shortner service from scratch.

A Thread 🧵👇️

1. Go to rapidapi.com/BigLobster/api… 🔗

Rapid API is a collection of 35k+ APIs. In this project, we use this Free API.

Create an account on Rapid API and get your key. Test endpoints and you can directly grab the code from that API.

{ 1 / 3 }

2. Now create a Next Js x Tailwind Project

Create a similar markup with your favourite tools.
Head over to github.com/RapidAPI/DevRe… to see the code I used.

{ 2 / 3 }

3. Now, let's the write the function to shorten the URL

Here is the function which fetches the API from Rapid API. Make sure you pass your Rapid API key in the headers. Last thing to do is the call this function on enter click.

{ 3 / 3 }

🥳 That's it! Congrats you just built your very first URL Shortner app.

Here is the source code: github.com/RapidAPI/DevRe…
And Live Demo: …dapi-example-url-shortener.vercel.app

Head over to rapidapi.com for more amazing APIs.

Thank you for reading!

Hey, I'm Savio 👋
I write daily threads on web development and developer resources.

If you found this Thread useful:
- Follow me (@saviomartin7) ✅
- Retweet it
- Turn on the notifications

Thank you for the support friends! 🙏