In this video we will build a url shortener application with Next.js. We use Next.js middleware, edge functions and serverless Redis. The application is just like any url shortener & redirecter service such as bit.ly, geni.us or tinyurl.
Check out Upstash: https://bit.ly/39o6SoI
➡️ Edge functions VS Serverless functions: https://www.youtube.com/watch?v=M2KUAb1FH1Y
➡️ Middleware & Edge functions explained: https://www.youtube.com/watch?v=NlBSheYPKkg
Github link: https://github.com/tumetus/nextjs-url-shortener
Learn Programming (Skillshare FREE trial): https://skl.sh/3cYxUP5
My courses:
React basics: https://skl.sh/2XAKn7u
HTML & CSS for beginners: https://skl.sh/34wvGUH
Draft.js basics: https://skl.sh/3cJ5Hw4
Connect with me:
Website: https://tuomokankaanpaa.com
My newsletter: https://tuomokankaanpaa.com/newsletter
Twitter: https://twitter.com/tumee
Skillshare: https://www.skillshare.com/r/user/tume
Timestamps
00:00 What this video is about
00:26 Steps we will take
01:42 Create the form
06:10 Create /shorten api route
08:58 Setup Upstash Redis
13:12 Save URLs to Redis
18:17 Fetch & display links from Redis
29:12 Create redirect middleware
37:44 Add final touches on the form
40:12 Most important part of a Web Application
#nextjs #middleware #redis
Comments