Next.js 12 introduced middleware functions and they work together with Vercel Edge functions. In this video we will use middleware to implement Basic Authentication to api routes. I will also explain what middleware and edge functions actually are and how edge functions are different than serverless functions so edge functions vs serverless functions.
How to deploy Next.js application: https://www.youtube.com/watch?v=vFjlw3LaAcw
Repo from this video: https://github.com/tumetus/nextjs-middleware-example
Tweet I mention in the video: https://twitter.com/jamesqquick/status/1453046789418930186
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
💻 MY GEAR
MY CODIGN LAPTOP: https://amzn.to/3pEQTHq
MY MOUSE: https://amzn.to/3cbdvMD
MY KEYBOARD: https://amzn.to/3dSKQMR
MY MICROPHONE: https://amzn.to/3Ck9jVo
MICROPHONE BOOSTER: https://amzn.to/3R4oplQ
MY MICROPHONE ARM: https://amzn.to/3QTAevg
MY CAMERA: https://amzn.to/3wpw5aq
MY STREAMING LIGHT: https://amzn.to/3cbZBtp
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 Next.js middleware & Vercel edge functions
01:10 Middleware explained
02:19 Vercel Edge functions explained
05:31 Basic Auth implementation with Middleware
09:00 Vercel Edge functions vs Api route functions (comparison)
#nextjs #middleware #edgefunctions
Comments