Build A NEXT JS Weather App - OpenWeatherMap API - Tutorial

🌤 Follow along as I build a Next JS weather app styled completely in Tailwind CSS. I am learning Next JS so I find it helpful to build multiple applications using a certain tool. We will be using axios to make the API call to the Open Weather Map servers and return JSON data that we will be rendering on the screen. In this video we will use conditional rendering in javascript, Image component in Next, API calls, Tailwind CSS and more.
🙏 Thank you for following along and please let me know what you think in the comments below!
🏆 Next JS App
🏆 Tailwind CSS
🏆 Axios API Calls
🏆 openweathermap.org/api - OpenWeatherMap API
❤️ Support the Channel
www.buymeacoffee.com/clintbriley
Instagram 💪
/ fireclint
⏰ Timestamps
00:00 Start
00:21 - App Demo
01:00 - Create next-app
01:21 - Install Tailwind CSS
04:20 - OpenWeatherMap API Key
07:32 - Install Axios & React-Icons
8:50 - Add state
09:30 - Fetch Weather Data
14:22 - Image Component (External)
20:00 - Search UI & Functionality
36:00 - Weather UI & Conditional Rendering
48:40 - Deploy & Hosting Video
💻 GitHub Repo 💻
github.com/fireclint/nextjs-w...
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj

[@Mugenremix]

I remember doing this tutorial as my very first in the world of react/nextjs around 5 months ago having only learned html/css/js before it. Took me like 4 days to complete the first time (got stuck at little things like using a regular ' instead of a backtick, string interpolation not fetching the api key from my env folder because client components require NEXT_PUBLIC and things like that). Today I came back to do it as a refresher, using typescript and man It feels good to know how far one can go. Thank you so much man for all this knowledge youve shared with us! Youre changing peoples lives without even knowing it.

[@mertylmaz6288]

Don't get bothered with views and subscribers because the content that you are doing is great and it's probably helping a lot of people. Keep up the good work.

[@codecommerce]

Thank you Mert! You’re the man!

[@developedbyjs]

Thanks a lot for this, your tutorials are helping so many developers learn by doing!

[@codecommerce]

Thank you so much dude! That’s amazing!

[@kgamer5842]

This man is gold

[@fgalego]

Another great tutorial, legend!

[@codecommerce]

Thank you my friend!

[@universecode1101]

Nice tutorial and great stack 👍🏻

[@codecommerce]

Thank you!

[@ebraraltunkaynak6438]

thank you dude for this video

[@josephomotade864]

Another banger! Thanks for all this videos

[@codecommerce]

Joseph in the house!! What’s up dude!

[@josephomotade864]

@@codecommerce I’m good , you an inspiration? I have a lot of projects I’m working on now, all thanks to you

[@Nanashi-rq7lk]

Thanks , Nice turtorial

[@muneebmohd]

Nice. Something really refreshing

[@codecommerce]

Thank you!

[@krismatic_]

This is very helpful, thanks

[@codecommerce]

Glad it was helpful!

[@juguetestoys1137]

Clint, Your tutorials are excellent ! I have made this app and it works fantastic. I wanted to add the functionality to load a default city when loading the page and I have also succeeded. I also wanted that instead of the default image that you put in the background, it loads instead an image of unsplash, that matches the city that I am looking for, either through the search box, as well as when loading the page with the city that I have predefined. If you can do something about this as a complement to this fantastic app you made, it would be great, since I can not achieve it :(

[@codecommerce]

That’s awesome!! And a great idea. I’d have to think about that one.

[@toastrecon]

Thank you!

[@codecommerce]

Thank you David!

[@miguellopezlife4100]

Fire video, you're the coding chad (that's a compliment :) )

[@codecommerce]

Thank you dude!

[@ahmedn76841]

I love the way you're teaching,really appreciate it.

[@codecommerce]

Thank you Saman!

[@Aiducateur]

if I may, you could use "word wrap" of the view menu so you don't have to make the vscode screen bigger.... great tutorial again!

[@codecommerce]

Marc- you’re a life saver! I just turned that on. Thank you!

[@Aiducateur]

@@codecommerce :)

[@niteshprajapat7918]

You are awesome Sir ❤️🥺

[@codecommerce]

Thank you dude!

[@rajwindersingh-zt6if]

Thanks Brother😊

[@codecommerce]

Thank you my friend!

[@cyberwar4747]

osm 🥰loveFromPalistan🤩

[@codecommerce]

Thank you! Much love!

[@kk-rb7no]

