Integrating MongoDB Into Your NextJS App

hello and welcome back to the mongodb live stream um so i'm nick and i'm with auto and we're going to be doing some next js development uh but i want to go over some logistics stuff before we get into the stream uh so this is the start of a new year this is our first stream of the year and to go with that we're not only streaming on twitch right now but we are in parallel streaming to youtube so if you prefer to watch on youtube just go to the official mongodb youtube channel go ahead and subscribe you'll get notifications every time we go live likewise with the twitch channel we are live so please engage with us in the chat if you have a question for otto or myself drop us a question we'll answer it on the stream if there's any kind of audio or video issues as well let us know about it so that way we can see if we can correct it uh auto did i miss anything um no welcome everybody uh this is our first time streaming to both platforms like neck sets so if we do run into any technical issues please please bear with us and uh we are very excited and we have a lot of great content for you uh before we get started talking about next js mongodb and all that good stuff um do we also want to mention the upcoming ama nick with uh yeah absolutely you want to shed some light on that and i'll get the link for us sure absolutely so uh in about an hour uh our cto at mongodb mark porter will be doing an ama on reddit and it's on the official uh i r i m a uh subreddit uh check it out there ask mark any questions he is a a lovely guy loves engaging with the community he loves talking to developers is a developer himself and um yeah come come hang out with mark join us and uh you know try to try to stump him yes please he's a short guy though so it might be difficult yeah definitely cool um what do we do today otto so today i thought we would kick the year off by um talking a little bit about next js and um seeing how you can integrate next.js into uh or seeing how you can integrate mongodb into your next js application to have an amazing developer experience and i don't know about you nick but i've spent a lot of time over the last uh over the last year really playing around with nexjs learning that it's become like my go-to framework for developing applications and uh pairing it with mongodb is such a such a natural um such a natural extension of the framework that it you know it makes develop development really really fun um have you worked with nxgs before i have not i've never even looked at it prior to um you being at mongodb so i think i've you've done one other stream in the past but uh i don't know i find it hard to keep up with all these uh new frameworks there's a lot coming out right there there is a lot i mean the the front end landscape is constantly changing constantly evolving and the thing that i really like about next is that it's just a framework built around react so if if you know react uh jumping into next.js is you know you'll feel right at home a lot of the concepts are taken directly from react and uh the benefit of nexjs is that it adds all of the missing functionality that you know you wish react had like server-side rendering like um you know image optimization internalization analytics like a lot of the server-side stuff that you don't get with just react you get it with next and uh yeah that's one of the reasons that i'm a huge huge fan awesome let's uh should i share your screen we want to dig into it yeah let's do it so uh you know here i am on the uh next year's homepage i just kind of wanted to show it off a little bit talk a bit more about the framework you know they kind of bill it as the react framework for production and you know if we look at the ynxjs you know there's a whole lot of features that you can um kind of see here and you know some of the ones that i'm really really hyped on really bullish on is their hybrid approach so uh have you worked with uh gatsby before uh nick very loosely uh but i am more familiar with uh what's happening in the gatsby space than the next js space got it yeah so so nexjs so like gatsby is built as uh you know like a static site generator like a javascript-based static side generator and they have a you know crap ton of plug-ins to make it really really um really really easy to build static websites and get your data from all sorts of different uh different places and xjs has a lot of those features and functionalities and they also have this hybrid approach where you can statically generate certain pages and then server side render others and then yet you know the third type is just traditional uh you know spa based pages that that render in the browser we have a question coming in in the chat sure and this is something you might be up your alley here is is it correct that react router dom isn't needed with next.js because it has routing built in via pages correct yeah so with with xjs you don't have to worry about routing uh they use a uh basically a directory-based routing system and i'll show you how that works when we get into uh the code portion of it but you know simply you just create a new page and actually it's smart enough to figure out you know how this page should be rendered what the link should be for it and it does everything for you awesome um yeah so we talked a little bit about static site generation server side rendering incremental static regeneration is another really really unique feature that allows you to pre-render your content so you know let's say you have a data in a mongodb database and you don't want and you know it's fairly static data like a blog post that isn't updated every you know every few seconds or you know even hours and with incremental static generation what you can do is pre-render that data from mongodb when your application is built and then every so often you know let's say every hour every day you can go back into mongodb get the updated data if there is any and regenerate that static page so your users get a really fast experience the page loads super fast you're not putting load on your database but uh you know you still get get the new data um as it's as it's updated without having to rebuild uh like you would have to in some other frameworks um and then there's a whole lot we can talk about api routing uh fast refresh etc etc and we'll kind of get into that uh when we start coding uh and i think i see another question before we jump in uh how do i use next.js with my uh golang website uh so great question so so nexjs is a um javascript and node-based framework so uh it it wouldn't necessarily uh you couldn't use it with go oh let's see that's not true like there's would you want to use it with go is maybe the better question yeah that's a that's a good point nick i don't think you would want to mix the two because nexjs comes with its own server it uses express under the hood so you know i i suppose you could kind of jury rig it to make it fit but you don't you don't need go to have a next website if that makes sense um cool so i hope that answers your question uh but you know if you'd like to add a follow-up please do and and we'll we'll talk about it so so let's get into some code so i'll open up my uh visual studio code here and uh let's just create a next.js application that uses mongodb and we'll talk a little bit more about mongodb and how that's going to work in just a little bit but to get started with creating a um nexus website and we're going to do this you know exactly from scratch so if you want to follow along feel free but creating a nexus website is as simple as running mpx create next app and then you do have to give it a title but i'm also going to pass one parameter into it called example and the example that i'm going to pass is called with mongodb and then and then we're going to uh name our website what our application is going to be called and in this case uh we're going to use a data set that mongodb provides provides to their users of the atlas platform called sample airbnb so our application is going to be called next bnb so we have our mpx command we have our create next tab that's going to create our application we're passing in this example with mongodb and then we're naming our website or our application nextbnb so i'll hit enter and let that run so it's with uh with manga to be a template uh it is a template and it looks like i already have that one so let's um let's do this i'll go up one directory and we'll rerun it did we uh did we use yarn on this uh we got a comment saying to use a a specific flag to use npm does uh does next js use yarn by default um that i i don't know it it might i i don't have yarn installed locally so if it does it's like a wrapper around it um but you know i i've never really been a big fan of vr like i've i've always stuck to mpm as my as my go-to since uh yarn was released i mean npm did yeah probably back in the day yeah i remember running an npm install took ages um but anyway so we have our application and you kind of brought up a good point about that example uh with mongodb and that being a template and you know you are spot on with that and to show you how that works uh let's cd into this textbnb directory and actually let me open up the um the project here so uh what happened when we ran it with um the with uh with mongodb example all they did was add one additional page or one additional uh file in our application which was this mongodb javascript file and what this file contains is our connection strings to to mongodb so so that we can connect to mongodb whether it's installed locally or if we're using mongodb atlas it gives us all of the kind of uh glue between mongodb and our next next.js application so you know here we see we're going to be using the mongodb node.js driver so we're importing client from it uh we have some error handling and then we're doing uh with i mean this is i've never seen this before up at the top i saw that we were doing a uh process oh process i thought we were importing it never mind sorry on line three i i i didn't see the consonant that we were importing it so i decided that we're just uh matching up the variable names then right or yep yeah so we're just we're just going to pull in our mongodb uri and the database we want to work with from our environment variable which we'll set up in a minute sure then we have a bit of error handling if we start the application and we haven't provided a uri or db and then what we're also going to do is we are going to cache our connections so once we've established a connection to mongodb rather than you know reconnecting every single time and creating a bunch of pooling we're going to cache that connection and reuse it across um across our application um and then from there you know we are just connecting to mongodb so we have this connected database function which is either going to get our cache connection or if we don't have a cached uh connection we're gonna go and connect them on the bb get our database and go from there and the final thing we need to do to get set up here is open up this env.local file we can delete the example because we actually want this enb local to load and then we have the provided our mongodb uri and our mongodb database that we want to work and where we're going to get these from are mongodb atlas and if you guys are not familiar with mongodb atlas it's mongodb's database as a service uh cloud platform that allows you that is you know fully managed mongodb in the cloud across any you know cloud provider aws google cloud azure and we recently released a multi-cloud feature so that you can have your um your nodes your performance everything um across the the you know the three big uh cloud providers and you know wherever you are in the world uh you know we said since you know mongodb atlas is powered by aws google cloud and azure there's going to be a region for you that is centrally located uh do you while i log in do you want to say anything else on uh atlas nick uh no i think i think that sums it up i mean we're gonna see more of a walk through and we've gone over atlas uh plenty of times as far as setting it up um on other streams on the channel all of which can be found on demand on youtube so if you're tuning in from twitch right now just head over to the youtube channel uh we have a twitch playlist and you can catch up on a lot of a lot of on-demand streams that we've done together definitely um and you know the the thing i love most about mongodb atlas is i don't have to worry about any of the the setup stuff managing my database i just log in i have the the ui you know set up my cluster connect to it and go from there so uh i had so i've just logged in and uh you know i kind of wanted to do a step by step so that people following along could also uh you know follow along rather than uh have to you know stop and then reload so you know if you are following along and you just set up your mongodb atlas cluster to get the sample data set to get the sample data you just hit these three little dots here and you hit the load sample data set button load sample data set and it's going to uh give you a seven or eight different data sets that you can work with so if you're just new to mongodb just wanna you know play around with it and you want some data to play around with just to see what the capabilities are you have that available um for you and mongodb atlas you know we i am running an m10 cluster at the moment but we have a free tier that you know it's free forever and you you'll have all of these uh features available in the free tier as well sweet otto you want to take a step back for a second we have a question coming in i think it might be worth uh brushing over since we've had a lot of new people join the stream sure can we give just a quick overview of why uh we don't need react.js for for next yes or why would we want to use it over react.js yeah absolutely so um you know react react react.js is a spa framework right there is a um react-based application is going to run entirely in the browser so you lose a lot of you know server-side functionality uh you can't do you know like if you if you're building a blog or a website that relies on seo doing it with plainly just react you know you'll have to go through a whole bunch of additional steps to to pre-render that data to prepare it for search engines with next js you have that entire kind of backing to to do uh server-side rendering to do to managing your routing managing you know all sorts of features that that react doesn't provide nexus provides on top of react uh and i hope that answers i i you know i really just see next year as an extension extension of react so you know if you're already familiar with react and you want to build a really big scalable application and you want to do some server-side stuff with it as well without having to do a whole lot of setup i think nexus is a great option we've had a few questions come in on this um already are we going to be using mongoose for this example or are we going to be using the vanilla sdk so we're going to be using the vanilla sdk the node.js driver but you can absolutely use mongoose with nextgs as well and it is uh i think there's already an example um template as well with mongoose so if you didn't want to use the mongodb node.js driver you could use mongoose but you know andrew mentioned that the node.js driver makes doing queries painless and i think it it really does so you know it's really up to you i i personally prefer the the no driver just because it it kind of doesn't you know it doesn't hide anything from you that it doesn't do any sort of magic it's just you know here's the here's the api here's what you can do with it and cool so let's connect to our mongodb database and to connect to it from our nexus application all i'll do is hit this connect button uh hit the connect to your application and i'm going to copy this connection string so hit copy see how bad your passwords are now uh well my password is uh mongodb but the the other good thing about uh mongodb atlas is when it comes to um accessing your cluster you know we we have this network access tab and i am only allowing connections from my current ip address so you know even if you do have my username and password as well as my connection string you're not going to be able to connect to that cluster and uh so so that's uh that's why i feel you know i feel okay sharing the the connection string uh because i know nobody you know it's gonna be essentially useless for for anybody um cool so let's go ahead and connect to it so we have our uri and i'll have to change a few things here it's a mongodb and the password is mongodb and then the database that we're going to connect to is called we'll go into our collections here and take a look at the data we have we're going to connect to this uh sample underscore airbnb database which is going to zoom in just like maybe one or two times one two yeah that works how does that look better it looks good to me yeah awesome so all of a sudden yeah i bet um so you know i have all these other databases that i could that i could connect to as well but the one we're gonna work with is called sample underscore airbnb and this database has one collection called listings and reviews and if you're coming from the sql world you know database name is you know equivalent to a database and a collection uh can loosely be equivalent to a table the big difference being that in mongodb within a collection we hold documents which can be you know complex uh json types you know in the in the database they're stored as uh beats on binary json but you know when we actually process and work with them they are represented in json so we can have things like arrays like complex um you know complex javascript objects you know nested arrays with objects in them for example like this reviews is an array that has a bunch of you know complicated objects and this is all within one document so we can very easily query all of this data um cool so let's go ahead and connect to our sample underscore airbnb database we'll go into our application here paste it hit save and now we're ready to start our application and make sure that that everything is working so far and to do this i'm just going to run npm run dev that's going to take about a second to to build and load and it looks like we are ready to start on localhost 3000. we have a plug for one of your blog articles oh awesome that is is good for the mongoose versus the vanilla node.js driver oh i love that link well thank you nick yeah i actually it wasn't me that was plugging it was one of the members in the chat so right now our bot blocked them so uh yeah i just remembered that i did write an article last year probably early last year talking about the differences between the uh between mongoose and just using the node.js driver directly and um yeah i mean i don't have anything against mongoose i've used it in the past for for many many projects um the one thing that i will say that that kind of limits limits me personally and you know this is personal opinion um when it comes to mongoose you know you have to define your schema in your node application and uh you know the the big benefit of mongodb is that it is a schema-less database so you're kind of putting these artificial barriers to your schema in your you know in your application and mongodb does support schema validation and you know schema enforcement on the database side so if you did want to have a you know strictly enforced schema you could absolutely do that without mongoose and you know i'm you know i'm always thinking about you know in the future what if i want to move my app from you know from node to go or to a different language then then mongoose is kind of uh you know a bottleneck as opposed to just using the the built-in drivers and if you wanted a javascript a javascript based uh validation as well you could also use joy to get the job done it's another popular one um yeah so now we are uh connected to our mongodb database and you know if you worked with nextgs before and you did the starter uh by default it says welcome to next.js uh since we are using the mon with mongodb template it says welcome to next.js with mongodb and at this point the only thing i really care about is seeing this you are connected to mongodb message and this tells us that our connection string was accepted it was valid and we are able to establish a connection so now we can work with our data and so the next thing i want to do is start working with our data a little bit so let's go back into our application here and this is all basically boilerplate right now we just plugged in the connection information right all we did was plug in our mongodb uri and our database that we wanted to connect to sweet so to get started the the first thing um we're gonna do is talk a little bit about routing and uh somebody had mentioned in the comment that uh you know with nexjs you don't need you know react router dom because all of the routing index.js is done in this file based routing system so right now we have this indexed home page and if we wanted to create a new page all we have to do is create a new file in this special pages directory so let's say we wanted to create a page called contact contact.js and i'm just going to copy all of the code here save it and our application is going to automatically rebuild and if we go to uh you know forward slash contact now we have that route and we don't have to uh set anything you know we don't have to define that route we don't have to say how it should work all we did was just create that page add the react component for it and it works just fine but next.js also has another special directory that we can work with called api that would live under the pages directory so we'll create it here api and we'll call it um you know let's say properties.js and what what the api directory does is any uh file that we create in here is going to actually create an express api for us so now we can just create a function like um let's say function and have it be handler that takes a request and response and i just send a response saying um you know hello world so we just created an api endpoint that's going to run on the backend so so this api this code will never be available to the front end so we can have you know exposed secrets we can have client data or you know private server data all within these functions and it's essentially an express.js like a handler function if you will and to show you how a quick question coming in from harris before we we get too far ahead of ourselves here i know this is a little bit of a pivot but can can we use next.js on uh realms uh hosting i i want to say no because it's static right um this is not static so i'm wrong so if you build your nexus application and you are using it as just a static generator then you can uh you would just upload your nexus build file but if you are using the like the api functionality that i'm talking about right now then in that case you wouldn't be able to host it on realm at the moment maybe in the future got it um so we have this properties api to access that all we do is append api and then properties was the route that we created by executing that we get our hello world message you know in json format and then i do see another question is the api directory needed if we're offloading endpoints to aws lambda or google cloud functions no it is not so the really cool thing that that i think the nextjs team did was add this additional api functionality if you wanted everything within your next js app and what they really what they do is if you're using versailles which is the company behind xjs if you're using their hosting platform to deploy your application when you go and say you know here's my next.js app deploy it to your cell what they're going to do is look at any of the the routes in your api directory and automatically create serverless functions for them break them out and manage all of that for you but if you didn't want to do that if you wanted to have your own back and your own api that your nextjs app talks to then you can absolutely omit this api directory um i hope that answers your your question but um so the next thing i wanted to uh show you is how we can actually use that um mongodb connection so we'll use it here in our properties api route for now and then we'll move it into our front end so the first thing we'll need to do is we're going to need to import our connected database function which is going to allow us to get that database connection so we'll say import connect to database and that's going to be coming from mongodb so this is going to allow us to get the database connection that we have already established when we build the application and get that cached uh kind of pool version otherwise we're going to create a otherwise we're going to create a new connection and get the get the live one and then from here what we're going to do is get the database that we want to work with um from the connect to database can you open up your manga db.js file again i mean what what is maybe maybe i missed it where is this connect to database function coming from yeah yeah yeah so that one is at the top level so so we're exporting this function and what happens when you run this function is we're either going to return the cache connection that's already established or we're going to create a new connection to mongodb mongodb outlets or your mongodb connection and then send you both the client and the database and in my case here i'm just destructuring that return and just getting the database because we don't need the client this this wouldn't be too too it doesn't look like it'd be too difficult to to modify in the event that you needed multiple databases right yeah absolutely if you wanted to have you know database one database two et cetera et cetera you could absolutely do that and got it and the other thing is to like we act i also give you the client so you could in here if you get the client you could say uh you know database is client bb blah blah blah and connected you know a lot like kind of ad hoc if you needed the a specific database but for our example we're just going to be working off of uh one database that we defined in our environment variable so from here once we have our database and we're using this async await function so once we connect to our database we can execute mongodb mql queries to get data insert data delete data you know work with our data and just to show you how that works let's go ahead and get some data from our mongodb database so i'll say cons data equals database bb.collection and the collection is the collection that we want to work with and in our case that collection was listings and reviews so let's say listings and reviews and then we'll say find and we're not going to pass in any parameters for our fine so this is just going to give us the first you know however many records we want and if we just pass in this find operation without any sort of uh limits you know we're going to get back all 5000 plus documents which we probably don't want so we'll also add a limit and our limit is going to be let's say you know the first 20 documents and then the final thing we'll do here is called the two array method which is going to take so if we were to just call find and pass in a limit it's going to give us back a cursor not the data so calling this to array method is going to uh actually get us the the json documents that we want to work with and then just to make sure that this works let's just respond with that data uh so this looks looks good right i i'm hoping this looks good so we'll hit save let's yeah let's go uh back to our application and see if we can get some of this live data displayed in our nexus application and for now in our api all right the joys of live coding so we didn't get anything back and the reason for that is take a picture of this for twitter [Laughter] uh let's see so let's let's make sure that we have the collection name correct listings and reviews actually let's also console log data here just to see if we get oh i know what happened we should await because this also returns a promise uh yeah it looks like somebody spotted it at the same time as you oh nice there we go uh so let's try it again refresh boom so now we have an array of data that has you know different properties and i don't think that they're necessarily going to be in the same order but we're not doing any sort of ordering or limiting but actually looks like it might be so charming duplex charming duplex and we have all of the data all of the information that we that we could ever want on all of these properties so we're able to get data from our collection and we have this properties api but you know say we wanted to work with this data in our nexus application in our components in our actual pages so let's go back to our index page here and i'm going to delete uh kind of the the boilerplate that comes with it and we're just going to start from scratch and from here what we could do is let's see we could we could you know if we were building just a traditional react application you know we could uh when our application is loaded do a fetch call and you know talk to our api endpoint get that data and display it in the component but next.js allows us to do this a better way i think and that is by using this additional method called get server side props and what this is going to do is allow us to get our profs data get our data on the server side and then send it to our react component and i already have the connected database uh imported here so we're and the um the awaits is that we're connected to our database here we're going to swap out the client or the database and then we're not running this it's connected anymore so we don't need this but what we are going to do is actually you know and again here if we wanted to remove this and have our call for data be this properties api endpoint we could do that but with nexjs we can actually talk to our database directly in this git server side props method and this gets the recycle props method also is never going to be sent to the to the browser so uh our users you know when they see our nexus application they'll see whatever's in this return you know whatever we put in the react component that's going to be uh delivers uh client side browser side but our get service type props method is only going to execute server side is that a reserve function is that why or is it if you set it up that way yep that is a reserve function in the in the next yes framework and i also see a question uh asking why not pipe script um you can have you can absolutely use typescript with nexjs and i i think i have a youtube video on how to set that up uh and the the nexus team does provide types for for all of the um all of the nexus components its entire api so using it with typescript is very very easy but here we can actually just go in our properties array get our data find it the exact same way and pass it here let's say you know properties datum now we will run into an issue when we do this so you know by default it and also if we you know console log the data we'll see that we do get the data back but when we go into our application we're going to run into a little snag and just to show you how that works and what that snag is i'll go to localhost 3000 and i'll get the server error saying um error serializing properties uh return from server-side props and the reason for this is when we use get server side props we can only pass it a plain javascript object and when we get data from mongodb it's going to be complex data types it's going to have you know if we look at it you know we're going to have object ids we're going to have uh doubles floats all sorts of different you know complex data types that the getservercyprops method at this time isn't able to serialize it only wants a plain javascript object with you know properties and either you know strings numbers and arrays objects et cetera et cetera so what we have to do is uh and this is kind of a crappy solution i have not been able to find a more eloquent solution for this yet but to get around it what i do is you know let's just say const properties is to stringify the data we get back and then re-parse it so jason parse signify and then parse and then set that send that properties data to the browser and then properties here now if we go back into our code refresh we're not going gonna get anything back because we don't we don't have anything right it's an empty component and this prop we're gonna remove with properties now let's just console log it in the browser to see if we do in fact get this data getting uh we're getting a lot of love for mongoose today nice yeah i i love mongoose i mean you know it's a it's a great framework especially if you're just starting out with mongodb and you know you're coming from a sql uh sql system where you know you really had to think about types a lot you know the fight having a well-defined schema i think mongoose is a kind of great segue into learning about nosql and mongodb and then you know once you've had some experience with it maybe maybe tried the the note driver um yeah so let's go into our browser here refresh and again we're not expecting to see anything but if we look at our console log we should see that array of 20 properties and we do so we have all of our information our review scores security deposit and you can see here once we did that jason pars and jason stringify for doubles or yeah numbers with decimals instead of just giving us the actual amount it did this you know numbers decimal which we could then uh i suppose you know cast to a number and convert it but that's kind of the only the only work around that that i've found and i've talked a lot with uh other people in the community and you know hopefully this gets addressed sooner sooner rather than later but for now that's that's what we have to have to work with um cool so the next thing i wanted to focus on was we have our data so we're able to get data from our mongodb database let's see how we can let's actually display that data so um i will import a package into my application here and so i'm just copying and pasting some code here we're using the head component which comes with next.js and this head component is going to allow us to work with the head of the html document so we can set the title we can import uh you know additional javascript or in this case i'm just importing a style sheet telling css so that we can have a nice style um nice style and kind of nice ui for our application and um rather than spending the next you know 15 20 minutes writing up a bunch of uh styles you know function style classes and building out the ui i also have a little bit of code kind of prepared um so i'm just going to copy and paste that and then we will walk through it so this is what the code looks like and i will i will talk it through so so we are getting a prop passed into our application we're destructing it here called properties which is going to have the 20 properties that we get from our mongodb atlas database um and then so that properties is going to be an array so we're going to map over that we're going to say properties and properties.map get our property and then display its image name the number of guests it can take its address summary as well as how much it costs per night to to book and we can get rid of the cleaning fee we're not going to cover that and then this details will change to book and let's just make it a button button and we'll get rid of the link so all i did here was just add a bunch of kelvin tss classes to give us a prettier ui and let's go back into our code and see if if everything still works hey since we have a lot of new new people join in uh the stream because it's just good stream so far i know that we've done this already but it might be worth just showing uh just one more time uh we have a question regarding how to add uh multiple mongodb databases uh to your application do just want to head over to the mongodb.js file yeah absolutely um so if you wanted to add multiple mongodb databases um you would go into the util mongodb file and then in here i'm just creating one database so one db that goes into the database and uses the mongodb database environment variable that i set but if you wanted to connect to multiple databases you know let's say uh you know backup database you could just do client bb and then whatever the name of the database is if you had yet another one you wanted to connect to it would just be you know better database find bb and then whatever that database means so then when you wanted to you know talk to the collections within these databases you would import them you probably wouldn't hard code up in that file anyways you'd add them to the env file alongside the other properties exactly yeah so you could add them in here or if you wanted to hard code them just you know for example sake you could do it in here then you would just import them you know the database and then you could run the executed this way yeah thanks for revisiting this yep absolutely uh and i'll just remove this so we don't get confused so we did get a number of errors uh saying objects are not valid as react child collection of children use an array um and i think the reason for that is what's here again so objects are not valid as react child and object with keys number decimal okay got it so the reason that we're running into this issue is we are sending back a lot of this data um from our mongodb atlas cluster and you know if you look at uh each document you know we have a whole lot of data on all of them and we get this data back and then when we do that json uh stringify and parse it converts these objects into a kind of not really valid json so what we can do is map over this properties array so what we're going to do is let's say const filtered equals properties dot map we're going to go over the data that we get back and we're going to format it to a format that next gs is going to like and it's going to make it much easier for us to work with the data as well because we're not going to be passing to the front end all of the data that you know we might not be using and to do this we'll say a property and then execute some code and i actually have um a little return here it should help us and the other thing i'll need to do you're just picking out the fields that you want then in this case right yep i am just picking out the field i want and again for this this price um the reason that react didn't like it is because of this dollar sign number decimal so we're just going to take care of that on in the get server side props method clean up the data and then sit send it to the front end and the other thing too i was going to ask so since we're filtering for only the fields that we want here uh in our application code why don't we just do a projection inside of the query itself yep so we could do that and i was just going to mention that if we i'm sorry uh all good if we wanted to uh you know when we run this uh db collection find we're not passing in any parameters and we're just saying get us the 20 uh the first 20 documents that you find it's going to send us back the entire document you know and if we don't care about the interaction or the access or you know specific fields we're still going to be getting them and then we're kind of discarding them in um in our next year as you know in the get server side props method but if we just wanted to get certain data back if we only cared about you know like the id the name the image we could add a project stage and say you know i only want the id one i only want the property image one et cetera et cetera don't forget your uh there you go so what this is and i always forget word crap so what the project stage would do is when we set the request to mongodb to mongodb atlas this project is going to say just get us back the specific fields that we asked for so we're going to be sending less data back to our browser less data process but i'm not going to use this project stage um in this case just because i'm not sure what all of the data we need and we're also running a little short on time so just to kind of speed things up a little bit um i'll make the project stage and we'll get all right i have as much time as you as you got man i could stay here as long as you want how about our viewers uh we've got a lot of viewers that are really interested over here right on but yeah maybe some people in the chat say uh if you want us to keep going or or uh yeah let us know uh so let's see if if this fixes our issues so we'll go back uh refresh our page and we're getting cleaning fee and that's because we're not using the cleaning fee anymore we'll get rid of that refresh boom so now we have a user interface we have 20 properties from our mongodb database that are uh you know we get the their name that matches up to the name of the property we get a quick summary where it's located the cost per night and then we have this uh button to to book the property and all of that works really really well um and you know if we wanted to get more documents back we could just update the limit so let's say instead of 20 properties we want to display 50 of them we'll say 50 properties refresh here and give it a second and now we have a lot more properties to look at and you know i i can see how you might you know if you wanted to do kind of endless scrolling when you scroll to the bottom make a a request from your react front end to go and fetch the additional data as well but you know we'll we'll save that for another discussion but so far you know all we did was execute one simple query format our data a little bit and now we're talking among db we're getting data into our application uh kind of the last thing i wanted to show was how we can write data to our uh to our mom with db atlas database and to do this what we're gonna do is add a um on click function to this book so we'll say when a user clicks the book button we are going to execute a function called book and we're going to pass in that property so we know which property the user is booking but we'll also need to add a function here called const book we'll make it an arrow function get the property that the user is booking and this is where things get a little interesting or you know a little complicated because we do have this connect to database method and you would imagine or you know i could see how you might think that why don't i just you know do the same thing here get my database and you know connect to it and execute the the insert operation there and the reason that this isn't going to work is this connected database only works on the server side it's never exposed to the client so you know to be secure and to be safe this is this isn't going to work and if we were to try to do it we'll get an error especially because the node driver relies on a dns and a bunch of the other node packages that aren't available to the browser apis so this wouldn't work but what we can do is add an api route add an additional api route and we'll call it book.js and with this book.js function what we're going to do there is essentially back to our database so we'll say um and i did remember that we actually do have a finite uh cutoff time for this stream because of the ama coming up oh that's right so we can't go long we won't go too long over yeah we'll uh connect to our database and then here what we're gonna do is we're going to run that insert operation so we'll say uh database dot ins our database dot collection and now uh you know i don't think it makes sense to add our data to the listings and reviews collection so we can add a new collection and we'll just say uh bookings and we'll run and insert one and our data is going to be the data that we get from um from here from our index page from the book so let's remove this and we'll uh just to make things simpler we'll just send a get request with the data that we want to insert so we'll say cons data equals request dot query and we're not going to do any sort of validation whatever we get in the query we're just going to throw into our database very interesting living on the end a question that i didn't want to didn't want to forget about it's it's not totally related to this topic uh but sure it's in regards to your environment file um we wanna we we maybe need some clarity on what happens uh for deployment sure yeah so um if you are deploying to um versailles which is the kind of the next js preferred uh platform uh they will take your uh enb local but you can also create an env.staging emv.production environment variable or you can uh you know just pass in the environment variables in your build like in the terminal when you uh start up the server you can pass in environment variables there so uh the the platform and actually you know if you are using uh this is this is a really cool thing that i really like about purcell is if you go to their um repo next yeah and you go um to their examples and we'll just pick with mongodb and would you have with mongodb mongoose as well but i'll just do the with mongodb one you can actually hit deploy one click deploy sign in i'll sign in with github oh boy uh-oh you're gonna expose yourself right now uh i wouldn't i wouldn't worry about it just skip yeah so so you can uh actually just go through this log in and it's going to ask you uh the enviro the ask you to import the environment variables that you want and all of that is going to work you know seamlessly so it they'll do all the setup for you um anyway just because we do have a few minutes left let's wrap this guy up so we are inserting our data um let's also capture that response and this also returns a promise so we're gonna wait and then we'll say send us back that response um and then in here what we're going to do is we're going to run the fetch to our api as an api book and actually let's make it with string literals so that we can pass in the you know let's say the id of the property which is going to be a property underscore id and the booker the person that booked it so let's just say guest and here we'll just say auto um and [Music] yeah we'll say const data sketch and then we'll say console.log data i will make this an ac function await and then we can uh display that response so now what we have is we built in another api endpoint that's going to allow us to insert data into our mongodb outlets collection it's going to be in a new collection called bookings and we're just inserting whatever we get passed in as query parameters and our query parameters are going to be the property id which is going to be the property id from from the address and who the guest is and we're just going to hard code that the guest is myself and then we're just going to console.log the response that we get back from mongodb atlas i'm gonna hit save uh we'll go back into our application let's refresh just make sure everything is clear there i'll open up my console clear these errors and let's try to book uh a property this deluxe loft suite looks really good so let's hit book fingers crossed and we get a promise back which is fine did we not include an await in there i think we did not um a weight fetch cons response equals away because this is also a uh oh all right and then we'll console.log this guy so we'll redo this and this error this is just a um react saying that each of these should have a unique key so it's it's more of a warning than a than an error and then i'm using class instead of class name because i'm a terrible programmer but let's uh let's try to book this uh the lex loft suite again we'll hit book and the result we get back is uh from mongodb telling us that uh we inserted one document into our collection that you know one document was successfully inserted and if we look at the ops what what actually happened we inserted a document with the guest field of auto the property id of one zero zero five which is the id for this property and then a unique object id for for that booking and if we go into our mongodb um kind of back in our atlas dashboard let's refresh this and now we have a bookings collection created as well as the two times that i booked that property so we have the property id my name auto and etc etc so so that works and uh you know in a real world application you probably wouldn't want to send back uh your mongodb you know all of this information this is more for uh your server to acknowledge so you know you might do something like you know if the response well okay was one then you know send back a message saying you know okay inserted but you probably wouldn't want to send this to the call i want your booking id maybe the inserted id could represent your booking id or yep or something like that um so that is that's how you insert data and the only other thing that i really wanted to show off that i think would be cool that i think we can do in three minutes is to add search functionality to our application using uh mongodb atlas search um let's see how quickly we can add really complex search capabilities to our application uh to do it we'll go into mongodb atlas into our listings and reviews collection will create a search index and what this is going to do is it's going to prepare our data set to run mongodb atlas search so we'll hit create a search index uh it looks like they added this visual editor just happened yeah index default this is pretty pretty unique and uh you know we'll just create a standard uh lucine search index and this is going to take about a minute or two to build so while it does that let's create an api endpoint for our search we'll say search.js and to get started i'm just going to copy the properties array just to get the connected database and the collection and what we're going to do here is instead of running a find operation we're going to run an aggregation expression and uh my boss or our boss joe drum gold calls um the mongodb aggregation framework kind of mongodb superpower and you'll see why in just a second so aggregations they allow you to run really complex queries on your data type and there's all sorts of different operators for you know for allowing you to manage how you want to display and show and work with your data and in our case we're going to build a simple pipeline that is going to run the search operator and give us back really good search results so aggregations are you know represent pipelines in a stage and our first stage in this pipeline is going to be to run our search so we're going to run the search operator and the search operator fits in a serves what our query is going to be and here we have the query that we're going to search for so search for bookings are we going to search for listings oh listings and reviews all right i see it now we're using the listings and reviews uh collection and we're going to search we're going to allow the user to search for what whatever they want and that's going to be through the request query and maybe the search term and then the second property that we can pass in here is the path and what the path represents is what fields we want to search on so you know if we wanted to just search by say for example if we only wanted the user to search by the summary or the name we could you know say name or summary or if we wanted the search to work across multiple fields in a document we just pass in an array so an array of paths or fields that we want the user to be able to search for so let's just say you know we want user to be able to search in the description and maybe the amenities array and you can correct me if i'm wrong but i think if we're specifying specific paths in our search aggregation stage it may be worthwhile to create an index that's only indexing those two paths correct yep so by default we just created a kind of default cookie cutter dynamic search index which is going to index basically the entire document it's going to you know try to figure it out on its own but if we wanted to really fine-tune this and you know really take control we could specify the specific fields that we wanted to search on um so we have that stage in our pipeline the other thing we're going to do is we're just going to create one additional stage called uh limit just to get back a certain number of results and let's just say we want to get back to first 20 and with that our aggregation pipeline and our search functionality is built in and should work so let's see let's see if it does we'll go into our application and it's api search and then i believe the uh property we're looking for is term so what do you think make any any recommendations on what we should we should search for uh studio apartment i don't i don't know let's say let's say airbnb style right i've never used airbnb so i wouldn't even know what i'm looking for so let's search for a studio oh no our app crashed and why did it crash the first argument maybe i spelt something wrong copy and paste here everything else looks the same let's retry that i'll have to restart the application um studio internal server error okay term is not defined oh because we want requests query boom so now if we look at the description uh you know we have honu studio [Music] and actually here is another option for us to use uh another operator which is the the project i think here we could do is a projector projection within the aggregation pipeline uh sorry i was answering questions in the chat it should be i think it's project there's an alternative one too uh that you could use so we could do uh what did we say description and amenities it will say description one amenities one and what what the one means is uh we do want this data back we do want this only this data to be sent back with our results so let's see if this project stage is right as well um yeah so and then i think some entities spelled differently or uh or it could be that some items don't have the amenities field and that's why we're not seeing them but yeah so we search for studio and we're getting all of the descriptions that have the keyword studio in them and we could also search for other things like uh you know let's say vegas for example that's where i'm from uh looks like there's only one property that has that mentions vegas and that's this one so now we have search functionality built into our application and uh atlas search you know has a whole lot of different uh you know you know features and functionalities we can add fuzzy search in there so that if you spell things wrong uh it's i don't know if i could show an example of that but uh you know if we look at mongodb mongodb.com and take a look at its full native search full native cloud search you know we can implement uh autocomplete which is another really cool feature type tolerance fuzzy surge custom scoring so you know you might want some things to have more weight than others filters etc etc etc but i always love showing off search because it's so easy to implement so quick and uh yeah so i think in the last hour and ten minutes we did a lot we built an application we connected it to the database we got data from the database wrote to it added a search index added search capabilities um i think we did a lot what do you think i do think we accomplished a lot and uh i i love that we had so much engagement in our chat it looks like there's a lot of interest in next js and it might be even more interesting just react js in general um so it's it's topics that we may want to explore further uh live streams yeah and you know we do have our mongodb developer hub where we do write a lot of content around um around react around next js around uh you know just kind of up and coming technologies you know nick writes a lot about game developments if you're interested in in the game development he has a whole bunch of uh blog posts whether it's working with unity or phaser um you know how to use mongoose how to use build mobile applications i know i think i saw in the comments somebody was asking about react native i don't know if we have a lot of content around that but you know good feedback for us to to consider absolutely um and yeah let me just switch it over to just our faces uh rather than your screen and i think we'll just bring it to a close right otto sounds good um i was just filling up the uh the ama as well with with mark yeah let me go back to your screen yeah there is an ama happening with our cto mark porter um if you want to ask some questions i definitely encourage it otto is bringing it up i've i pasted it numerous times in the chat um from a logistical perspective here uh we were trying something new today so we were streaming to both twitch and youtube in parallel um so i see that there was a lot of people on youtube and twitch tuning in that's fantastic you have options we haven't decided if we're gonna do both or stick to one yet but we're just playing around uh if if you are using mongodb it sounds like a lot of you are using mongodb if you're interested in joining us on a stream to kind of demonstrate what you're working on and and kind of take advantage of our audience uh reach out to us go to thecommunity.mongodb.com say hey uh big fan of the streams wanna wanna be a part of it and uh we'll see what we can do to get you on because we definitely like to have guests definitely i think auto yeah i i love it i love talking to developers i love seeing what people build uh you know are you working with with nexjs are you working with mongodb gatsby uh strappy you know whatever technology you're interested in let us know and let us know what you're doing with it we would love to connect with you and let us know what type of content you'd like to learn more about i mean we we work in developer relations we you know are we're only successful if we can teach the community and you know provide them value so let us know what your pain points are what you'd like to learn more about and well we'll create more content for it anything else otto no nick thank you for for being an amazing host as always thank you for everybody that tuned in and we will see you next time see you later

Channel: MongoDB

Views: 12,319

Rating: 4.8955612 out of 5

Keywords:

Id: aAupumVpqcE

Length: 74min 22sec (4462 seconds)

Published: Thu Jan 21 2021