Build A NEXT JS Weather App - OpenWeatherMap API - Tutorial

what's going on guys clint here and in today's video we're going to be building a weather application in next js styled with tail and css you guys we're going to be using axios to make our api calls and fetch all of our data from the open weather map api so you're just getting started with uh with next yes or tailwind i think this would be a really great video for you it's going to be a nice beginner friendly tutorial so i'm just going to go ahead and give you a nice demonstration for applications so you can go ahead and search the city here at the top now notice no information is actually being rendered on the screen until we search our city so this is what you see right here just and this is being pulled from the open weather map api this is the icon that we're pulling from open weather map the temperature and some other weather data there and we can go ahead and search another city just like that whoops just like that and it'll populate some new information so you're gonna see how i built this from scratch and next.js style with tail and css using axios for api calls then let's get started so i'm gonna do i'm just gonna shrink that down a bit here i'm gonna give it a refresh and i'm already inside my directory that i want to create my app so let's go ahead and just create our next.js application so what i did is just press the the control back check button to open up my terminal here and what i want to say here i'm going to using yarn if you use npm that's fine too so yarn create next dash app and since i've already in the uh directory i want to be working in i'm going to go ahead and hit the dot there and they'll just install that into our current directory here so um this would be a nice quick install and what we would need to do first is install tailwind css so once you go ahead and go over to tailwindcss.com and just click that get started button now since we are using nextgs it's going to be really easy just click that frameworks guide right there and just click next js now the first step what it wants us to do is create our application we've already done that so let's just move on to step two here which is install tailwind so let's go ahead and copy that line now i'm just gonna copy this last part here since i'm using yarn and i'm gonna say yarn add and then just paste that in there like so the next we're gonna grab this npx uh tailwind css init and go ahead run that and that's really important because it's gonna give us this tailwind dot config file and that's important for our next step because in step three all we need to do is just select that right there we're going to put this as pages and components inside of that content array there so just go ahead and paste that in nice quick save we'll get it formatted and then this is our final step here we just want to copy in and we're going to put this inside of our inside of our global styles so in next.js we're not familiar all our styling is going to be inside this styles folder now uh in here in this global styles just go ahead and replace all that we're not going to use any of that boilerplate code that was generated when we ran the create next app so this home modules we actually can just delete that and we're going to go ahead and just do some little cleanup here we can close that global styles and we'll close that config we're actually done with the tailwind there but we're done with the styles now inside the um the pages folder we can actually delete the api folder because we're not going to be using that inside this uh this video today and inside this index.js we can actually remove the styles because that's the file we just deleted we can remove this now the head here at the top that's something that comes with nextgs and we can actually go ahead and change this i'm just going to say weather next app and what you're going to see is a whenever we start our startup our application our development server it's going to be that title right there at the top of our browser so down here this main we can delete all this down to the uh the footer i'm going to get rid of that footer as well and that should be all we need to do just like that so what i want you to do is go ahead and run your server i'm going to say uh yarndev npmdev using npm and mine's gonna be on three thousand one there we go so it should just be a blank screen just like that i'm gonna go and change that over to react so i can use my shortcuts here and if we go ahead and say h1 hello this should be a nice small p tag it shouldn't have any font bold or anything like that because tailwind applies bass styling it allows for a lot more customization so here we are in our application here and what we should do first what i want to do first is actually go over to the open weather map we actually go ahead and start fetching some data and so let's just go over to open weather map and click on that weather api right there if you searched it in google now this is what you should see here and what we're going to use here scroll down this is 100 for you guys you don't have to use a credit card or anything you do have to create an account but it's 100 free you don't have to add anything so this is what what i want you to subscribe to this current weather data everything else you're gonna have to pay for so go ahead and click the get api key down here and it is free now i already have an account so i'm just gonna go ahead and sign in and grab my uh and just grab my credentials here there we go now go ahead and click on your name up here and you're going to go down to api keys so this is my api key here so please guys just get your own because after this uh after this build i'm going to go ahead and close this account so what we once you copy this api key um where we're where we are going to want to put this is inside a amv file um and that's just going to hide us hide this from the world whenever if you deploy this thing so for our e.e.v file come down here and we're going to create this at the base level here so just make sure you click down there somewhere and let's go ahead and create our env file now for next yes all we have to say here is next public just like that and then we can name this i'm going to say weather key just like that so equal sign and we can just paste in our key so that's all we need to do for now now inside here or we should probably just go ahead and get grab our endpoint so go ahead and click this api tab here at the top and we'll go back down to our current weather this is what we just subscribed to but now we're going to click on the api dock and this is all the uh documentation for the uh our endpoint that we're going to be using and uh i want to be able to search by city name so on here on the right built-in api request by city name go ahead and click that and i'm going to select this here at the top right there that one right there so should be all we need to do for now and we're going to put this in a constant right here let's say const url and very important you guys put this in backticks because we're going to be passing through our api key and also eventually a search query as well so what we want to do is use a template literal job script it's just the dollar sign then our two curly brackets there and what we can say is we're going to say next public just like we said weather e there we go oh sorry process dot env i'm gonna go ahead and open this up so you can see dot process.env.next underscore public underscore uh weather key which is what we uh what we named our key over in here just like that so that is all we need to do um for our api key now for our city name i'm just gonna go ahead and select that right there and i'm just gonna delete that and just type in a um type in a random city here and we'll come back and make this dynamic and actually pass through our search query into that string here in just a little bit but um what i want to do now is actually probably just go ahead and let's install let's go ahead and install axios is we're going to be using axios to make our api calls so what we're going to say is yarn add npmi for using uh npm yarn add axios just like that and we're also going to be using a react icons package we're going to grab over a little icon so yarn add react dash icons just like that so nice quick and easy here now um inside of our application what let's go ahead and configure our api call and see if we can go ahead and start getting some data back here so let's go ahead and import and drop this down a bit let's go ahead and import axios so let's import axios from axios and we're also gonna be using the u-state hook so let's just go ahead and import that here say import use state from react and then let's go ahead and import our search button we're going to use called bs search like that and make sure it is a case sensitive we're going to grab this from react icons slash bs very important you have that low bs file path at the end so now we have access to uh axios here so let's go ahead and let's go ahead and add in our state next we're gonna use a loading state a city state um so we can pass in our search query and then also our state for our data here so i'm gonna say const here and i'm have city and set city now don't worry too much about this um we're not gonna use this here in just to a little bit but let's go ahead and set that it's an empty string then here we're going to have weather set weather you can name this whatever you'd like you guys it's just what i like to name it there and we're going to set this as an empty object by default and then we'll have our loading set loading just like that okay and this one's going to be false so i'll go again go ahead and give that quick save there that should be all we need to do there now what we want to do actually for our um or api call we're going to wrap this inside of a function here and because we don't want it to run whenever the uh whenever the page loads but rather whenever we search or make the query here so and what we're going to say here i'm going to say constant and wrap this in a i'm going to call it fetch weather just like that pass in an event and inside here i don't want the page to reload so i'm going to say e dot prevent default just like that and what we want to do next is actually set our loading to true and then we'll set it to false afterwards set loading true now we can go ahead and make our call with axios so i'm going to say axios get and then what we can do is just pass in our url site and we're just like that we're just passing it in from right here above and we're going to say then and we're going to get a response here inside of our arrow function and then we can just say we're going to set weather to the response.data it's just a json json format here and what we'd also probably want to do is just go ahead and console.log the response as well just so we can see what make sure we're getting some data back so that's all we need to do um that's all we need to do there and after this we probably want to set our search query even though we haven't done this yet but don't worry about that let's go ahead and set back to an empty string and this will make sense in a moment you guys if it doesn't already and we'll set loading back to false here so um that's all we need to do there now we don't have really a way to run our make our api call so let's just create a little button right here to call that fetch weather function so um i'm just saying give a button right there and we'll say spell batch data and i just want to make sure that we're getting back some um getting back a response here so on click here and we're going to run the fetch that's what just like that so let's go ahead and see if it's working i'm going to give it a nice oh we need to rest start our server here yarndev and we're gonna see if we get back any data here so go ahead and take in just a minute there it is so let's open up terminal there make sure you can still see the screen and what i want you to do is just go ahead and click that button and we should get some data back there you go so this is the response that we're getting from the open weather map api and as you can see if we scroll down through there i know my uh my my face is down here blocking some i apologize but don't worry about that so you can see um we we have all access now all this information from open weather map and inside this main you have temp um you know you might like this here what i want to do is actually change this to the imperial setting here so what we can do we can actually this this is in the documentation over open weather map but what we can do is just pass it in here so um i believe you pass it in here after the city right there what we can say give it a little and sign and we'll say units equal to material just like so now let's go ahead and refresh and uh bench and there we go so temp 99 degrees in dubai right now feels like 100 so perfect you guys that is awesome um now that we know we're getting a response back that's what we need to know let's go ahead and style this thing out a bit and like i said we are using tailwind css so what i want to start off by doing here we can go ahead and just get rid of that button now what we want to start off as i'm going to be using a overlay and also a background image that we're going to pull from unsplash which i think is really great especially since we're using next.js you're going to have some uh you're going to gain some familiarity using the image component inside next gs which is one of the main benefits of using next so we're not going to use all the benefits of next.js you know server side rendering uh you know and all the built-in routing system but let's go over to the unsplash website here and i'm just going to look for them and see if i can find the exact image i used um let's see here doesn't really matter i think i use this one right here so what i want to do is just click on that there and i'm going to right click and just grab the copy image address just like that i'm going to drop this down so now what we're going to use here and like i said i'm going to be using the image component so instead of saying image like that what we're actually going to say is image source and i'm just going to paste in that url okay open this up so you can see paste in that url and then i'm going to say close that off here but inside here i'm going to say layout equal to fill and the fill is going to be inside of uh quotes there oops so go ahead and save that you can use any link you want to use there but that's what we need to do right there so um first thing we need to make sure that the image component is actually imported so let's go ahead and make sure yes it is imported here and i'm going to go and zoom out a little bit so it's easier to see for a moment i want to make sure it's easier for you guys to see as well though so we go over here you're going to notice this error and this is very common this is what happens using next.js and what it's saying is that the hostname images.unsplash.com is not configured so what we need to do is just configure that super quick so images we can actually go ahead and just select that images.unsplash.com now let's open up our side menu the control b there command b and what we need to do is find our next config file right there so go ahead and click that and inside here what we can do is just open up some curly brackets there and what we need to say is images just like that and then inside here open up our curly brackets domains and we're going to use an array in here and then just paste this uh inside some quotes just like that now um similarly in to the emv file whenever you play around with your emv file you have to restart your server and the same goes for your next config file in fact it tells us right here restart the server to see any changes so let's just go ahead and stop our server here and what we need to do is just i'm just i just cleared it out with the clear command and then say yarn dev and that's just going to go ahead and start our server so if we get a refresh everything should work images.unsplash.com is not configured there we go i think i just left that off there should be all we need to go ahead and start this back up as we do have to restart every single time and if we get a refresh it should be working correctly now it's taking a minute here there it goes perfect now you see it and don't worry about that we can come back and fix that later so it's wanting us to basically give it a parent um wrap it in a parent container of uh relative but if you notice this doesn't really maintain the aspect ratio like we want it to and so let's go ahead and fix that so it displays properly on all our devices here and so inside here we can actually just add some class names to our image here so i'm going to give it a class name and what we want to say i'm going to say width full each screen actually don't even have to do that would probably just say object cover since it is something to note here you guys since we use this a layout fill okay so if you didn't use layout fill you're going to get an error and that's because in next.js whenever you're using an externally imported image which is what this is we're pulling it from an outside server whenever you do that you have to define the height and width of the image if you're importing locally from your public folder you do not have to do that next js already knows the file dimensions so if you're not going to be if you're pulling externally and you're not defining the width and height then you can say the layout fill and what that's going to do is just fill to the to the parent container there so like i said this is um and now since we added in the object cover this should be um yeah every way it's going to maintain its aspect ratio so so everything is looking good right now so i do want to add add in a little overlay just to kind of darken it up just a tad here so what we're going to do let's say div right here and this can just be a self-closing div here since we're um we're not going to put anything inside of it it's just an overlay so and i'm going to go ahead and add some notes here i'm going to say overlay and then here we'll say background [Music] background image just like that now inside our overlay this is going to be position absolute so we have to define top zero left zero and you guys if you see this here this will pop up this is the tailwind intellisense plug-in you guys if this is your first time using tailwind i'm sorry i'm just now telling you about it go over here to the extensions and it's called tailwind intellisense right here you guys and what that's going to do is going to give you as you type it's going to let you know what the tailwind class is and also give you recommendations so i highly recommend that especially if you're just learning tailwind css so we'll say whoops we'll say um zero just like that and then we need to just say uh bg black and that's going to give it a background of uh black and i'm gonna say z d one there so we get a z index now um we don't actually want a black background we're going to use an opacity and what we can do actually is just have a slash here and this is all um tailing you guys and as you can see you can see the numbers here so here to say um 95 it'd be almost completely back i don't know if you can even see through that but in here i'm going to set it at 40 and it's going to be a nice little dark overlay here so that's all we need to do for our uh for our overlay and our background image and what i want to do next is actually configure our like our search form here so let's go down right here and for our search i'm going to give this a little note here and i say we'll get it formatted now in here i'm going to zoom in for you guys in here and this is where we're putting our search here what i want to say what i want to say for our search here i have a div here and then inside this div we're going to have a form and we don't need an action or anything we are going to have an on submit but we'll worry about that in a minute and then we'll have a div here and that's going to be empty then we're going to have an input and hit that text is going to be fine and let's give this a placeholder we'll say search search city just like that now just below this um just below this div we're gonna have our button and this is what we're gonna create our nice little um our search box with our button inside our search magnifying glass there inside of that button um we're gonna put this just below that div there button and this is just gonna say um not any text but this is gonna be the bs search just like that so make sure you imported this at the top like we did a little bit earlier and we're grabbing that from the react icons so if you want to use react icons you can just type in search or something like that if you don't want to install the package um and then we can have an on click here on this button here and we'll just run the fetch fetch weather function whenever we click this button and let's go ahead and give this thing some styling here so we can actually see what we're doing so that's what we want right there that's perfect you guys now so to style this thing what we're going to say here so for this div here we want this to be relative we'll say flex justify between their items center and we're going to give this a max and drop this down a bit so you can see it kind of showing up over here you guys and i'm going to drop this down just a little bit more so i want you guys to see this and i'll zoom in here just a moment so um what we're saying is max width and uh in here what we can actually do is open up some brackets and tailwind css and what we can do with the brackets it allows us to add in some custom values so i'm going to say max width of 500 pixels and then we'll just say width full margin auto just like that padding on the top of four text white and then we'll just say z10 for our z index nice intellisense working right there so perfect that's what we want right there you guys relative flex justify between and this is the same as saying a justify content space between item center it gives you the preview of the actual css so that's how fast you get to write css you guys that's why i'm loving tailwind css and uh for the forum here we're going to go ahead and give this some class names a lot of people are like oh you know tailwind's such a big file but guys whatever css you don't use of tailwind at build it purges all of the unnecessary and unused css so don't worry about these large build files so what we're going to say is flex here justify between just like that items center with full same as saying with hundred percent as you see right there uh margin auto margin auto just right there p three and we'll say bg transparent give this thing order order ray 300 text white we'll say rounded and let's just say rounded excel here 2xl this is what i have there 2xl and that's all you have to do to add in to add in the the rounded corners there so next we don't have to touch this div there but we are going to want to style is this input here so let's go ahead and give that a save here and then this input the type text is just fine but for our input we're going to add in some styles here and we can actually lengthen that up a bit so let's see with see how that looks let's do this here what we're going to say is bg transparent like that and notice it's going to just hide away looking better already now a few more things here border none we're going to use text text white focus outline none because you notice whenever we select in here you still see the box and we don't want that so focus outline none just like that perfect then we can say text to excel open up that text a little bit make it a little bigger then for our placeholder we're going to say is the placeholder selector just like that we can say text text see text white or text gray let's just leave it i was going to leave it to gray but that i think that's good right there so i think that's going to be good right there so that's how you use the if you want to use the placeholder selector and tailwind that's how you do it but you know what i think that's going to look good i think that's going to look good just like right there now um for our button let's go ahead and style this button and then we're going to come back and um i think you know that's all we need to do actually but you know this icon here let's make it a little bit bigger and we can just do that by using the size property on uh react icons and what we can say is 20. i think it defaults around 10 or 15. so you know it's a little bit bigger you know you can go up as high as you want there and i believe that's just pixels so i'm going to leave it at 20. now um this is where we're going to be grabbing our query to pass into our url string so how do we do that and how we're going to do that is on this input what we're going to have is an on change and then on change and then in here what we can say is set city and just we're getting that set city this is from our state here right there so this is what we're setting inside of this input everything we put in here and so uh we can say set city event dot target dot value just like that perfect and now if we uh just to show you guys here i'm going to go ahead and open up our developer tools here i know i know my my uh my face is down here i think i'm going to open this up a bit there so if you just console log here we'll say console log city just like that you can see it is empty because we have it says an empty string then once we search up here you can actually see in our terminal miami florida so you can actually see it and so that's just uh real time every time we type a character inside of that input it changes so um we can go and get rid of that because i you know i just wanted to show you guys that so you have a an understanding of what we're doing here so next uh on our uh on our forum what we're going to have is an on submit and on submit just like that and and on submit what we can run is the fetch fetch weather so that way whenever we um click the button or if you just want to hit the enter it's going to work all the same here it's going to run this fetch weather and let's just go ahead and open this up one more time here so we can test it out here so whenever we search a um or you know what we need to actually pass in our city because right now should just run run our uh our our fetch our api but we remember we're not passing in the city so it's still fetching on that dubai right that's the name so let's go ahead and actually pass in how do we pass in our text into that into our query so let's go up to the top here and give it a refresh there so inside here we're going to use our template literal just like we did with our env our process.emv file we're gonna do the same so right here instead of dubai let's go ahead and delete that and again for our template literal dollar sign then our curly brackets and all we have to do is simply put in the city there so let's search for new york for example go ahead and press enter and let's see this should say new york feels like almost 82 degrees or 10 82 degrees feels like 84. so that's how we're going to pass everything through now um what we want to have have is our data actually show up on the screen so let's finish styling this out here so down here we'll put this just below our search here and i'm just going to say whether to have all our all our data is going to be displaying under here so so next what we're going to do is actually um actually display our data here and actually want to put all this instead of just pulling all in the index file we can actually create a new a new file i'm just going to create like a components folder even though this is going to be the only component in here and you know to be honest you guys making this in next.js is probably you know just a little bit overkill but that's okay if you're just learning next yes you got to start small and that's going to be perfect for us here our afce by the way you guys that little uh extension i used was the react redux es7 snippets file and uh extension plug-in so if you want to use that i had a few people ask me about that that's how we're gonna use that and then so back of our index file and what we want to do here is uh we don't want to show this component unless we actually are getting data back so this is how we want our screen to look until we actually uh make a query to to our api so what we want to say here is um what we can say here is weather dot main and dot main is just an endpoint in our api here so basically saying if weather dot main is true then it's going to display our weather right there okay and this is the component that we just need to import so what we can do here control spacebar here at the end and it lets you just a little quick shortcut go ahead and auto import that so let's make sure it's imported perfect now uh what we need to do is actually pass them past all of our data since we're making our api call on this index folder right here what we want to do is actually pass our data down through our component here and that's going to be real easy all we have to say here is um you can actually you can say whatever you want i'm going to call this data just some people name it the same thing and for me when i was learning that seemed very confusing to me i didn't understand it so i like to use different naming here so data and then what we can just pass through is the our weather right here and all that weather is is our is our state right there so that's what we're passing down we're passing down our state and inside of our weather api here and if we go ahead and go ahead and inspect this by the way you guys what i want to do is comment out this console.log so now whenever we uh whenever we search we should not see any data down here in our in our console and i did that on purpose because in and we're going to close this inside of our weather app we need to accept our state that we're passing down right here so all we need to do is go in here and just we can go ahead and destructure this from the get go and we'll just say uh sorry data just like that and then um let's go ahead and console log data and the reason i deleted the console.log on the first page is because i want to ensure that my data is being passed down uh correctly so now if we refresh and search a city in here we should see our data down here perfect and that's what we want you guys so we search miami and there it is miami right there 87 degrees so um we can go ahead and delete that i just wanted to make sure that we are getting the data back uh correctly and since we are using that loading let's go ahead and set up that loading real quick as well um since we're using that loader that i um loader that i pulled in so public so this loader that we're going to use i'm just going to bring it in from my other application here that i started it's just a spinner here and i'm going to put this inside of my public folder you guys so very important you put it inside your public folder and again i'm going to upload this to my github and i'll put a link in the description below if you just want to clone this or grab any of the files feel free i think i just got this from like loader.io or something like that so that's our loader right there it's just a spinner.gif and um what i want to do here is go ahead and we're going to go ahead and just import this in our index file just to get this out the way so import and i'm just going to say spinner and we're going to our public folder just like that and then just spinner enter gif just like that and now so our loading is actually set to false because we've already set or loading to false right there in our state and then whenever we're running our our fetch weather function we're going to set our loading to true and then whenever we get our response back we're going to go ahead and set loading back to false and then down here where we want to return our application what we can say here is uh in here just above here just above our return we'll say if statement and if if loading then we want to actually return a uh our loader here and let's go ahead and create another component here for our um say spinner.jsx and that way um we can just return this uh we can just return our our spinner component here and that'll make it a lot easier so rafce to just generate our functional component here and um we can actually import i need to do that in here spinner let's make this lowercase you can't make it uh the same as the the functions named actually you're going to get some error so m4spinner from and we'll look for this public folder and then just spinner and so um and so in here actually at the top we don't need to import spinner from gif what we need to do is import spinner there for more so we're actually just pulling in that component you guys and um so now we have access to the component so what we can say here we'll just use our image here hey we can use our next image just like that okay and we can just use a fragment you guys or empty empty brackets there which is a fragment here index and all would be alt and we can just say uh loading dot there we go now for our source all we need to say here is spinner just like that and let's go ahead and give this um let's go ahead and just give this class name as well so for class name i was going to say width of a 200 pixels like that margin auto and we'll just say yeah so that's all we need to do for this you guys we go ahead and close the uh the spinner there and then um so now that we've imported our our spinner component here if loading let's just return our um to show our spinner here so we can just say return there just like that and we don't have to use any any uh we don't have to put this in parentheses or anything if you're just returning a single element or or a component there so if loading is true return the spinner else what we want to do is return all this so what we can do is just copy all of that right there and i'm just going to move this up a bit so all i did was just move that inside of our else statement there so if loading return the spinner else we're going to return the rest of our application here that's all we need so there we go so now we have that all done and out of the way so inside our our weather um inside of our weather component here this is uh where we already ensured that we can actually we're passing down our data correctly so everything looks good there so inside of our weather component let's go ahead and style this thing out so we're gonna have a div and uh let's make this here let's go and do it like this so we're gonna have another div inside here then we're gonna have another div and this one's gonna have our image component here and this image component is actually gonna be our icon so say alt just like that there and what we're doing is the top the top section here first so it's going to be self closing tag so for our image um what i have i'm going to go ahead and console.log here data because i want to show you wherever we're getting wherever we're getting our our information from there we go now um so if you open dammit so if you click on this right here and we scroll down and i know my my uh my face is probably in the way but if you look down here on the uh weather right here it is an array and so we're going to access this as a first item in the array and if you see here our icon open this up a bit our icon is 0 4d and what we're going to do that zero 4d is just an endpoint that we're going to put inside of the endpoint inside of this image path here to grab the icon so be free to keep that a little bit larger and just refer back to this here so for the endpoint what it is i'm actually going to pull it over here um but you can find this in the documentation here on the open weather map so the source and this is just going to be an external link here so we're going to put this in quotes that's what it's going to be right there and then um what we can use right here actually we need to put this and template literals here so put some brackets there and template literals won't pass that in and what we want to say here is we're grabbing the template literal here and it's going to be data and then we need to access that weather endpoint so we'll say weather and since it's an array it's a first item in the array we just have to put in 0 there and then it's just going to be icon like that and then what we can say is at 2x.png and what that's going to do is just make it a little bit bigger there so um i don't think we're going to be able to see anything since we haven't done any of our styling here but but that's okay so don't worry about that but that's looking that's looking good right there now um make sure everything is looking good perfect so what we want to use so it's giving us an error because uh images is not imported so let's just go ahead and import that and this is going to be a good a a good idea here because since we're not actually um we're not using the layout fill this is going to be an example where we do have to define the width and height so what it's saying is to find width and height that's no problem so in here what we can say here whoops we'll say width and for the width here i'm going to set it to 100 and same with the height here you can set it to whatever you like want to say 100 100 and that should be all we need to do is there so let's just try this one more time search denver up and okay we need to also add this to our config file if you remember and that's going to be really easy so just go ahead and select that and let's go down to our config file here and then since it's an array you can just paste it in just like that and that's going to be all that we need to do but remember you know whenever we make changes to our env file or the next config all we need to do is uh we do need to to restart our server here let's go ahead and give this a refresh and hopefully whenever we query a city we should see there he goes so there is our icon and that's how we're going to bring in the image component using an external url and actually adding it to our content we use the layout fill and also to find the width and height on some of these here so next what we want to do now that we have that installed or configured correctly i'm going to have a p name here and inside here this is going to be the data dot weather here zero whoops accessing that first item in the array and right here i just want to say main and this is going to be the temp that displays here i wish we could see let's see if we can just keep it open like that okay so and we're going to come back and style all of this you guys so underneath this dip we're going to have another p tag here and this is going to be the data weather uh or sorry this is going to be the main temp here so data dot main dot temp and let's go ahead and give this a two fixed otherwise you're gonna have a it's going to be a decimal point for your temp and we don't want that so that's what we want to do there and also we want to use the uh we want to display the degree sign and this is how we can display the html code for the degree sign so just go ahead and do that don't mind that little box there what it is is the and sign the uh the number sign 176 and then the semicolon there and if we go ahead and search this it should be displaying here it's not going to show because we haven't set it as relative yet so but don't worry about that so this is the top portion here and um that's going to be all we need to do for the top and then under here we can just say that's the bottom here so let's go ahead and give this thing some style so we can actually see what we're doing here and zoom out just a little bit so in here class name we want this to be relative just like that there one here there we go relative and then what we're going to say is we want to have a uh we want this to be flex flex column here just to find between and since we're having a uh it's going to be separated top and bottom it's going to that's how we're going to do it there the justify between max with we'll say 500 our max width is going to be 500 pixels just like so with full and the height we're going to say is 90 per height so let's go ahead and add in our brackets there margin auto we'll say p 4 and text gray 300 let's add z10 so now you can see that there and just to show you guys we deleted that you know that's our that's our little three sign there so go ahead and paste that back in there and this two fixed if we got rid of all that you're going to see it's just a decimal point we don't want that for our for our degrees there that's what we need to do right there so for the second div here we want to go ahead and give this a class name and this is going to be just to give this some notes for you guys this is the top part so this we want it to be relative flex justify between just like that adding on top of perfect so same with this div flags flex calm center perfect and for image we don't need any styling and for this p tag i'm going to give it styling text to excel it's going to make it a little bit larger and for our uh for our camera information here for our for our uh fix here for our temp we're gonna go ahead and it should be 2001 there so let's go ahead and sorry that was the the wrong one there here we have our temp let's go ahead and this class name and for this one i want it to be text i'm going to use 9xl and it's going to make it a very a lot so perfect you guys that's what we want right there now next what i want to do is go ahead and just style the bottom part of this thing and we're going to put that in down here so for the bottom part let's create a div here we're going to have a p tag inside of here this set is going to say weather in and then what we can grab is the um weather in and then we can grab the name in here so what it is just weather dot or data.name and that will be dallas right there so what we can say is data that name just like that and there it is right there we haven't finished styling it but that looks good right there perfect and then we're gonna have a div under here with another another div there and inside here we're gonna have a p tag and this is gonna say say we'll say um data.maine.feels deals like go and let's go ahead and copy this over use that as well and what we want to say here is uh fixed okay looks like i have just an extra curly bracket in there and we'll add our little percent sign there perfect so that's what we want right there you guys let's make sure my face is staying in the screen here and so so now we have that feels like and then just under there feels like yeah and let's just go ahead and we're going to copy this down there we go and in this next one what's going to say is humidity humidity and then this last one is going to be when and so for this one here see it's data.main.humidity and we can go ahead and data main.humidity here we go and instead of the degree sign we can just get that image there and then down here what we're going to use is the wind speed so we don't need any of that there uh and zip main data.wind speed just like that and we'll say to do fixed let me just leave that so everything is looking good right there we're probably going to want to add a uh we'll say h just like that looks good perfect so next let's go ahead and style this thing at the bottom here so for this here we're going to have a little overlay over it so let's give the class name and say bg black just like that and i'll say 75 for a nice overlay hey there you go let's drop this down go drop that down there now okay bg black 75 and you can change this if you want here i might say 50 make it a little bit lighter and so we want this to be relative and then p 8 for some padding we'll see rounded md in here so we can get some some nice little rounding edges it's good so for this here class we'll say text to excel and we're going to want this to be right in the middle there so we'll just say text text center and then padding bottom of 6 to give a little perfect so this next div is just gonna surround all this these uh three divs down there so let's just give this class name and flex justify b justify between and then we'll say text center just like that and that should spread everything out that's looking good looking good already now we don't need to add anything to these parent these parent divs they're holding this information in here we are just going to want to style these here and they're all going to be the same so what i'm going to do is actually just hold down this option button and as you see it's allowing me to actually select multiple lines in vs code and what this is just going to do is just save some time that way we can apply multiple styles here because what we want to say is a font bold and then text to excel just like that and it's going to beef up these top top sections right there so that's all we need to do and then the same thing for these uh bottom here i'm just going to select here and for these bottom ones class name it's going to say text excel just like that so um let's have a look right here so let's go ahead and close this you guys and let's open this up make sure it's displaying properly here give it a refresh we're going to type in mumbai right there we go haze you can see this is our icon right there i don't really love the icons that we're grabbing over from open weather map but everything is looking great so far so i hope you like this build you guys now if you want to deploy this i'm going to put a link here somewhere on the screen you're going to have a link to deploy a next js application and you guys this is going to take maybe five minutes at most so if you want to learn how to actually deploy build this application and deploy it to the web for free using for sale then go ahead and click one of these links here and i'll show you how to deploy this thing so thanks for following along you guys we just built a next js weather application styled with tailwind css click here if you want to deploy this thing thanks for watching you guys make sure you smash that like button and subscribe to the channel i'll see you on the next one

Channel: Code Commerce

Views: 19,552

Keywords: nextjs, next js, react js, javascript, tailwind css, css, html, web developer, programming, coding, build a web application, weather app, build a weather app in next js

Id: b9fWvR5O0Hc

Length: 49min 14sec (2954 seconds)

Published: Tue Jun 28 2022