Thank you for posting a useful video. By the way, I'm studying with reference to your video, but is there a KZbin channel that you always refer to? For example, Next.js and React

[@codecommerce]

I still watch a bunch of tutorials. Not really start to finish, I usually just find a piece or concept that I don’t understand and then move on.

[@apexyu164]

HI thanks for your video, so are your placehoder query Client side rendering Or SSR?

[@michaellevi6743]

Hey Brother hope all is well. I would love to see a react routing or a conversion to nextJS video. Keep them coming:)

[@codecommerce]

Michael! What’s up dude! You got it man! I’m loving react & next js!

[@michaellevi6743]

@@codecommerce Clinttttt.. yo brother sup.. How's your week going? Awesome, looking forward to seeing it.. Dude You got me hooked on NextJS / Tailwind:) All your fault......:)

[@ApeToot]

You should make a video on error handling, if i type in something random the server returns a 400, and its quite difficult to figure out how to stop this error and custom handle it.

[@sensivityable]

Thanks! What is the name of the VSCode theme?

[@elconrel9665]

Thank you for the video, It's amazing. I wanted to know why you decided to use axios to request the server, there is a special function in Next that does this on the server - "getStaticProps"

[@codecommerce]

Hi Elcon, yes that would probably be a lighter weight way. :)

[@elconrel9665]

@@codecommerce I understood, thanks!)

[@cianb535]

Great video as always! Anybody any idea why the input field doesn't clear after a search? I thought setCity(" "); after the API call would do it but it doesn't seem to. Thanks!

[@codecommerce]

I will have a look - that’s not very user friendly!

[@user-sy8cg5ut8o]

when trying to use the external link for the openweathericons, it kept giving me 400 error for axion, i went on the site and copied the link from there even form the github and no luck, any tips?

[@prabhurao2773]

why did you not use useEffect() and set the dependencies to an empty array so it only runs once on initial render ?

[@codecommerce]

We could’ve used a useEffect, but I didn’t want it to run until the user submit the query.

[@prabhurao2773]

@Code Commerce , why am i getting an error that says hydration error ? i am so confused with next js can you make more videos on NEXTJS?

[@codecommerce]

Where are you getting this error?

[@astyartelgaming5015]

@@codecommerce hey man thanks for reaching out , so let’s say I have a components folder which is nested like this nav, body , footer and in body I have the whole page ( all pages except nav and footer) and and I am importing nav, body , footer all in index.js (the default file we get when we use create-next-app inside the pages folder right under the api folder ) like this that’s when I get this error saying hydration error switching to client side rendering 🥺

[@astyartelgaming5015]

@@codecommerce also I just subscribed from this account As well ! Cause I am huge fan I’ve seen KZbinrs who grew from 200k all way to 1.2mil like WYNNSANITY and I was a part of that growth and I’ve donated thousands of dollars via super chats and they just forget who supported them , but you on the other hand 🤚 are hard working and always giving so imma go ahead and subscribe and tell pretty much every tech friend I have to subscribe as well , it would be amazing if you could go live a lot of user questions can be answered ! And also people like us can support the good work you put in Cheers 🍻

[@michaellevi6743]

Btw we you made the spinner component but its not used at all, what was the purpose?

[@codecommerce]

Did I? I may have forgot! Haha sorry!

[@michaellevi6743]

@@codecommerce Lol yea you added it but it never displays on the app at all, just curious what the purpose of it was then in the build....lol

[@arashrahimipour7880]

Hi mate, thank you for the great videos. I have learned many things from you. I wonder if you could help me. I got error 401. how can I fix it?

[@entryxbad]

Hi. You also have an error with the API key via .env. If I put the API into a component, everything works, but as soon as I put it into a .env file, there's a 401 error.

[@arashrahimipour7880]

@@entryxbad cheers, mate.

[@entryxbad]

Solved it by restarting the server.

[@arashrahimipour7880]

@@entryxbad thanks. I’ll do it.

[@lightningwave403]

yeah bro same for me@@entryxbad

[@agustinBell95]

Hi! I have this error while i tryng to do the weather component, i Dont know what to do "Unhandled Runtime Error AxiosError: Request failed with status code 401" My .env NEXT_PUBLIC_WEATHER is fine. What would be the solution ?

[@elioyoussef7901]

hey @gusbelito I'm facing this issue as well, i think we should wait a couple of hours in order for the API key to be activated

[@agustinBell95]

@@elioyoussef7901 Nono, check your .env component, if there's a ";" at the end of the key, take it off. After that it works