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… 🔗

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… 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:…
And Live Demo: …

Head over to 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! 🙏

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Savio Martin ⚡️

Savio Martin ⚡️ Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @saviomartin7

21 Oct
10 Killer Websites for Web Developers and Designers!! 🤯

Amazing websites to save 10+ hours every week. The ultimate list of the best developer tools.

A Thread 🧵👇️

3d Icons is a collection of beautifully crafted open source 3D icons completely free to use.

{ 1 / 10 }

Newly built Tailwind CSS components library with collections of built in elements, easy to use.

{ 2 / 10 }
Read 12 tweets
20 Oct
Learn Web Development for FREE


Web Fundamentals by Google has everything you need to learn as a complete begginer. Text and video content by experts.

{ 1 / 10 }

W3Schools is one of the most popular place to learn web development technologies with exercises and live editor.

{ 2 / 10 }
Read 12 tweets
19 Oct
Good design is essential for a successful website.

Here are 10 amazing sites to get free design inspiration to create world class products.

A Thread 🧵👇️

Dribbble is the leading destination to find & showcase creative work.

{ 1 / 10 }

Awwwards is featuring the most beautiful works on design, creativity and innovation on the internet.

{ 2 / 10 }
Read 12 tweets
18 Oct
GitHub Repositories to Crush any Programming Interview 🔥

Take advantage of these amazing GitHub repositories to land your dream job.

A Thread 🧵👇

Coding Interview University is a complete computer science study plan to become a software engineer.

{ 1 / 10 }

Tech Interview Handbook has curated interview preparation materials for busy engineers.

{ 2 / 10 }
Read 12 tweets
17 Oct
Best YouTube Channels to learn Web Development

A Thread 🧵👇️
1. FreeCodeCamp

FreeCodeCamp is a non-profit organisation that'll teach to learn to code for free. 🔗

{ 1 / 10 }
2. Traversy Media

Traversy Media creates crash courses to learn programming in a very easy way. He also collaborates with great creators.… 🔗

{ 2 / 10 }
Read 12 tweets
16 Oct
Are you a Frontend Developer?

Here are 20 amazing websites to save you 10+ hours every week.

A Thread 🧵👇️

High-class illustrations for web and mobile projects.

{ 1 / 20 }

Build browser extensions effortlessly on the web.

{ 2 / 20 }
Read 22 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!