Fun With Deepgram and NextJS
Tags: hackwithdg, nextjs, javascript, webdev
Published: 2022-03-22 21:34:07


### Overview of My Submission

![screenshot of french and english output in a basic next app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4l1jh782ni1ncz0mtnm.png)
 

(Much of this overview is repeated in the project's README, so [hop on over](https://github.com/Cerchie/fun-with-deepgram-and-next) to take a look at how the sausage is made if you like!)

Note: Before I began this project, I signed up for a Deepgram account and completed the 'missions', or tutorials, with Python, Node, and curl.

![dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/177sd1fddpb0659iirc6.png)
 
I highly recommend this approach -- my project consumes the API via NextJS, but it made me think about how I could, say, use curl or Python to make a project as well, and understand the Deepgram API from the standpoint of a more universal application. I'm a big fan of doing things 3 different times to grok them -- to see why, see my post on making a [REST API in 3 different languages](https://dev.to/cerchie/what-i-learned-from-building-rest-apis-in-3-different-languages-5cn1). ;) 

I coded this project to see what it would look like to make a call to Deepgram from a Next app. I chose Next because of the ease of making server-side calls from a Next project -- since this API requires a private key, I didn't want to make my calls from the client. I wrote the README and this post hoping that my words would help others just getting started with NextJS and Deepgram. 😄

You can always learn more about the inner workings of this project by consulting the [Next](https://nextjs.org/docs) and [Deepgram](https://developers.deepgram.com/) documentation.

Right now the calls are made to one English audiofile hosted by Deepgram, and one French audiofile [hosted elsewhere](https://www.lightbulblanguages.co.uk/resources-sound-files.htm#age), to experiment with multiple language support options offered by the `language` parameter.  Then the transcript is rendered to the home page. 


### Submission Category: 

Analytics Ambassadors

### Link to Code on GitHub

[Github Repository](https://github.com/Cerchie/fun-with-deepgram-and-next) 

Quickstart: `git clone https://github.com/Cerchie/fun-with-deepgram-and-next && cd fun-with-deepgram-and-next && npm install && npm run dev`

You'll also need to make a file in your root directory called `env.local` and put your Deepgram apikey in it like so: `DEEPGRAM_APIKEY=your_apikey_here`

More info on taking a closer look at my project in the README!


### Additional Resources / Info

Again, the [Next](https://nextjs.org/docs) and [Deepgram](https://developers.deepgram.com/) documentation will be helpful in understanding this project.

Troubleshooting: You might find that you run into this error when you clone down my project and run it locally.

![error screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1vn6j6u5yf5xq45uu9r.png)
If you do, it's likely to be that you're missing your environment variable, `DEEPGRAM_APIKEY=your_apikey_here`. You'll need to create a Deepgram account to obtain a key, fill in the variable in your `env.local`, and _re-run_ `npm run dev` (since NextJS loads env variables on that command).  

### Stretch goals

Here are my goals for this project in the future:

1. Render the words in a more interesting way. 
I'd like to make use of some sort of module to render the words based on something like frequency, perhaps. This would require a larger sample audio file. I also haven't made any changes to the out-of-the-box Next styles yet.  
2. Render a streaming transcript [via websocket](https://developers.deepgram.com/api-reference/#transcription-streaming). 
This would affect the design choices of my first goal -- for example, if I chose a frequency chart module, I'd have to pick one that was dynamic. 
3. Once I've rendered the streaming transcript, push the Deepgram API further by [utilizing parameters](https://developers.deepgram.com/api-reference/#transcription-prerecorded) like `search` or `callback`.