Loading video player...
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