I Gave My Next.js App Ears : Real-Time STT with Azure

Description

Build a Real-Time Speech-to-Text App with Next.js 16 & Azure AI In this video, I'll show you how to build a clean, real-time speech-to-text web app using Next.js 16 and Azure Cognitive Services Speech SDK. Talk into your mic and watch the text appear on screen — it's that simple. 🔗 GitHub Repo: https://github.com/scholarly360/Azure-Voice-STT-With-Next-JS What we're building: A Next.js 16 app that streams browser microphone audio to Azure for near real-time transcription Clean white + blue UI with type-or-talk functionality One-click copy and clear buttons Custom React hook that handles the entire Azure connection, audio capture, and streaming Tech Stack: Next.js 16 (App Router) Azure Cognitive Services Speech SDK TypeScript Tailwind CSS shadcn/ui components What you'll need: Node.js v18.17+ An Azure account (free tier works!) Azure AI Foundry resource with Live Voice enabled ⏱️ Timestamps: (customize these to match your video) 0:00 - Intro & Demo 0:00 - Project Setup & Clone 0:00 - Azure Portal: Getting Your Keys 0:00 - Environment Variables Configuration 0:00 - Walking Through the Code 0:00 - Custom STT Hook Explained 0:00 - Live Demo & Testing 0:00 - Troubleshooting Tips 0:00 - Wrap Up 📌 Useful Links: 🔹 GitHub Repo: https://github.com/scholarly360/Azure-Voice-STT-With-Next-JS 🔹 Azure Free Account: https://azure.microsoft.com/free/ 🔹 Node.js Download: https://nodejs.org/ 🔹 Azure Portal: https://portal.azure.com 🔹 Next.js Docs: https://nextjs.org/docs 🔹 shadcn/ui: https://ui.shadcn.com #nextjs #azure #speechtotext #typescript #webdev #tutorial #ai #react #tailwindcss #stt #voicerecognition #azureai #nextjs16