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

❤️ Support the Channel

Instagram 💪

⏰ 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 💻

🔥 My Coding Equipment 🔥

[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.

[rigorr-mortis]

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.

[lauv-beebie]

Simple and clear to follow, Thanks a lot. Cheers

[souvikmukherjee]

Great tutorial with an awesome techstack with flawless explanation

[developedbyjs]

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

[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.

[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!

[juguetestoys]

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 :(

[josephomotade]

Another banger!
Thanks for all this videos

[DavidChacon-mt]

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?

[cianb]

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!

[ahmedn]

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

[miguellopezlife]

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

[apexyu]

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

[sensivityable]

Thanks! What is the name of the VSCode theme?

[elconrel]

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"

[kk-rbno]

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

[michaellevi]

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

[prabhurao]

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

[prabhurao]

@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?